Auto Refresh Partial View in ASP.Net Web API

Introduction

This article explains the Auto Refresh Partial View in the ASP .NET Web API. It is something that, used together, gives a way to refresh a partial view in a specified time period. Here we use three images that will change on refreshing the partial view in 2 seconds.

Follow these procedures for using Auto refresh Partial View in Web API.

Step 1

Create a web API Application.

Start Visual Studio 2012.
From the start window select "New Project".
In the Template Window select "Installed" -> "Visual C#" -> "Web".
Select "ASP.NET MVC 4 Web Application" and click on "OK".
From the "MVC4 Project" window select "Web API".

Step 2

Create a Model Class "Show.cs".

In the "Solution Explorer".
Right-click on the "Modelfolder" -> "Add" -> "Class".
Select the class and click on the "OK" button.

Add this code to this class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace PageRefresh.Models
{
public class Show
{
public int id { get; set; }
public string Name_alter { get; set; }
public string Image_src { get; set; }
}
public class IRepository
{
public static List<Show> GetData()
{
List<Show> detail = new List<Show>
{
new Show
{
id = 1,
Name_alter = "Mudita",
Image_src = "Images/Jellyfish.jpg"
},
new Show
{
id = 2,
Name_alter = "Tayna",
Image_src ="Images/Tulips.jpg"
},
new Show
{
id = 3,
Name_alter = "Neeju",
Image_src = "Images/Lighthouse.jpg"
}
};
return detail;
}
}
}

Step 3

Open "HomeController".

In the "Solution Explorer".
Select "Controller folder" -> "Home Controller".

Add this code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI;
using PageRefresh.Models;
namespace PageRefresh.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
IEnumerable<Show> detail = IRepository.GetData();
return View(detail);
}
[OutputCache(NoStore = true, Location = OutputCacheLocation.Client, Duration = 2)]
public ActionResult GetPicture()
{
IEnumerable<Show> detail = IRepository.GetData();
int min = detail.Min(n => n.id);
int max = detail.Max(n => n.id);
int randomid = new Random().Next(min, (max + 1));
Show model = detail.FirstOrDefault(n => n.id == randomid);
return PartialView("Picture", model);
}
}
}

Step 4

Create a view.

In the "HomeController".
Right-click on the "GetPicture" Action Method and then select "AddView".

Change the name of the View to "Picture" and click on the "Add" button.

Add this line of code:

@model PageRefresh.Models.Show
<img src="@Model.Image_src" alt="@Model.Name_alter" title="@Model.Name_alter" width="400px" height="400px"/>

Step 5

Open the "index.cshtml" file.

In the "Solution Explorer".
Select "View" -> "Home" -> "index.cshtml".

Add this line of code:

@model IEnumerable<PageRefresh.Models.Show>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js" )" type="text/javascript"></script>
</head>
<body>
<div id="pictures">
@Html.Partial("Picture", Model.FirstOrDefault())
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
setInterval(function () { $('#pictures').load('/Home/GetPicture'); }, 2000;
});
</script>

Step 6

Now execute the application; "Press F5".

After 2 seconds a second image will display.

After 2 seconds: