How to Login through AJAX in ASP.NET MVC 3 - asp.net-mvc

Question

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();

Answer 1

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