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".
![add3.jpg]()
![add4.jpg]()
Step 2
Create a Model Class "Show.cs".
![add2.jpg]()
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".
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.
![add.jpg]()
![add9.jpg]()
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.
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".
![add7.jpg]()
After 2 seconds a second image will display.
![add6.jpg]()
After 2 seconds:
![add5.jpg]()