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

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>