Index

--- title: "Paging in ASP.NET MVC" description: "In this blog I am going to explain how to add data in web grid control in asp.net MVC and how to do paging in web grid control. In order to do paging" author: "Chris Anderson" published: 2012-01-27 updated: 2014-09-18 canonical: https://www.mindstick.com/blog/279/paging-in-asp-dot-net-mvc category: "asp.net mvc" tags: ["asp.net mvc"] reading_time: 4 minutes --- # Paging in ASP.NET MVC In this blog I am going to explain how to [add data](https://www.mindstick.com/forum/287/how-to-add-data-in-drop-down-list) in web grid control in [asp.net MVC](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) and how to do paging in web grid control. In order to do paging in web grid control you have to pass the page no in the [controller to view](https://www.mindstick.com/forum/12918/pass-an-object-from-controller-to-view-with-asp-dot-net) the page data.\ Now I am going to give a simple demo how to do it. I am using razor [view in asp.net](https://www.mindstick.com/forum/33955/how-to-create-a-partial-view-in-asp-dot-net-mvc-4) MVC 3 for creating demo. · Create a Model to store the data as I create below named (PageModel): ``` public class PageModel { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } } ``` \ · After creating the model, add data in the model (PageModel). I have \ added data in the model in the constructor of controller. \ ``` List _idsContain; public HomeController() { _idsContain = new List(); _idsContain.Add(new PageModel() { Id = 1, Name = "Rohit", Age = 20 }); _idsContain.Add(new PageModel() { Id = 2, Name = "Rahul", Age = 21 }); _idsContain.Add(new PageModel() { Id = 3, Name = "Arun", Age = 22 }); _idsContain.Add(new PageModel() { Id = 4, Name = "Amit", Age = 23 }); _idsContain.Add(new PageModel() { Id = 5, Name = "Rati", Age = 19 }); _idsContain.Add(new PageModel() { Id = 6, Name = "Hemant", Age = 24 }); _idsContain.Add(new PageModel() { Id = 7, Name = "Harshit", Age = 25 }); _idsContain.Add(new PageModel() { Id = 8, Name = "Anil", Age = 22 }); _idsContain.Add(new PageModel() { Id = 9, Name = "Kashif", Age = 21 }); _idsContain.Add(new PageModel() { Id = 10, Name = "Mahfooz", Age = 21 }); } ``` \ · You also have to add the following [namespace](https://www.mindstick.com/articles/12552/namespace) in your controller: \ ``` using System.Linq;using System.Web.Helpers; ``` · Create Index action as parameterized that takes a page no and return the list of data to the Index View: ``` public ActionResult Index(int? page) { return View(_idsContain); } ``` · Now create a method to do paging and add data in web grid on the basis \ of page no: \ \ ``` [HttpGet] public JsonResult EfficientPaging(int? page) { int skip = page.HasValue ? page.Value - 1 : 0; var data = _idsContain.OrderBy(o => o.Id).Skip(skip * 5).Take(5).ToList(); var grid = new WebGrid(data); var htmlString = grid.GetHtml(tableStyle: "webGrid", headerStyle: "header", alternatingRowStyle: "alt", htmlAttributes: new { id = "DataTable" }); return Json(new { Data = htmlString.ToHtmlString(), Count = _idsContain.Count() / 5 }, JsonRequestBehavior.AllowGet); } ``` · Now add an Index view (Index.cshtml) and create a web grid in that View \ to [display data](https://www.mindstick.com/forum/160249/what-is-the-role-of-the-display-data-annotation-to-display-name-for-a-model-property-in-dot-net-core): \ \ ``` @model List @{ Layout = null; } Index

@{ var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5); grid.Pager(WebGridPagerModes.NextPrevious); @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "DataTable" }, headerStyle: "header", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Age"), grid.Column("Id"), grid.Column("Name") )); }

``` \ \ After doing the above [process](https://yourviews.mindstick.com/story/1525/7-important-factors-that-may-affect-the-learning-process) you can easily know how to add data and \ paging in web grid control in asp.net MVC using [razor view](https://www.mindstick.com/forum/155820/how-to-generate-textbox-control-using-htmlhelper-in-razor-view). --- Original Source: https://www.mindstick.com/blog/279/paging-in-asp-dot-net-mvc Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.