MVC3中的jQuery $ .ajax函数

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

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})

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.