ASP.NET

Implement Infinite Scrolling in Web API

Introduction:

This article explains how to implement infinite scrolling in the ASP.NET Web API. We use the paging with the scrolling.

The following is the procedure for creating the application.

Step 1

Create a Web Application as in the following:

  • Start Visual Studio 2012.
  • From the Start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "Ok" button.

    Select MVC4 application

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

    Select Web API

  • Click on the "OK" button.

Step 2

Create a Model Class as in the following:

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Install" -> "Visual C#" and then select class.

    Add Model Class

  • Click on the "Add" button.

Add the following code:

 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace InfiniteScaffAPI.Models  
  6. {  
  7.     public class Deployee  
  8.     {  
  9.         public int Id { get; set; }  
  10.         public string Topic { get; set; }  
  11.         public string TextMetter { get; set; }  
  12.         public string Writer{ get; set; }  
  13.     }  
  14. }  

 

Step 3

Now install the MVCScaffholdingpackage as in the following:

  • Go to the Tools menu and select "Library Package Manager" -> "Package Manager Console".
  • And enter the command "install-package MvcScaffolding".

Step 4

Now add the Scaffolding Data Controller as in the following:

  • In the "Solution Explorer".
  • Right-click on the Controller.
  • Select "Add" -> "Controller".
  • Set the controller name and from the Scaffolding options select "MVC controller with read/Write actions and views, using Entity Framework".
  • And select the  model class.

    Add Controller

  • Now click on the "Data Context Class".
  • And select "New Data Context".

    Add Data Context

  • And click on the "Ok" button.

After creating this controller it adds the following two files to your project :

  • First is "InfiniteScaffAPIContext.cs" in the Model Folder.
  • The second is a "Deployees" folder in the "Views" folder in which some view files are created, such as Create, Edit, Delete and Index.

    Display Some file

Step 5

Add another Repository Class in the Model folder using the same procedure as Step 2.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.Entity;  
  5. using System.Linq;  
  6. using System.Linq.Expressions;  
  7. using System.Web;  
  8. namespace InfiniteScaffAPI.Models  
  9. {  
  10.     public class DeployeeRepository:IDeployeeRepository  
  11.     {  
  12. InfiniteScaffAPIContext scafcontext = new InfiniteScaffAPIContext();  
  13.         public IQueryable<Deployee> All  
  14.         {  
  15.             get { return scafcontext.Deployees; }  
  16.         }  
  17.         public IQueryable<Deployee> AllIncluding(params Expression<Func<Deployee, object>>[] includeProperties)  
  18.         {  
  19.             IQueryable<Deployee> query = scafcontext.Deployees;  
  20.             foreach (var includeProperty in includeProperties)  
  21.             {  
  22.                 query = query.Include(includeProperty);  
  23.             }  
  24.             return query;  
  25.         }  
  26.         public Deployee Find(int id)  
  27.         {  
  28.             return scafcontext.Deployees.Find(id);  
  29.         }  
  30.         public void InsertOrUpdate(Deployee deployee)  
  31.         {  
  32.             if (deployee.Id == default(int)) {  
  33.                 // New entity  
  34.                 scafcontext.Deployees.Add(deployee);  
  35.             } else {  
  36.                 // Existing entity  
  37.                 scafcontext.Entry(deployee).State = EntityState.Modified;  
  38.             }  
  39.         }  
  40.         public void Delete(int id)  
  41.         {  
  42.             var post = scafcontext.Deployees.Find(id);  
  43.             scafcontext.Deployees.Remove(post);  
  44.         }  
  45.         public void Save()  
  46.         {  
  47.             scafcontext.SaveChanges();  
  48.         }  
  49.         public void Dispose()  
  50.         {  
  51.             scafcontext.Dispose();  
  52.         }  
  53.         public IQueryable<Deployee> PostPage(int pageNumber, int pageSize)  
  54.         {  
  55.             return scafcontext.Deployees.OrderBy(f => f.Id).Skip(pageSize * pageNumber).Take(pageSize);  
  56.         }  
  57.     }  
  58.     public interface IDeployeeRepository : IDisposable  
  59.     {  
  60.         IQueryable<Deployee> All { get; }  
  61.         IQueryable<Deployee> AllIncluding(params Expression<Func<Deployee, object>>[] includeProperties);  
  62.         Deployee Find(int id);  
  63.         void InsertOrUpdate(Deployee deployee);  
  64.         void Delete(int id);  
  65.         void Save();  
  66.         IQueryable<Deployee> PostPage(int pageNumber, int pageSize);  
  67.     }  
  68. }   

Step 6

Now add an API controller as in the following:

  • Right-click on the Controller Folder.

  • Select "Add" -> "Controller" then select "API controller" from the  Template.

  • Click on the "Add" button.

    Add API Controller

Add the following Code:

 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using InfiniteScaffAPI.Models;  
  8. namespace InfiniteScaffAPI.Controllers  
  9. {  
  10.     public class DeployeeServiceController : ApiController  
  11.     {  
  12.         IDeployeeRepository res;  
  13.         public DeployeeServiceController(IDeployeeRepository repo)  
  14.         {  
  15.            res = repo;  
  16.         }  
  17.         public DeployeeServiceController()  
  18.         {  
  19.            DeployeeRepository res = new DeployeeRepository();  
  20.         }  
  21.         [HttpGet]  
  22.         public IEnumerable<Deployee> GetPosts(int id)  
  23.         {  
  24.             IEnumerable<Deployee> deployees = res.PostPage(id, 5);  
  25.             return deployees;  
  26.         }  
  27.     }  
  28. }  

 

Step 7

Now change the controller and action name in the Rout.config file as in the following:

  1. {  
  2.     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  3.     routes.MapRoute(  
  4.         name: "Default",  
  5.         url: "{controller}/{action}/{id}",  
  6.         defaults: new { controller = "Deployees", action = "Create", id = UrlParameter.Optional }  
  7.     );  
  8. }   

Step 8

Execute the application and some text.

Add the Detail


Display the Scroll on the Post Page

Click on edit and edit anything in the Post, click on "Save".

Edit the writer name

Click on "Delete" and click on the "Delete" button. It deletes the specific post.

Delete the Post

Now see that in the Post there is no one posting as Writer 3.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found