ASP.NET MVC Prevent Action Redirection with AJAX

Question

I have an AJAX function inside of my _Layout.cshtml partial view that's used by all views that posts to SignIn(). If the login is unsuccessful, it is supposed to redirect to SignInFailed() and simply return the view. Instead, after returning the view, it is redirecting back to the original view.

I am not receiving any kind of exceptions or errors that would prevent it from remaining in SignInFailed().

Here is my AJAX:

$.ajax({
           type: "POST",
           traditional: true,
           url: "@Url.Action("SignIn", "Home")",
           data: { user: name, password: code, pageName: urlPage },
                   success: function () {
                       ///do stuff
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        if (debug) {
                            alert(XMLHttpRequest.responseText);
                            alert(textStatus);
                            alert(errorThrown);
                        }
                    }
});

Why is it redirecting back to the original view when there is no instruction to do so and what can I do to prevent this behavior?

Its not redirecting back to the original view. Its an ajax call and ajax calls never redirect - you never left the page. The whole point of ajax is to stay on the same page — user3559349
– user3559349, Commented Apr 26, 2017 at 21:18
@StephenMuecke I see. Even if I set the action to return RedirectToAction will it still remain on the same page? — thetipsyhacker
– thetipsyhacker, Commented Apr 26, 2017 at 21:19
@StephenMuecke how can I use JavaScript to post data and still redirect? I can't post using razor and models because the sign in form is shared across all views including views with their own form (like a contact page). — thetipsyhacker
– thetipsyhacker, Commented Apr 26, 2017 at 21:24
You can return a JsonResult indicating success or otherwise, and based on that, use location.href = someUrl; in the success callback to redirect. — user3559349
– user3559349, Commented Apr 26, 2017 at 21:27

thetipsyhacker · Accepted Answer · 2017-05-26 17:37:05Z

As Stephen Muecke says in the comments of my question, AJAX is designed to post and get data without refreshing or redirecting the page; hence why my previous method didn't work. Instead of trying to redirect in the back-end, I return JSON from the back-end letting the front-end know whether login was successful. Then, depending on the result, I redirect or refresh with JavaScript.

I changed my SignIn() action to return JSON:

public ActionResult SignIn(string user, string password)
{
    //Some database stuff validating username and password
    if (loginSuccessful)
    {
        return Json(new { status = "success" });
    }
    else
    {
        return Json(new { status = "failure", redirectUrl = "/Home/SignInFailed" });
    }

}

and I changed my AJAX to:

$.ajax({
           type: "POST",
           traditional: true,
           url: "@Url.Action("SignIn", "Home")",
           data: { user: name, password: code },
                   success: function (result) {

                       if (result.status == "success") {
                           location.reload();
                       }
                       else {
                           location.href = result.redirectUrl;
                       }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        if (debug) {
                            alert(XMLHttpRequest.responseText);
                            alert(textStatus);
                            alert(errorThrown);
                        }
                    }
});

Collectives™ on Stack Overflow

ASP.NET MVC Prevent Action Redirection with AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related