Post
Ask Question

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".

    add3.jpg

  • From the "MVC4 Project" window select "Web API".

    add4.jpg

Step 2

Create a Model Class "Show.cs".

  • In the "Solution Explorer".

  • Right-click on the "Modelfolder" -> "Add" -> "Class".

    add2.jpg

  • Select the class and click on the "OK" button.

Add this code to this class.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace PageRefresh.Models  
  6. {  
  7.     public class Show  
  8.     {  
  9.         public int id { get; set; }  
  10.         public string Name_alter { get; set; }  
  11.         public string Image_src { get; set; }  
  12.     }  
  13.     public class IRepository  
  14.     {  
  15.         public static List<Show> GetData()  
  16.         {  
  17.             List<Show> detail = new List<Show>  
  18.             {  
  19.                 new Show  
  20.                 {  
  21.                     id = 1,  
  22.                     Name_alter = "Mudita",  
  23.                     Image_src = "Images/Jellyfish.jpg"  
  24.                 },  
  25.                 new Show  
  26.                 {  
  27.                     id = 2,  
  28.                     Name_alter = "Tayna",  
  29.                     Image_src ="Images/Tulips.jpg"  
  30.                 },  
  31.                 new Show  
  32.                 {  
  33.                     id = 3,  
  34.                     Name_alter = "Neeju",  
  35.                     Image_src = "Images/Lighthouse.jpg"  
  36.                 }  
  37.             };  
  38.             return detail;  
  39.         }  
  40.     }  
  41. } 

Step 3

 Open "HomeController".

  • In the "Solution Explorer".

  • Select "Controller folder" -> "Home Controller".

Add this code.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.UI;  
  7. using PageRefresh.Models;  
  8. namespace PageRefresh.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.        public ActionResult Index()  
  13.         {  
  14.             IEnumerable<Show> detail = IRepository.GetData();  
  15.                return View(detail);  
  16.         }  
  17.          [OutputCache(NoStore = true, Location = OutputCacheLocation.Client, Duration = 2)]  
  18.         public ActionResult GetPicture()  
  19.         {  
  20.             IEnumerable<Show> detail = IRepository.GetData();  
  21.              int min = detail.Min(n => n.id);  
  22.              int max = detail.Max(n => n.id);  
  23.              int randomid = new Random().Next(min, (max + 1));  
  24.              Show model = detail.FirstOrDefault(n => n.id == randomid);  
  25.             return PartialView("Picture", model);  
  26.         }  
  27.     }  
  28. } 

Step 4

Create a view.

  • In the "HomeController".

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

add.jpg

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

    add9.jpg

Add this line of code:

  1. @model PageRefresh.Models.Show  
  2. <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:

  1. @model IEnumerable<PageRefresh.Models.Show>  
  2. @{  
  3.     Layout = null;   
  4. }  
  5.  <!DOCTYPE html>  
  6.  <html>  
  7.  <head>  
  8.     <meta name="viewport" content="width=device-width" />  
  9.     <title>Index</title>  
  10.     <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js" )" type="text/javascript"></script>  
  11. </head>  
  12. <body>  
  13.     <div id="pictures">  
  14.         @Html.Partial("Picture", Model.FirstOrDefault())  
  15.     </div>  
  16. </body>  
  17. </html>  
  18. <script type="text/javascript">  
  19.     $(function () {  
  20.         setInterval(function () { $('#pictures').load('/Home/GetPicture'); }, 2000;  
  21.     });  
  22. </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


Similar Articles