Paging in webgrid without page reload in MVC

Kailash Chandra Behera | Saturday, October 17, 2020

Introduction

This blog provides code examples to load page data of webgrid in MVC without reloading the page.

Getting Started

Let’s say you have a list of student details and you want to display within webgird in the MVC application. Additionally, you want to provide the pagination feature of webgrid and you want to refresh grid data based on the page click without reloading the whole web page.

View page code for webgrid

The blow code contains both HTML and javascript code to support webgird. This webgrid will contain 10 rows on each page. The javascript method GetStudents is used to fetch the list of students from the server and renders the list in webgrid.

 @model IEnumerable<StudentModel>  
 @{  
   Layout = null;  
   WebGrid webGrid = new WebGrid(source: Model.Students, canSort: false, canPage: false);  
 }  
 <html>  
 <head>  
   <meta name="viewport" content="width=device-width"/>  
      <title>Index</title>  
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
   <script src="~/Scripts/ASPSnippets_Pager.min.js"></script>  
   <script type="text/javascript">  
   $(function () {<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
   <script src="~/Scripts/ASPSnippets_Pager.min.js"></script>  
      <script type="text/javascript">  
   $(function () {  
     $(".Pager").ASPSnippets_Pager({  
       ActiveCssClass: "current",  
       PagerCssClass: "pager",  
       PageIndex: "@Model.PageIndex",  
       PageSize: "@Model.PageSize",  
       RecordCount: "@Model.RecordCount"  
     });  
   });  
   $("body").on("click", ".Pager .page", function () {  
     GetStudents(parseInt($(this).attr('page')));  
   });  
   function GetStudents(pageIndex) {  
     $.ajax({  
       type: "POST",  
       url: "/Home/Index",  
       data: '{pageIndex: ' + pageIndex + '}',  
       contentType: "application/json; charset=utf-8",  
       dataType: "json",  
       success: OnSuccess,  
       failure: function (response) {  
         alert(response.d);  
       },  
       error: function (response) {  
         alert(response.d);  
       }  
     });  
   };  
   function OnSuccess(response) {  
     var model = response;  
     var row = $("#WebGrid tbody tr:last-child").clone(true);  
     $("#WebGrid tbody tr").remove();  
     $.each(model.Studentss, function () {  
       var student = this;  
       $("td", row).eq(0).html(student.ID);  
       $("td", row).eq(1).html(student.Name);  
       $("td", row).eq(2).html(student.Class);  
                $("td", row).eq(3).html(student.Phone);  
       $("td", row).eq(3).html(student.Address);  
       $("#WebGrid").append(row);  
       row = $("#WebGrid tbody tr:last-child").clone(true);  
     });  
     $(".Pager").ASPSnippets_Pager({  
       ActiveCssClass: "current",  
       PagerCssClass: "pager",  
       PageIndex: model.PageIndex,  
       PageSize: model.PageSize,  
       RecordCount: model.RecordCount  
     });  
   };  
   </script>  
      </head>  
      <body>  
      @webGrid.GetHtml(  
     htmlAttributes: new { @id = "WebGrid", @class = "Grid" },  
     columns: webGrid.Columns(  
          webGrid.Column("ID", "ID"),  
          webGrid.Column("Name", "Name"),  
          webGrid.Column("Class", "Class"),  
                      webGrid.Column("Phone", "Phone"),  
          webGrid.Column("Address", "Address")))  
   <br/>  
   <div class="Pager"></div>  
      </body>  
 </html>  
Controller code for webgrid data
 public class HomeController : Controller  
 {  
   // GET: Home  
   public ActionResult Index()  
   {  
     return View(this.GetStdenuts(1));  
   }  
   [HttpPost]  
   public JsonResult Index(int pageIndex)  
   {  
           return View(this.GetStdenuts(pageIndex));  
      }                  
      private void GetStdenuts(int pageIndex)  
      {  
           DBContext datasource = new DBContext();  
                StudentModel model = new StudentModel();  
                model.PageIndex = pageIndex;  
                model.PageSize = 10;  
                model.RecordCount = datasource.Students.Count();  
                int startIndex = (pageIndex - 1) * model.PageSize;  
                model.Stdenuts = (from student in datasource.Students  
                                         select student)  
                                    .OrderBy(student => student.ID)  
                                    .Skip(startIndex)  
                                    .Take(model.PageSize).ToList();  
           return model;  
      }  
 }  
Model class
 public class StudentModel  
 {  
   public List<Stdenut> Stdenuts { get; set; }  
   public int PageIndex { get; set; }  
   public int PageSize { get; set; }  
   public int RecordCount { get; set; }  
 }  

Summary

I hope this blog helps to work with webgrid in MVC with pagination and you have enjoyed it a lot.

Thanks