Click here to Skip to main content
Click here to Skip to main content

Tagged as

Partial View Auto Refresh in ASP.NET MVC3

, 11 Jan 2012
Rate this:
Please Sign up or sign in to vote.
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:

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:

<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:

// 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:

[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

Share

About the Author

M Sheik Uduman Ali
Architect Aditi
India India
Working as Architect for Aditi, Chennai, India.
 
My Website: www.udooz.net
 
My Blog: www.udooz.net/blog
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 1 PinmemberMember 267485022-May-12 23:32 
Questionvarious [modified] Pinmemberthewazz2-Feb-12 7:13 
you say: "In the corresponding script of this view, place the below JavaScript:..."
-> which view are you talking about?
 
you say: "In the main view, create a div with id “quote” like:..."
-> there is no sample.
 
what's the best way to have a quote appear right away? right now there's nothing for the first 10s.

modified 2-Feb-12 14:08pm.

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 11 Jan 2012
Article Copyright 2012 by M Sheik Uduman Ali
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid