Efficient Paging with WebGrid Web Helper – ASP.NET MVC

By default, the WebGrid’s paging functionality will retrieve the entire set of data for each paging request
The solution I came up with is one possible solution. I’m sure there are many others, but this works well. The issue around the WebGrid’s paging is it needs the total count of data that the grid is supposed to display. If you limit the WebGrid to only the records you want displayed, you limit the total count and the paging doesn’t work. To fix this problem you need to separate the two. One set of data for the grid and a separate piece of data that tells the WebGrid how many paging links to display. Unfortunately the paging object is locked, so I had to make my own.

To achieve efficient paging, we are showing records of current page only to achieve this we have to maintain some parameters like Total number of records, Current page and records of current page as well as we have to define manual paging, which contain First, Previous, Next, Last page link in paging.

Features of footer.
Current page link (Count) will be disabled
For the 1st page First, Previous will be disable
For the last page Last and Next links will be disabled
On page load we are calling EfficientPaging function of Efficient Controller which will return three parameter total number of pages, current page and records of current page.

To create paging at bottom of we have function createFooter which accept two parameter one is Total number of pages and current page count
Here is code

Pagging
Here is controller code

namespace Sample.Controllers
{
    public class EfficientController : Controller
    {
        //
        // GET: /Efficient/

         private readonly List<Product> _mostPopular;
         public EfficientController()
        {
            _mostPopular = new List<Product>()
            {
                new Product() {ID = 1, Name = "Jack", Price = 30},
                new Product() {ID = 2, Name = "Riley", Price = 40},
                new Product() {ID = 3, Name = "William", Price = 17},
                new Product() {ID = 4, Name = "Oliver", Price = 56},
                new Product() {ID = 5, Name = "Lachlan", Price = 25},
                new Product() {ID = 6, Name = "Thomas", Price = 75},
                new Product() {ID = 7, Name = "Joshua", Price = 93},
                new Product() {ID = 8, Name = "James", Price = 15},
                new Product() {ID = 9, Name = "Liam", Price = 73},
                new Product() {ID = 10, Name = "Max", Price = 63},
                new Product() {ID = 11, Name = "Thomas", Price = 75},
                new Product() {ID = 12, Name = "Joshua", Price = 93},
                new Product() {ID = 13, Name = "James", Price = 15},
                new Product() {ID = 14, Name = "Liam", Price = 73},
                new Product() {ID = 15, Name = "Max", Price = 63}
            };
        }
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public JsonResult EfficientPaging(int? page)
        {
            int skip = page.HasValue ? page.Value - 1 : 0;
            var data = _mostPopular.OrderBy(o => o.ID).Skip(skip * 5).Take(5).ToList();
            var grid = new WebGrid(data);
            var htmlString = grid.GetHtml(tableStyle: "webGrid",
                                          headerStyle: "header",
                                          footerStyle : "foot",
                                          alternatingRowStyle: "alt",
                                          htmlAttributes: new { id = "DataTable" });

            var tempData = htmlString.ToHtmlString();

            return Json(new
            {
                Data = htmlString.ToHtmlString(),
                Count = _mostPopular.Count() / 5,
                CurrentPage = skip
            }, JsonRequestBehavior.AllowGet);
        }
    }
}

and HTML Page is here

<h2>Product</h2>

<script type="text/javascript" >
    $(function () {
        $.getJSON("/Efficient/EfficientPaging", null, function (d) {
            // add the dynamic WebGrid to the body
            $("#divMain").html(d.Data);

            // create the footer
            var footer = createFooter(d.Count, d.CurrentPage);

            $("#divFoot a").live("click", function (e) {
                e.preventDefault();
                // Manage Pagging
                var PageCount = 1;
                if ($(this).text() == "First") {
                    PageCount = 1;
                }
                else if ($(this).text() == "Last") {
                    PageCount = d.Count;
                }
                else if ($(this).text() == "Next") {
                    if (d.Count == $("#hdnCurrentPage").val())
                        PageCount = d.Count;
                    else
                        PageCount = (parseInt($("#hdnCurrentPage").val()) + 1);
                }
                else if ($(this).text() == "Previous") {
                    if ($("#hdnCurrentPage").val() == 1)
                        PageCount = 1;
                    else
                        PageCount = (parseInt($("#hdnCurrentPage").val()) - 1);
                }
                else
                    PageCount = $(this).text();

                var data = {
                    page: PageCount
                };

                // get data of current page
                $.getJSON("/Efficient/EfficientPaging", data, function (html) {
                    // add the data to the table
                    $("#DataTable").remove();
                    $("#divMain").html(html.Data);
                    var footer = createFooter(d.Count, html.CurrentPage);

                });
            });
        });
    });

    function createFooter(totalPages, CurrentPage) {

        var rowsPerPage = 5;
        var footer = "<div>";
        if ((CurrentPage + 1) == 1) {
            footer = footer + "First &nbsp;";
            footer = footer + "Previous&nbsp;";
        }
        else {
            footer = footer + "<a href=#>First</a>&nbsp;";
            footer = footer + "<a href=#>Previous</a>&nbsp;";
        }
        for (var i = 1; i < (totalPages + 1); i++) {
            if ((CurrentPage + 1) == i) {
                footer = footer + "" + i + "&nbsp;";
                $("#hdnCurrentPage").val(i);
            }
            else
                footer = footer + "<a href=#>" + i + "</a>&nbsp;";
        }
        if ((CurrentPage + 1) == totalPages) {
            footer = footer + "Next &nbsp;";
            footer = footer + "Last &nbsp;";
        }
        else {
            footer = footer + "<a href=#>Next</a>&nbsp;";
            footer = footer + "<a href=#>Last</a>&nbsp;";
        }

        footer = footer + "</div>";
        $("#divFoot").empty();
        $("#divFoot").append(footer);
        return footer;
    }
</script>

<style>
    table
    {
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        width:27%;
    }
    table th
    {
        background: #b5cfd2;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table td
    {
        background: #dcddc0;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    .foot
    {
        background: #dcddc0;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
        text-align:center;
        width:25%;
    }
</style>

<input type="hidden" id="hdnCurrentPage" />
<div id="divGrid" >
    <div id="divMain" ></div>
    <div id="divFoot" class="foot" ></div>
</div>

that’s it.

Relevant links
Sorting in webgrid in ASP.NET MVC
Delete Multiple webgrid row using jQuery
Efficient Paging and Sorting with WebGrid Web Helper – ASP.NET MVC
ASP.NET MVC3 webgrid conditional statement on column (if, if else loop)
Efficient Paging with WebGrid Web Helper – ASP.NET MVC
ASP.NET MVC Web Grid Style

Advertisements
This entry was posted in ASP.NET MVC Web Grid and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s