Home > DeveloperSection > Blogs > Paging in ASP.NET MVC

Paging in ASP.NET MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 6212  View(s)
Rate this:

Paging in ASP.NET MVC

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 in web grid control you have to pass the page no in the controller to view the page data.

Now I am going to give a simple demo how to do it. I am using razor view in asp.net 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<PageModel> _idsContain;

        public HomeController()

        {

            _idsContain = new List<PageModel>();

            _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 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:

@model  List<PagingMVC.Models.PageModel>

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>Index</title>

</head>

<body>

    <div>

        @{

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

        ));      

        }

    </div>

</body>

</html>

After doing the above process you can easily know how to add data and paging in web grid control in asp.net MVC using razor view.


Don't want to miss updates? Please click the below button!

Follow MindStick