Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET

Partial View Auto Refresh in ASP.NET MVC3

Rate me:
Please Sign up or sign in to vote.
3.00/5 (3 votes)
11 Jan 2012Apache 45.7K   5   2
Partial View Auto Refresh in ASP.NET MVC3

Problem

A partial view in ASP.NET MVC3 needs to be refreshed on every particular interval.

Let us take a typical ASP.NET MVC3 application. In the HomeController, there is an action called “Quote” which displays funny software quote for every new request like below:

C++
public class HomeController : Controller
{
    public static string[] quotes = {
        "The first 90% of the code accounts for the first 90% of the development time. 
        "The remaining 10% of the code accounts for the other 90% of the development time",
        "In order to understand recursion, one must first understand recursion",
        "I have always wished for my computer to be as easy to use as my telephone; 
        "my wish has come true because I can no longer figure out how to use my telephone.",
        "The gap between theory and practice is not as wide in theory as it is in practice.",
        "Nine people can’t make a baby in a month"
    };

    // other actions

    public ActionResult Quote()
    {
        var r = new Random();
        var rv = r.Next(0, 4);
        ViewBag.Quote = quotes[rv];
        return PartialView("_Quote");
    }
}

The partial view “_Quote.cshtml” has nothing other than the code below:

HTML
<h3>@ViewBag.Quote</h3>

This whole thing needs to be refreshed without any user interaction on every 10 seconds.

Solution

Use setInterval() at the client side and set up OutputCacheAttribute on the respective action. The duration should be the same on both sides.

In the corresponding script of this view, place the below JavaScript:

JavaScript
// jQuery used

setInterval("$('#quote').load('/home/quote')", 10000); // every 10 sec

In the main view, create a div with id “quote” like:

In the action method, set the OutputCacheAttribute like:

C++
[OutputCache(NoStore=true, Location = 
    OutputCacheLocation.Client, Duration = 10)] // every 10 sec
public ActionResult Quote()
{
...
}

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


Written By
Architect Aditi
India India
Working as Architect for Aditi, Chennai, India.

My Website: www.udooz.net

My Blog: www.udooz.net/blog

Comments and Discussions

 
GeneralMy vote of 1 Pin
Member 267485022-May-12 23:32
Member 267485022-May-12 23:32 
Questionvarious Pin
thewazz2-Feb-12 7:13
professionalthewazz2-Feb-12 7:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.