MVC JsonResult updating progress

Question

MVC 4 Webapp, JQuery

I want to show the progress of a lenghty procedure.

the following gets called from JSON which takes several seconds...

Basically, what I would like to do is:

[HttpPost]
public JsonResult Update(var x)
{
    return Json(new { Result = "Working", Message = "Waiting on Server" });
    var y = contactAnotherServer(x);
    return Json(new { Result = "Working", Message = "Crunching Data" });
    var finished = doSomethingWithData(y);
    return Json(new { Result = "OK", Message = "Done" });
}

Obviously this would terminate on the first return-statement.

How would this be done ?

Thank you!

I'm not quite sure if it's even possible with regular AJAX calls, for a 'real' progress I think it would be best to use [SignalR](http://signalr.net/), one of the use cases on the front page seems to converge with what you need... — Patryk Ćwiek, Apr 05 '13 at 10:12
Look at this: http://stackoverflow.com/questions/4322126/implementing-a-progress-bar-for-long-running-task-implemented-with-an-asp-net-mv and this: http://stackoverflow.com/questions/2927284/need-an-asp-net-mvc-long-running-process-with-user-feedback?rq=1 — Alex Ovechkin, Apr 05 '13 at 10:15
You could make the process execute under a worker thread, then use ajax/setTimeout to "poll" the action and check the status. It then returns "busy"/"complete" based on where the worker is in the process. — Brad Christie, Apr 05 '13 at 14:24

LiverpoolsNumber9 · Answer 1 · 2013-04-05T14:51:32.753

To "roll your own" like this, you would need three separate JsonResult methods and a fairly complex javascript function. ie:

Controller

public JsonResult Step1()
{
    return Json(new { Result = "Working", Message = "Waiting on Server" });
}
public JsonResult Step2()
{
    return Json(new { Result = "Working", Message = "Crunching data" });
}
public JsonResult Step3()
{
    return Json(new { Result = "Ok", Message = "Done" });
}

JS

// urls
var urls = ["/step1","/step2","/step3"];

// counter
var counter = 0;

// recursive method
var fetchAndUpdateRecursive(url){

   // get data
   $.ajax(url, {
        async: false,
        success: function(r){

              // use r to update something visually
              // then...

              // change the url
              counter++;
              url = urls[counter];

              // go again
              fetchAndUpdateRecursive(url);
        };
   });
};

// go
var urlToStartWith = urls[counter];
fetchAndUpdateRecursive(urlToStartWith);

MVC JsonResult updating progress

1 Answers1