ASP.NET MVC 3-ajax调用后，重定向到新页面或生成页面刷新

Question

Scenario:

I have written an MVC wizard that automatically uses ajax if javascript is enabled in the browser. Each step of the wizard is a PartialView (I'm using ASP.NET MVC 3).

All works fine.

The problem is refreshing the page if, for example, the user's status changes as a result of how she fills in the wizard. EG, if the wizard logs the user in, or registers them. As the wizard 'moves' from step to step by getting Partial Views via AJAX, the page doesn't get refreshed to reflect the change in the user's status (eg, an anonymous user is now registered).

What I want to do:

Essentially, when I need a full page refresh, I need to AUTOMATICALLY run the following on the client AFTER delivering the Partial View corresponding to the current step of the wizard via AJAX:

location.reload();

The Problem:

As the DOM has been modified via AJAX, I don't know how to make my javascript (location.reload();) run WITHOUT user intervention (eg, clicking a button).

Any suggestions? I have been off work for a while and am struggling to get back up to speed.

Answer 1

For now, I have solved my problem using the code in the following article:

Redirecting after AJAX call, when using ASP.NET MVC

I like the approach discussed in the article because it results in reusable code, in a very MVC way - I already have a base controller ( AjaxController.cs ) where I encapsulate all my AJAX aware code and this is a nice addition to it.

However, there are two issues with this approach:

1. I have to redirect away from my wizard, so it only works for the final step of the wizard. If the user's status changes half way through the wizard, I am still jiggered.

2. I would still like to know how to refresh my page after an AJAX call, rather than just redirecting like this.

So if anyone has the answer, I will gladly give them the biscuit.

Answer 2

I am not quite sure how your ajax calls are structured, but if you are using the MVC Ajax helper you can just call location.reload(); in the OnComplete method, like so:

@using (Ajax.BeginForm(new AjaxOptions{OnComplete = "javascriptfunction"}))
{
    //Data and submit button
}
<script>
    function javascriptfunction(){
        location.reload();
    }
</script>

Answer 3

// C# code
public ActionResult Foo(Bar bar)
{
    // code here
    return Json(new
    {
        Success = true,
        Value = this.RenderPartialViewToString("PartialViewName", bar),
        Callback = "window.location.href = 'http://yourdomainurl.com/';"
    });
}


// jQuery Ajax
$.ajax({
    type: "POST",
    url:  "/urlWhereToPost",
    data: ("form#id").serialize(), 
    dataType: 'json',
    async: false,
    beforeSend:  function() {
        // some instruction
    },
    error: function(e) {
        alert(e.responseText);
    },      
    success: function(data) {
        if (data.Success) {
            if (data.Callback != null) {
                if (data.Callback.length > 0) {
                    jQuery.globalEval(data.Callback);
                }
            }
        }
        else {
            // do something
        }
    }
 });