3

I need to get a progress bar to update based on the number of jobs completed. The number of jobs completed is stored on a jobs table of a SQL Server DB. I need my ASP.NET MVC 4 application to query the DB every 3 seconds for the number of jobs compete and use this data to update the progress bar which is held in a partial view. The timer works and it calls my the _getforStatus action in the StatusController, and it seems to call the EntityDB, but is never seems to call the view other than before the timer tells it to. How do I get the progress bar to refresh every 3 seconds?

The header of my _Layout.cshtml view calls the initiation of the timer which is in the StatusController like so:

 <head>
      ...
       @Html.Action("InitTimer", 'Status")
      ...
 </head>

Also, in the _Layout view I call the partial view into a Jumbotron like so:

 <div class="jumbotron" id=progress">
      @{Html.RenderAction("_GetforStatus", "Status");}
 </div>

The Status controller is coded like so:

 public class StatusController : Controller
 {
      IntegrationDBEntities _db;

      Private Timer timer1;

      Public void initTimer()
      {
           timer1 = new Timer();
           timer1.elapsed += new ElapsedEventhandler(timer_Elapsed(;
           timer1.interval = 3000;
           timer1.Start();
       }

      Private void timer_Elapsed(Object sender, EventArgs e)
      {
           _GetforStatus();
      }

      [ChildActiononly]
      public PartialViewResult _GetforStatus(0
      {
           _db = new IntegrationDBEntities();
           ViewDataModel - _db.Jobs.ToList();
           return partialView();
      }

EDIT: I also tried the following Ajax code. I got no error, but my progress bar never updated:

 <script>
       function loadPartialView()  {
            $.ajax({
                 url:  '@url.Action("_GetforStatus', "Status")",
                 type:  'GET',
                 dataType:  'html',
                 success: function(result)  {
                      $('progress').html(result);
                 }
            });
        }

  $function () {  
       loadPartialView();
       window.setInterval("loadPartialView()", 3000);
  });
 </script>

I'm not sure if it isn't working bc i haven't represented "Html.RenderAction" in JS correctly or what.

antman1p
  • 514
  • 2
  • 11
  • 25
  • 2
    for stuff like this I prefer to use a jquery timer on the view http://www.sitepoint.com/settimeout-example/. in the timer do an ajax call to return the partial or just the data you need to update the progress bar – Matt Bodily Feb 19 '15 at 18:16
  • I tried following another questiion that gave an Ajax solution to a similar question, but I could not get it to work. Could you show me an example using my code above as to how exactly I'd implement this using razor syntax? – antman1p Feb 19 '15 at 19:24
  • can you post what you attempted with your ajax call and let me know what error you were getting? – Matt Bodily Feb 19 '15 at 19:30
  • It looks as though it isn't calling the script. Do I have to code anything into the head to get it to read it? – antman1p Feb 19 '15 at 19:50

1 Answers1

4

I think you need to make some changes to your ajax call. Here is an example of how I do the call

$.ajax({
    url: '@Url.Action("Action", "Controller")',
    type: 'post',
    cache: false,
    async: true,
    data: { id: "frmUser" },
    success: function(result){
        $('.divPartial').html(result);
    } 
});

on your controller I don't think you need the child action only. Also you are returning an empty partial view object. It should be 

return partialView('_partialName', Model);

finally in your jquery to keep the call happening you need to retrigger the call. Try something like this

$(document).ready(function(){
    function RefreshPartial(){
        //this will wait 3 seconds and then fire the load partial function
        setTimeout(function(){
            loadPartialView();
            //recall this function so that it will continue to loop
            RefreshPartial();
        }, 3000);
    }
    //initialize the loop
    RefreshPartial();
});
Matt Bodily
  • 6,403
  • 4
  • 29
  • 48
  • Do I put the script tags around it, or is there a way to write it in Razor? – antman1p Feb 19 '15 at 20:09
  • Also, what is '.divpartial' and "frmUser"? – antman1p Feb 19 '15 at 20:14
  • 1
    yes, this will go in your script tags. It is just an example. If you want to pass something back to the controller you can do it through the data attribute. If you don't want to you can remove that attribute. div partial is a selector for an element on the form (like a div) where the returned partial view will be put. – Matt Bodily Feb 19 '15 at 20:37
  • OK, it still isn't working. I don't know why, but it doesn't seem as though the script is being called. Also, "return partialView('_GetforStatus', Model);" I'm not sure what you mean here. "Model" is underlined in squigly red. I didn't have to put that in before to return the partial view. – antman1p Feb 19 '15 at 20:48
  • 1
    if you look at your console on the browser are you getting errors? can you put a break point in the code and make sure it is getting hit? To pass a model to the partial you would pass it there. If you don't have a model, leave that off – Matt Bodily Feb 19 '15 at 21:07
  • I set a break code in the script and it is not stopping. I get an error in the web console "$ is not defined" at $(Document).ready' but no errors in VS Console. – antman1p Feb 19 '15 at 21:18
  • that means you don't have jquery referenced on your page. If memory serves you will also need to reference unobtrusive ajax for the ajax call to work – Matt Bodily Feb 19 '15 at 21:21
  • It is references in the _Layout through bundles. When i look at the html in the web console I see it at the bottom of the body. The script I wrote is above that. If I move it below that the '$" error is gone, but then i get Net Post errors. – antman1p Feb 19 '15 at 21:31
  • 1
    your view isn't seeing it. Look at the source on your view and make sure the reference is there and make sure the url in the link is valid – Matt Bodily Feb 19 '15 at 21:33
  • I forgot to get rid of [ChildActionOnly] It works now!!! Thank you so much for your patience. Can you please up vote my question? Thanks again! – antman1p Feb 19 '15 at 21:45
  • **Simple** Jquery `load` method may also come handy , check [this](http://stackoverflow.com/questions/11122268/updating-partial-view-with-jquery-in-asp-net-mvc-c-sharp) post hope helps someone. – Shaiju T Jul 25 '16 at 18:28