Asp.net Ajax MVC login redirect to home not working

Question

I am new on asp.net mvc and i am trying to redirect home controller after login.ajax is not redirecting to home page.below is my code

My login Page

@using (Html.BeginForm("Authorize", "Login", FormMethod.Post, new { id = "loginform", @class="form-horizontal form-material", onSubmit = "return doLogin(this);", data_restUrl = Url.Action("index", "Home", new { id = 0 }) }))
            {
                    @Html.AntiForgeryToken()
                    <a href="javascript:void(0)" class="text-center db">
                        <img src="~/Scripts/plugins/images/eliteadmin-logo-dark.png" alt="Home" />
                        <br /><img src="~/Scripts/plugins/images/eliteadmin-text-dark.png" alt="Home" />
                    </a>
                    <div class="form-group m-t-40">
                        <div class="col-xs-12">
                            <input class="form-control" type="text" required="" name="UserKey" id="UserKey" placeholder="Username">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="form-control" type="password" name="UserPassword" id="UserPassword" required="" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="checkbox checkbox-primary pull-left p-t-0">
                                <input id="checkbox-signup" type="checkbox">
                                <label for="checkbox-signup"> Remember me </label>
                            </div>
                            <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right"><i class="fa fa-lock m-r-5"></i> Forgot pwd?</a>
                        </div>
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Log In</button>
                        </div>
                    </div>



            }

Ajax Call

function doLogin(form) {
        $.validator.unobtrusive.parse(form);
        loader(true);
        if ($(form).valid()) {
            var ajaxConfig = {
                type: 'POST',
                url: form.action,
                data: new FormData(form),
                success: function (response) {
                    alert(response);
                    if (response.success) {
                        alert();
                        //$.notify(response.message, "success");

                        //window.location.href = $(form).attr('data-restUrl');
                        loader(false);
                    }
                    else {
                        alert("Something went wrong");
                        //$.notify(response.message, "error");
                    }
                }
            }

            $.ajax(ajaxConfig);

        }
        return false;
    }

My Controller

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }


    }

My Login Controller

[HttpPost]
        public JsonResult Authorize(User loginModel) {

            try
            {
                using (POSEntities1 db = new POSEntities1())
                {
                    User usr = db.Users.Where(x => x.UserKey == loginModel.UserKey && x.UserPassword == loginModel.UserPassword).FirstOrDefault<User>();
                    if (usr != null)
                    {
                        Session["UserID"] = usr.UserID;
                        Session["UserName"] = usr.UserFirstName +" " + usr.UserLastName;
                        return Json(new { success = true, message = "Login Sucessfully" }, JsonRequestBehavior.AllowGet);
                    }
                    else {
                        return Json(new { success = false, message = "In-valid Username or Password" }, JsonRequestBehavior.AllowGet);
                    }
                }

            }
            catch (Exception ex)
            {
                return Json(new { success = false, message = ex.Message }, JsonRequestBehavior.AllowGet);
            }
        }

When i click the login button and i am getting below response and ajax call back is not receiving,please guide me whats wrong with my code? Error link

Answer 1

Could you please do the below changes. 1) On the form

onSubmit = "return doLogin(event);"

2)Add below code to your doLogin(event) method as the first line:

event.preventDefault();

Answer 2

In your Html.BeginForm change the data attribute from data_restUrl to data-restUrl .

Notice here hyphen ( - ) not an underscore ( _ ).

And in you're ajax success response unhide the below line

window.location.href = $(form).attr('data-restUrl');

if you use newer jQuery >= 1.4.3:

window.location.href = $(form).data("restUrl");//instead of "data-restUrl", we can use "restUrl"

Answer 3

I did some changes on my code which is below there are two changes.

function doLogin(event, form)
            {
                event.preventDefault();
                loader(true);
               var ajaxConfig = {
                    type: 'POST',
                    url: form.action,
                    data: new FormData(form),
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (response) {

                        if (response.success) {
                            window.location.href = $(form).attr('data-restUrl');
                            loader(false);
                        }
                        else {
                            alert("Something went wrong");
                        }
                    }
                }

                $.ajax(ajaxConfig);

                return false;
            }