Gradually posting data to view asp.net mvc

Question

Hi, I am generating lets say a 1000 of records to a database. That means it takes some time. Now, a user can become impatient. So I want to show him a progress bar during the generation process, which happens in Controller. I have found pretty cool progress bars in jquery or flash, but I have no idea, how to use them, since after sending a request to an action, the first data I get to create a new view page (I know of) are after the Controller action finishes.

Any ideas when to show the progress bar and how to send some data to it so it "loads"?

Thanks in advance.

Answer 1

Maybe you should make server call as ajax request

Answer 2

I'm new to asp mvc (and to stck overflow). But my approach would be to start the record generating process in a new thread. Redirect to a view that loads a partial view with the progressbar. then update the partial with a script on that view. smthing like:

<div id="documents-partial">
  <% if (ViewData["IsDone"] == false) { %>
    <% Html.RenderPartial("ProgressBar", ViewData["Progress"]); %>
  <% }else{ %>
    <% Html.RenderPartial("Records", ViewData["Records"]); %>
  <% }
</div>

<script type="text/javascript">
  $(document).ready(function() {
    update();
  }
  function update(){
    $('div#id-of-where-you-want-to-load-partial-view').load('/Records/CheckForUpdate', {param1: <%= ViewData["Progress"].Id %>}, update /*on callback calls the update method again*/ );
</script>

Answer 3

One way I saw was on the webinterface for the buildserver teamcity.

It shows the progress for your build. The progressbar is set to the duration of the last build.

It does not work perfect but well enough to be usefull. If the work done is always comparable (like the duration of a build) you could try it this way.

Answer 4

if you are using ajax to fetch the records then you can use this,

// Progress Bar -----------------------------
$().ajaxSend(function(r, s) {
    $("#contentLoading").show();
});

$().ajaxStop(function(r, s) {
    $("#contentLoading").fadeOut("fast");
});
//-------------------------------------------


<img id="contentLoading" src="../../Content/images/ajax-loader.gif" style="display:none"  alt="Updating ..." />

This code will show and hide an animated gif progress bar while an ajax request is running.