Index

--- title: "Auto Refresh Partial View in ASP.NET MVC" description: "Sometimes a partial view in ASP.Net MVC needs to refresh on every particular interval or specified period of time." author: "Chris Anderson" published: 2013-01-29 updated: 2020-08-28 canonical: https://www.mindstick.com/articles/1132/auto-refresh-partial-view-in-asp-dot-net-mvc category: "asp.net mvc" tags: ["asp.net mvc"] reading_time: 4 minutes --- # Auto Refresh Partial View in ASP.NET MVC ## Auto Refresh Partial View in ASP.NET MVC Into the Sometimes, a PartialView in ASP.Net MVC needs to refresh on every particular interval or specified period of time. This article demonstrates how to auto-refresh the partial view in asp.net MVC by using a 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 GetData() { List list = new List { 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](https://www.mindstick.com/articles/527/grid-control-in-wpf) 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](https://www.mindstick.com/mindstickarticle/74634c5e-1c0b-4cba-b7a9-198a99551fac/images/720f1aa4-e463-4ba7-a0c5-f7527c010a42.png) Create a controller named HomeController and code it as given below: ``` public class HomeController : Controller { public ActionResult Index() { IEnumerable list = Repository.GetData(); return View(list); } [OutputCache(NoStore = true, Location = OutputCacheLocation.Client, Duration = 3)] // every 3 sec public ActionResult GetContributor() { IEnumerable 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 @Model.Name

``` Add an Index View and modify this view as given below: ``` @model IEnumerable @{ Layout = null; } Index

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

``` The output will something look like below. ![Auto Refresh Partial View in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/74634c5e-1c0b-4cba-b7a9-198a99551fac/images/7ee14038-c4ea-4133-bc06-85c50a2a9608.png) The images will automatically update every three seconds. ![Auto Refresh Partial View in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/74634c5e-1c0b-4cba-b7a9-198a99551fac/images/ed7db1d8-e643-43af-b6e7-eb2073d3482c.png) Thanks for reading this article. You can enter your [valuable comments](https://www.mindstick.com/Articles/412/webbrowser-control-in-c-sharp-dot-net) and suggestion to improve this article in the comment box. --- Original Source: https://www.mindstick.com/articles/1132/auto-refresh-partial-view-in-asp-dot-net-mvc Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.