How do I refresh a partial view every 3 seconds in MVC 4?

asp.net-mvc-4 asp.net-mvc-partialview entity-framework-6 progress-bar timer

Question

I want a progress bar to change based on how many tasks are finished. The jobs table in a SQL Server database houses the number of completed jobs. In order to update the progress bar, which is stored in a partial view, I need my ASP.NET MVC 4 application to query the database every three seconds to determine how many jobs are currently active. The timer is functional and calls the _getforStatus action in the StatusController. It also appears to call the EntityDB, but the view never appears to be called unless the timer specifically instructs it to. How can I make the progress bar update every three seconds?

The timer's start is referred to as such in the StatusController's header of my _Layout.cshtml view:

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

Additionally, I refer to the partial view as a Jumbotron in the _Layout view as follows:

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

The Status controller has the following coding:

 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 Ajax code below. Although I received no errors, 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 because "Html.RenderAction" hasn't been represented appropriately in JS or what.

1
3
2/19/2015 7:55:08 PM

Accepted Answer

Your ajax call needs some adjustments, in my opinion. Here is an illustration of how I make a call.

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

on your game console You don't, in my opinion, need just the child action. Additionally, you are supplying a barren partial view object. It ought to be

return partialView('_partialName', Model);

Finally, you must retrigger the call in your jQuery code in order to keep the call active. Consider attempting 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();
}); 
4
2/19/2015 8:06:21 PM


Related Questions





Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow