MVC RedirectToAction Doesn't Work After JQuery/ Ajax Post

Question

I've got the following MVC 5 Action within my Controller

Controller

public ActionResult Nominations(int id, string feedback)
{
   //code here
}

The Razor View for this Action contains a hidden text box. When the user hits a submit button on a Modal Confirm Box, a JQuery function is called which contains an AJAX call to get the value within the hidden text box and then passes it to an Action within my MVC Controller.

JQuery

$("#mySubmit").click(function () {

    $.ajax({
        type: "POST",
        url: "/MyController/Delete/",
        data: { userID: $("#hiddenID").val() },
        success: function (result) {
            $('#myModal').modal('hide');
        },
        error: function (result) {
            alert('error');
        }
    });

});

Controller

[HttpPost]
public ActionResult Delete(int userID)
{
   var user = _userService.GetUserByID(userID);

   if(!String.IsNullOrEmpty(user.userID))
   {
      _userService.Delete(userID);
      _userService.Save();
   }

   return RedirectToAction("Index", new { id = userID, feedback = "Deleted" });
}

public ActionResult Index(int userID, string feedback)
{
    //code here
}

The value is passed to the Delete Action within my Controller, the delete functionality executes (deletes the record), and then the userID and feedback parameters are passed to the Index Action.

This is where the problem is, although the delete functionality occurs and I can see the parameters (userID and feedback) being passed to the Index Action, the View which is then displayed to the User does not change, i.e., the User is not redirected to the Index View even though I see that code being executed when i debug, instead, the application stays on the Nominations View.

Why is this happening? I need the user to be redirected to the Index View.

Also, instead of an AJAX call in my JQuery function, I replaced it with a simpler JQUery Post

$.post("/MyController/Delete/", { userID: $("#hiddenID").val() });

But the problem with this is that after the Delete occurred, the Modal popup does not close.

Any help with this would be greatly appreciated.

Thanks.

You can not make a redirect via ajax, it has been discussed many times at SO. Check [this post](http://stackoverflow.com/q/23786838/1199711) how you can make this work. — Zabavsky, May 27 '14 at 15:48

score 3 · Answer 1 · answered May 27 '14 at 15:55

Because you're performing an AJAX request, it won't reload the user's browser page on success, all it will do is return the results of the action method called within the result parameter. Also, $.post is just a shorthand version of $.ajax so behaviour will be the same (the modal doesn't change because you've not provided a success callback).

If you want to load a different view on success, you could use window.location within the $.ajax success callback.

score 3 · Accepted Answer · answered May 27 '14 at 16:01

You would need to do the following:

$("#mySubmit").click(function () {

$.ajax({
    type: "POST",
    url: "/MyController/Delete/",
    data: { userID: $("#hiddenID").val() },
    success: function (result) {
        $('#myModal').modal('hide');
        window.location.href 
        = "@Url.Content("~/controllername/Index")" 
         +"?id="+userID+"&feedback=Deleted";
    },
    error: function (result) {
        alert('error');
    }
});

});

MVC RedirectToAction Doesn't Work After JQuery/ Ajax Post

2 Answers2