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:

Step 2

Create a Model Class as in the following:

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:

Step 4

Now add the Scaffolding Data Controller as in the following:

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

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:

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.