MVC2 One Async Call, Multiple Async Updates

Question

I have an operation on my Page that then requires 3 long (few seconds each) operations to be performed in series. After each operation is performed though, I would like the controller to return a partial view and have the page update with a status (keeps the user informed, I find that if people know that stuff is happening they worry less). Is there a MVC 'way' of doing this, or should I just use jQuery to do it?

Thanks.

Answer 1

For our site we have a big action that requires some time. That action is composed by subactions, we aggregate the results and we build a nice view.

One year ago:

• We were doing that in a sequence: action1, then action2, etc.
• We had that typical page of: please wait.

Tricks that can help you:

• We do parallel requests on the server side.
• We wait for results in a results page. The javascript there needs some time to load, so while the server searches, we load the page.
• We ask the server every second: have you finished? And we get partial results as the different actions complete.

I don't know if you can apply all of these things to your problem but some of then can be really nice.

We don't use MVC, we use some asmx services with jQuery and ajax.

Answer 2

The reason your "kludgy" solution works is because the setTimeout() method creates an event. Thus your logic is:

1. Update UI
2. Setup event for step 1:
   1. Start "ajax" call
   2. Wait for "ajax" to finish
   3. Setup event for step 2
      1. Start "ajax" call
      2. Wait for "ajax" to finish
      3. Setup event for step 3
         1. Start "ajax" call

This is precisely what the callback feature of ajax() is for.

function Step1() {
    $.ajax({ 
        type: "GET", 
        dataType: "json", 
        url: "/ControllerName/Action1", 
        success: function(msg) { 
            updateUI(msg);
            Step2(); // call step 2 here!
        }, 
        async: true, // don't block the UI
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            updateUI("Action1 Error: " + XMLHttpRequest + " -- " + textStatus + " ---- " + errorThrown); 
        } 
    });
}
function Step2() {
    // similar to step one
}

Answer 3

You will want to use jQuery to issue three separate calls to three separate control methods and update the three areas of the page upon return separately.

The only way to "bunch" up calls would be to combine it all into one, but you can't get return values fired back to the client upon return of more than one call (almost like streaming, there's nothing listening on the client end after you return your first result set, that connection is closed).

Answer 4

So as far as I can tell, the only way to get a Follow up message to appear the way I want it do (i.e. a few seconds after my last operation) is to have a dummy webservice method that I call that returns the last message after a delay... crumby.

Now my last problem is that all of my calls to my jsonResult actions come back with a textStatus of 'error' to the client. Now according to the docs this means an http error, but how could there be an http error if the method was called on the server side correctly and a Json result was produced (verified by setting a breakpoint on the server)?

Answer 5

So I have created a slight hack, that seems to work:

On the client side I have:

function onClickHandler() {
    updateUI("Beginning Batch...");
    setTimeout(klugeyClick, 0);
}

function klugeyClick() {
    $.ajax({ type: "GET", dataType: "json", url: "/ControllerName/Action1", success: function(msg) { updateUI(msg) }, async: false, error: function(XMLHttpRequest, textStatus, errorThrown) { updateUI("Action1 Error: " + XMLHttpRequest + " -- " + textStatus + " ---- " + errorThrown); } });
    setTimeout(klugeyClick2, 0);
}

function klugeyClick2() {
    $.ajax({ type: "GET", dataType: "json", url: "/ControllerName/Action2", success: function(msg) { updateUI(msg) }, async: false, error: function(XMLHttpRequest, textStatus, errorThrown) { updateUI("Action2 Error: " + XMLHttpRequest + " -- " + textStatus + " ---- " + errorThrown); } });
    setTimeout(klugeyClick3, 0);
}

function klugeyClick3() {
    $.ajax({ type: "GET", dataType: "json", url: "/ControllerName/Action3", success: function(msg) { updateUI(msg) }, async: false, error: function(XMLHttpRequest, textStatus, errorThrown) { updateUI("Action3 Error: " + XMLHttpRequest + " -- " + textStatus + " ---- " + errorThrown); } });
}

function updateUI(result) {
    $("#UIelement").text(result);
}

On the server side I have:

Function Action1() As JsonResult
    System.Threading.Thread.Sleep(3000)
    Return Json("Operation One Complete...")
End Function

Function Action2() As JsonResult
    System.Threading.Thread.Sleep(3000)
    Return Json("Operation Two Complete...")
End Function

Function Action3() As JsonResult
    System.Threading.Thread.Sleep(3000)
    Return Json("Operation Three Complete...")
End Function

Now I have two problems. First, I would like to have a follow up message that displays "Batch Complete" but following the same pattern and just adding another 'klugeyClick' with a call to UpdateUI (with or without a seTimeout) causes the last operation message not to be displayed. I think the callback within the jQuery.ajax method makes this kluge work somehow but without an ajax call, I can't put any follow-up messages.

The next problem is that although all my calls are getting to my webservice and are returning json results just fine, I always get an error coming back from the jQuery callback. Any ideas why this might be?

Thanks.