jquery $.ajax function in mvc3

Question

I'm new to the MVC3 .NET. I want use jquery ajax function for login. I have read some solutions in this site. But when I use these methods and write my code it has one error. the ajax code is like below:

$(document).ready(function () {
$('#loginBut').click(function (e) {
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
        url: '/Admin/Login',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: {login: username, key:password},            
        success: function (msg) {
            alert("username : " + msg.username);
        }                
    });
    $('#loginBut').blur();
});
});

and my admin controller with login method is like this :

public class AdminController : Controller
{
    //
    // GET: /Admin/

    public ActionResult Index()
    {            
        return View();
    }

    public ActionResult Login(string login, string key)
    {
        return Json(new { username = login, password = key});
    }

}

the script is linked to the page. but after runnig and sending data I have this error:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:1431/Admin/Login

I'm surprised you got a 500, it should've been a 404 since your action is not annotated with HttpPost and you're sending a Post request — Rui
– Rui, Commented Mar 14, 2014 at 17:30

Rui · Accepted Answer · 2014-03-14 17:35:07Z

1

You controller action is only available to a GET request, and you are sending a POST. Annotate it with [HttpPost]:

[HttpPost]
public ActionResult Login(string login, string key)

Also data: in $.ajax should not be an object, you are specifying application/json as the content type and the default behavior is to convert the object to form-urlencoded. To use json convert it to a json string

data: JSON.stringify({login: username, key:password})

edited Mar 14, 2014 at 17:35

answered Mar 14, 2014 at 17:27

Rui

4,9163 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shyju · Accepted Answer · 2014-03-14 17:49:59Z

500 error means, your code is running into some run time error. You may inspect the complete response from your server page using firebug.

You should either use JSON.stringify method to convert your object to JSON format

$.ajax({
    url: '@Url.Action("Home","Login")',
    type: 'POST',
    contentType: 'application/json',              
    data:JSON.stringify({ login: username, key: password }),
    success: function (msg) {
        alert("username : " + msg.username);
    }
});

or send the real JSON data like this

$.ajax({
     url: '@Url.Action("Home","Login")',
    type: 'POST',
    data: {"login":username,"key":password},
    success: function (msg) {
        alert("username : " + msg.username);
    }
});

If you are returning JSON data from a GET action method, You need to mention JsonRequestBehaviour.AllowGet which specifies whether HTTP GET requests from the client are allowed.

http://msdn.microsoft.com/en-us/library/system.web.mvc.jsonrequestbehavior(v=vs.118).aspx

return Json(new { username = login, password = key},
                                                 JsonRequestBehaviour.AllowGet);

or mark your action method with HttpPost attribute.

[HttpPost]
public ActionResult Login(string login, string key)
{
    //to do :return something/redirect
}

In the case of a Login, always use HttpPost decorated action methods.

Collectives™ on Stack Overflow

jquery $.ajax function in mvc3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related