How can I RedirectToAction within $.ajax callback?

Question

I use $.ajax() to poll an action method every 5 seconds as follows:

$.ajax({
    type: 'GET', url: '/MyController/IsReady/1',
    dataType: 'json', success: function (xhr_data) {
        if (xhr_data.active == 'pending') {
            setTimeout(function () { ajaxRequest(); }, 5000);                  
        }
    }
});

and the ActionResult action:

public ActionResult IsReady(int id)
{
    if(true)
    {
        return RedirectToAction("AnotherAction");
    }
    return Json("pending");
}

I had to change the action return type to ActionResult in order to use RedirectToAction (originally it was JsonResult and I was returning Json(new { active = 'active' };), but it looks to have trouble redirecting and rendering the new View from within the $.ajax() success callback. I need to redirect to "AnotherAction" from within this polling ajax postback. Firebug's response is the View from "AnotherAction", but it's not rendering.

Kirk Woll · Accepted Answer · 2013-06-12T04:12:36.387

19

You need to consume the result of your ajax request and use that to run javascript to manually update window.location yourself. For example, something like:

// Your ajax callback:
function(result) {
    if (result.redirectUrl != null) {
        window.location = result.redirectUrl;
    }
}

Where "result" is the argument passed to you by jQuery's ajax method after completion of the ajax request. (And to generate the URL itself, use UrlHelper.GenerateUrl, which is an MVC helper that creates URLs based off of actions/controllers/etc.)

edited Jun 12 '13 at 04:12

answered Aug 20 '10 at 21:29

Kirk Woll

76,112
22
180
195

found something similar on another post after exhaustive searching. only difference was that it used window.location.replace instead. thanks! – David Fox Aug 20 '10 at 22:24

score 4 · Answer 2 · answered Mar 10 '16 at 14:26

I know this is a super old article but after scouring the web this was still the top answer on Google, and I ended up using a different solution. If you want to use a pure RedirectToAction this works as well. The RedirectToAction response contains the complete markup for the view.

C#:

return RedirectToAction("Action", "Controller", new { myRouteValue = foo});

JS:

 $.ajax({
    type: "POST",
    url: "./PostController/PostAction",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    complete: function (result) {
        if (result.responseText) {
            $('body').html(result.responseText);
        }
    }
});

score 2 · Answer 3 · edited Dec 20 '16 at 01:06

C# worked well

I just changed the JS because responseText was not working for me:

 $.ajax({
        type: "POST",
        url: posturl,
        contentType: false,
        processData: false,
        async: false,
        data: requestjson,
        success: function(result) {
            if (result) {
                $('body').html(result);
            }
        },

        error: function (xhr, status, p3, p4){
            var err = "Error " + " " + status + " " + p3 + " " + p4;
            if (xhr.responseText && xhr.responseText[0] == "{")
                err = JSON.parse(xhr.responseText).Message;
            console.log(err);
        }
    });

If you add the parametter "dataType: 'json'" to your request, you will get the required responseText variable in the result. — Peter Suwara, May 13 '18 at 16:53

score 0 · Answer 4 · answered Mar 07 '18 at 11:56

You could use the Html.RenderAction helper in a View:

public ActionResult IsReady(int id)
{
    if(true)
    {
        ViewBag.Action = "AnotherAction";
        return PartialView("_AjaxRedirect");
    }
    return Json("pending");
}

And in the "_AjaxRedirect" partial view:

@{
    string action = ViewBag.ActionName;
    Html.RenderAction(action);
}

Reference: https://stackoverflow.com/a/49137153/150342

How can I RedirectToAction within $.ajax callback?

4 Answers4

Linked

Related