Home > DeveloperSection > Articles > Auto Refresh Partial View in ASP.NET MVC

Auto Refresh Partial View in ASP.NET MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
3 Comment(s)
 60195  View(s)
Rate this:

Auto Refresh Partial View in ASP.NET MVC

Sometimes a partial view in ASP.Net MVC needs to refreshed on every particular interval or specified period of time. This article demonstrates that how to auto refresh partial view in asp.net mvc by using razor view engine.

·         Open Visual Studio 2010

·         Create a new ASP.Net MVC 3 or 4 web application and named it as PartailViewAutoRefresh for this application.

·         Choose Razor as the View engine and click OK

·         Add a Controller in your project and give name as HomeController.

·         Create a model class in the Model folder as shown below:

    public class Model

    {

        public int ID { get; set; }

        public string Name { get; set; }

        public string ImageUrl { get; set; }

    }

 

    public class Repository

    {

        public static List<Model> GetData()

        {

            List<Model> list = new List<Model>

            {

                new Model

                {

                    ID = 1,

                    Name = "Rohit",

                    ImageUrl = "../../Images/1.jpg"

                },

                new Model

                {

                    ID = 2,

                    Name = "Arun",

                    ImageUrl = "../../Images/2.jpg"

                },

                new Model

                {

                    ID = 3,

                    Name = "Rahul",

                    ImageUrl = "../../Images/3.jpg"

                }

            };

 

            return list;

        }

    }

Create a new folder (Images) in this application and paste images in the same folder and also copy the file jquery-1.7.1.min.js in the Scripts folder. Your Solution Explorer will something looks like below figure:

Auto Refresh Partial View in ASP.NET MVC

Create a controller named HomeController and code it as given below:

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            IEnumerable<Model> list = Repository.GetData();

 

            return View(list);

        }

 

        [OutputCache(NoStore = true, Location = OutputCacheLocation.Client, Duration = 3)] // every 3 sec

        public ActionResult GetContributor()

        {

            IEnumerable<Model> list = Repository.GetData();

 

            int min = list.Min(m => m.ID);

            int max = list.Max(m => m.ID);

 

            int randomId = new Random().Next(min, (max + 1));

 

            Model model = list.FirstOrDefault(m => m.ID == randomId);

            return PartialView("Contributor", model);

 

        }

    }

 

Add a Partial View (Contributor.cshtml) and add the following code:

@model PartailViewAutoRefresh.Models.Model

<img src="@Model.ImageUrl" alt="@Model.Name" title="@Model.Name" width="150px" height="150px"/>

 

Add an Index View and modify this view as given below:

@model IEnumerable<PartailViewAutoRefresh.Models.Model>

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

</head>

<body>

    <div id="contributors">

        @Html.Partial("Contributor", Model.FirstOrDefault())

    </div>

</body>

</html>

<script type="text/javascript">

 

    $(function () {

        setInterval(function () { $('#contributors').load('/Home/GetContributor'); }, 3000); // every 3 sec

    });

 

</script>

 

The output will something look like below.

Auto Refresh Partial View in ASP.NET MVC

The images will automatically update in every three seconds.

Auto Refresh Partial View in ASP.NET MVC

Thanks for reading this article. You can enter your valuable comments and suggestion to improve this article in the comment box.


Great sample

By David Collacott on   2 years ago
Thanks for this example -- it worked for me.

help me Mr Rohit Kesharwani

By Horas Panjaitan on   2 years ago
Rohit Kesharwani Can you give an example of a simple login with asp.net mvc2 

example 

user class 

   public int UserId {get; sets; } 
   public string password {get; sets; } 
   public string status of the {get; sets; } 


This connection in Web.config 

configuration> 
<connectionStrings> 
     <add name = "cs" connectionString = "Data Source = mydatasource; Initial Catalog = Dbmywebsite; Integrated Security = SSPI; User ID = xxx \ myusername; Password = xxx;" ProviderName = "System.Data.SqlClient" /> 
     </ connectionStrings> 


please me because I am a new beginner with asp.net mvc2 #

Thanks

By ashish srivastava on   one year ago
Thanks it is useful post

Don't want to miss updates? Please click the below button!

Follow MindStick