How to Login through AJAX in ASP.NET MVC 3

No i have been stuck here ... can you please help me out...

$(':submit').click(function (e) {
    var username = $('#username').val();
    var password = $('#password').val();
    var postdata =
    {
        'Email': username,
        'Password': password
    };

    $.post({
        url: 'http://localhost:7651/Home/CheckLogin',
        data: postdata,
        success: function (msg) {
            alert('Hi');
        }
    });
 });

this is not working ...its not calling the action controller somehow...

my controller action is

public string CheckLogin(Users checkuser)
{
    if (db.CheckUserLoginDetails(checkuser.Email, checkuser.Password))
    {
        return "Login Successful:" + checkuser.Email;
    }
    else
    {
        return "Login UnSuccessful";
    }
}

please help.... also do i need to prevent the defualt behavior of the submit button like e.preventDefault();

Here are the steps you need to do:

Your LoginController would need to validate the login and return the HTML Fragments containing the Login Status. Note that you don't need a fullblown HTML here. Just the fragments containing the result
As you probably know, you can utilize jQuery.ajax that you put in your view. To append the Login Result into the DIV, you could use jQuery.html Here is the snippet that you would need (NOTE: not debugged yet, but roughly something like below)


// Override form submit
$("form").live("submit", function (event) {
    event.preventDefault();
    var form = $(this);

    $.ajax({
        // Get the action URL
        url: form.attr('action'),
        type: "POST",

        // get all form variables
        data: form.serialize(),

        // upon success, the fragment of HTML from the Controller will be stored in loginResultHtml
        success: function(loginResultHtml){

            // append the html to your login DIV id using jQuery.html function
            $(#your-login-status-div-id).html(loginResultHtml);
        }
    });
});