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 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>
    <meta name="viewport" content="width=device-width" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <div id="contributors">
        @Html.Partial("Contributor", Model.FirstOrDefault())
<script type="text/javascript">

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



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.

  Modified On May-17-2018 09:33:13 AM
  1. Rohit Kesharwani Can you give an example of a simple login with mvc2 


    user class 

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

    This connection in Web.config 

         <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 mvc2 #

Leave Comment