Auto Refresh a Partial View of a Page in MVC

In this blog, I will explain how a section of a page can be updated without loading entire page.

I have a partial view in my application home page which displays list of rows from the database table, the data in the table gets updated every two minutes and my requirement is to display the up to date table data. I am going to achieve this with the help of jQuery SetInterval function.

The following image represents partial view which displays list of rows.



Step 1: Place partial view in a DIV.

<Div id=”_recentfive”>
   @HTML.Partial(“_recent” , ModelObject)
</Div>

Step 2: Add jQuery references.

Add the script references in the Header section of _Layout.cshtml.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

Step 3: Add script coding to implement setInterval() function.

<script type=”text/javascript”>
   setInterval(“$(‘#_recentfive’).load(‘controllername/actionmethod’)”,2000);
</script>

In the above setInterval Function:

• recentfive: It is the id of DIV element where partial view is placed.
  
  
• And in the load method, mention controller name and action method which returns the model object to render in the partial view.
  
  
• 2000: It is the duration in millisecons.

Step 4: Modify the action method in your Controller like the following:

[OutputCache(NoStore=true,Location=System.Web.UI.OutputCacheLocation.Client,Duration=2)]
Public ActionResult Youractionmethod()
{
   . . .
   Return PartialView(“__recent”, ModelObject)
}

Note: Make sure the duration property in the attribute above the action method is same as mentioned in the setInterval function.