how to redirect to a view on $.AJAX complete - asp.net mvc 3 - asp.net-mvc

Question

Ok..i want to redirect a user after the validation check using $.AJAX to a peritcular view... how do i do that ? .. pleae help...
here is my $.AJAX code... EX: i want user redirected to "/Home/Movies" controller action...
if not logged in stay on the same page...
<script type="text/javascript">
$('#btnLogin').click(function () {
var email = $('#Email').val();
var Password = $('#Password').val();
var postdata =
{
"Email": email,
"Password": Password
};
$('.Loading').fadeIn(50);
$.ajax({
url: '#Url.Action("CheckLogin","Home")',
data: postdata,
success: function (msg) {
var data = msg.split(':');
$('#Result').html(data[0]);
$('.Loading').fadeOut(50);
},
error: function (data) {
$('#Result').html(data);
$('.Loading').fadeOut(50);
}
});
});
</script>
here is my controller action which is used for checking Login details...
public ContentResult CheckLogin(Users checkuser)
{
if (db.CheckUserLoginDetails(checkuser.Email, checkuser.Password))
{
return Content("Login Successful:" + checkuser.Email);
}
else
{
return Content("Login UnSuccessful");
}
}
also how can i pass a returned results from this view to another view.. in this exmaple if the user is logged in i want to show his email id on the redirected page which is lets say "/home/Movies"
thx in advance

Answer 1

Show your loading image before ajax request, and hide on success or error handlers.
add <div class="loading">Loading...</div> to your markup
$('.loading').fadeIn(50);
$.ajax({
url: '#Url.Action("CheckLogin","Home")',
data: postdata,
success: function (msg) {
$('#Result').html(msg);
$('.loading').fadeOut(50);
},
error: function (data) {
$('#Result').html(msg);
$('.loading').fadeOut(50);
}
});

Answer 2

Take a look at the ajaxStart() and ajaxStop() event handlers in jQuery. You could use these to show and hide a layer with a gif-animation.
http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/

Answer 3

use beforSend and complete attributes.
$.ajax({
url: '#Url.Action("CheckLogin","Home")',
data: postdata,
success: function (msg) {
$('#Result').html(msg);
},
error: function (data) {
$('#Result').html(msg);
},
beforeSend: function() {
$("body").append("<div class=\"ajaxLoader\" id=\"ajaxLoader"\"><div class=\"ajaxAnimation\"></div></div>");
$("#ajaxLoader").hide();
$("#ajaxLoader").fadeIn('fast');
},
complete: function() {
$("#ajaxLoader").remove();
}
});
And specify animation with css
.ajaxAnimation {
background-image: url('images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
}