Tuesday, 2 January 2018

Implementing pagination in MVC using C# linq:

Step 1: Download the css and js file for pagination from following link:
https://drive.google.com/drive/folders/1A2rhGVGpHv_1Tkf3uDj1mUDzr7m-y5J3?usp=sharing

Step 2: Create new class named "PagedModel.cs" in your Models folder as following:

public class PagedModel<T>
    {
        public int TotalRecords { get; set; }
        public int PageCount { get; set; }
        public int CurrentPageIndex { get; set; }
        public T Data { get; set; }
    }

Step 3: Add following code in your MVC controller class:

        public ActionResult Index()
        {
            ViewBag.Platforms = GetPlatformsList();
            var result = FilterData(1, 10);
            return View(result);
        }

        [HttpPost]
        public ActionResult Index(int currentPageIndex, int totalRecords)
        {
            ViewBag.Platforms = GetPlatformsList();
            var result = FilterData(currentPageIndex, 10);
            return View(result);
        }

// To-Do: Put this method in business class.
public PagedModel<IList<CustomerModel>> FilterData(int pageNumber, int pageSize)
        {
            PagedModel<IList<CustomerModel>> result = new PagedModel<IList<CustomerModel>>();

            ReportContext context = new ReportContext();
            var customers = (from customer in context.Customers
                           where customer.IsActive
                           select customer);

            int totalRecords = 0;
            var firstPageData = PagedResult(customers, pageNumber, pageSize, cust => cust.Id, false, out totalRecords);

            result.TotalRecords = totalRecords;
            double pageCount = (double)(totalRecords / Convert.ToDecimal(pageSize));
            result.PageCount = (int)Math.Ceiling(pageCount);
            result.CurrentPageIndex = pageNumber;
            result.Data = firstPageData.ToList();

            return result;
        }

// To-Do: Put this method in common class.
public static IQueryable<T> PagedResult<T, TResult>(IQueryable<T> query, int pageNum, int pageSize,
                        Expression<Func<T, TResult>> orderByProperty, bool isAscendingOrder, out int rowsCount)
        {
            if (pageSize <= 0) pageSize = 20;

            //Total result count
            rowsCount = query.Count();

            //If page number should be > 0 else set to first page
            if (rowsCount <= pageSize || pageNum <= 0) pageNum = 1;

            //Calculate nunber of rows to skip on pagesize
            int excludedRows = (pageNum - 1) * pageSize;

            query = isAscendingOrder ? query.OrderBy(orderByProperty) : query.OrderByDescending(orderByProperty);

            //Skip the required rows for the current page and take the next records of pagesize count
            return query.Skip(excludedRows).Take(pageSize);
        }


Step 4: Add following html code in your MVC view(.cshtml) page:
@model Project.Models.PagedModel<IList<Project.Models.CustomerModel>>
@{
    ViewBag.Title = "Home Page";
}

<div>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <h4 style="margin-top:25px;">
            Supermetrics Report
            <label class="pull-right">Total Records: @Model.TotalRecords</label>
        </h4>
        <hr />
        <div class="form-group" style="overflow-x:auto;">
            <table class="table table-bordered" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th> Id </th>
                        <th> Name </th>
                        <th> Desc </th>
                        <th> Age </th>
                     
                    </tr>
                </thead>
                <tbody>
                    @{
                        if (Model.Data.Count == 0)
                        {
                            <tr>
                                <td colspan="30">
                                    No Record Found
                                </td>
                            </tr>
                        }
                        else
                        {
                            foreach (var data in Model.Data)
                            {
                                <tr>
                                    <td> @data.Id </td>
                                    <td> @data.Name </td>
                                    <td> @data.Desc </td>
                                    <td> @data.Age </td>
                                 </tr>
                            }
                        }
                    }
                </tbody>
            </table>
        </div>
        <br />
        <ul id="ulPager" class="blade-pagination" data-current="@Model.CurrentPageIndex" data-total="@Model.PageCount"></ul>

        <input type="hidden" id="hfCurrentPageIndex" name="currentPageIndex" value="@Model.CurrentPageIndex" />
        <input type="hidden" id="hfTotalRecords" name="totalRecords" value="10" />
        @*<input type="hidden" id="hfPlatform" name="platform" value="All" />*@
                        }
</div>
<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    table {
        border: 1px solid #ccc;
        border-collapse: collapse;
        background-color: #fff;
    }

        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }

        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        table, table table td {
            border: 0px solid #ccc;
        }

    #ulPager {
        margin: 0 auto;
        width: fit-content;
    }
</style>

@section scripts{
    <link href="~/Content/blade-pagination.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.blade-pagination.js"></script>
    <script type="text/javascript">
        function PagerClick(index) {
            document.getElementById("hfCurrentPageIndex").value = index;
            document.forms[0].submit();
        }

        function filterData() {
            document.getElementById("hfCurrentPageIndex").value = 1;
            document.forms[0].submit();
        }

        $('#ulPager').bladePagination({
            maxPageNum: 9,
            firstLabel: 'First',
            prevLabel: 'Prev',
            nextLabel: 'Next',
            lastLabel: 'Last',
            moreLabel: '...',
            clickPage: function (page) {
                PagerClick(page);
            }
        });
    </script>
}


No comments:

Post a Comment