CODEWITHSUNDEEP
asp.net-mvcajaxjquery
David Fox
David Fox

Reputation: 10753

How can I RedirectToAction within $.ajax callback?

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.

Upvotes: 17

Views: 22838

Answers (4)

Colin
Colin

Reputation: 22595

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

Upvotes: 0

Aziel Arcila
Aziel Arcila

Reputation: 23

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);
        }
    });

Upvotes: 2

See Sharper
See Sharper

Reputation: 51

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);
        }
    }
});

Upvotes: 4

Kirk Woll
Kirk Woll

Reputation: 77546

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.)

Upvotes: 20

Related Questions