نحوه ایجاد Pagination در Asp.Net

در این پست به صورت کامل آموزش نحوه ایجاد Pagination یا صفحه بندی را بدون نیاز به استفاده از ابزارهای آماده را یاد خواهیم گرفت.

برای شروع یک کلاس به نام  Pagination ایجاد کنید و یک متد به نام Pager و از نوع استاتیک داخل آن به صورت زیر بنویسید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;

namespace Infrastructure
{
    /// <summary>
    /// Summary description for Pagination
    /// </summary>
    public class Pagination
    {
        public Pagination()
        {

        }
        public static string Pager(int recordCount, int currentPage, int pageSize = 25)
        {
            // pageSize تعداد آیتم های نمایش در هر صفحه
            // currentPage شماره صفحه کلیک شده
            // recordCount تعداد کل رکودها

            string printPage = "<ul class='pagination'>";
            double dblPageCount = (double)((decimal)recordCount / Convert.ToDecimal(pageSize));
            int totalPages = (int)Math.Ceiling(dblPageCount);

            if (recordCount - pageSize > 0)
            {
                int start = 1;
                int pageMiddle = currentPage + 4;
                int pageStart = pageMiddle - 4;
                int pageLast = totalPages;

                //اگر صفحه درخواستی بزرگتر از 1 بود
                if (currentPage > 1)
                {
                    printPage += "<li><a href='?pageNumber=" + start + "'><<</a></li>";
                }
                //غیر فعال کردن لینک صفحه نخست اگر صفحه درخواستی برابر 1 بود
                else
                {
                    printPage += "<li class='disabled'><a><<</a></li>";
                }

                //ایجاد لینک صفحه قبلی
                if (currentPage > 1)
                {
                    int prevPage = currentPage - 1;
                    printPage += "<li><a href='?pageNumber=" + prevPage + "'><</a></li>";

                }
                else
                {
                    printPage += "<li class='disabled'><a><</a></li>";
                }


                if (pageMiddle > 7)
                {
                    printPage += "<li class='disabled'><a><span>...</span></a></li>";
                }

                //ایجاد لینک صفحات میانی، شروع از دو شماره قبل
                for (var i = pageStart - 2; i <= pageMiddle; i++)
                {
                    //ایجاد لینک در صورتی که صفر، منفی یا از آخرین صفحه بیشتر نباشد
                    if (i > 0 && i <= pageLast)
                    {
                        //در حالت انتخاب شده
                        if (i == currentPage)
                        {
                            printPage += "<li class='active disabled'><a>" + i + "</a></li>";
                        }
                        //در حالت عادی
                        else
                        {
                            printPage += "<li><a href='?pageNumber=" + i + "'>" + i + "</a></li>";
                        }
                    }
                }

                if (totalPages > 5 && currentPage != totalPages)
                {
                    printPage += "<li class='disabled'><a><span>...</span></a></li>";
                }

                //نمایش لینک صفحات بعدی
                if (currentPage < totalPages)
                {
                    int nextPage = currentPage + 1;
                    printPage += "<li><a href='?pageNumber=" + nextPage + "'>></a></li>";
                }
                else
                {
                    printPage += "<li class='disabled'><a>></a></li>";
                }
                //لینک صفحه آخر
                if (currentPage <= pageLast - 1)
                {
                    printPage += "<li><a href='?pageNumber=" + pageLast + "'>>></a></li>";
                }
                //غیر فعال کردن لینک صفحه آخر اگر صفحه انتخابی برابر صفحه آخر بود
                else
                {
                    printPage += "<li class='disabled'><a>>></a></li>";
                }
                printPage += "</ul>";

                return printPage;
            }
            return null;
        }
    }
}

اگر به کدهای بالا نگاه کنید تمام موارد داخل کدها توضیح داده شده است.

 متد Pager

این متد سه ورودی دریافت می کند. تعداد کل دادها ، شماره صفحه کلیک شده و تعداد رکوردهای نمایش در هر صفحه که به صورت پیش فرض 25 در نظر گرفته شده است.

این متد در نهایت یک رشته را برمی گرداند که شماره صفحات میباشد.

نکته: در اینجا از استایل های Bootstarp برای نمایش شماره ها استفاده شده است.

نکته: ما شماره صفحات را به صورت QueryString و به نام pageNumber در herf تگ های a قرار می دهیم.

حال در فرم لود صفحه مورد نظر کد زیر را بنویسید.

       try  
        {
            if (Request.Params["PageNumber"] != null)
            {
                int currentPage = Int32.Parse(Request.Params["PageNumber"]);

                GetData(currentPage, 25);
            }
            else
            {
                GetData(1, 25);
            }
        }
        catch (Exception ex)
        {
        }

در کد بالا بررسی کردیم در صورت وجود QueryString متد GetData را با شماره ای که در QueryString قرار دارد و تعداد رکوردی که می خواهیم در هر صفحه نمایش دهد فراخوانی کردیم. در صورت عدم وجود QueryString متد GetData را با عدد یک فراخوانی می کنیم.

متد GetData

کدهای متد GetData  به صورت زیر می باشد.

    #region شماره صفحه و نمایش پروژه ها
    private void GetData(int currentPage, int pageSize)
    {
        DataBaseContext db = null;
        try
        {
            db = new DataBaseContext();


            var topic = (from t in db.Topics
                         orderby t.TopicId descending
                         select t).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();


            var topicCount = (from t in db.Topics
                              select t).Count();

            if (topic.Count > 0)
            {
                //بایند کردن اطلاعات به گرید ویو
                rptTopics.DataSource = topic;
                rptTopics.DataBind();

                int recordCount = topicCount;
                litPageNumber.Text = Pagination.Pager(recordCount, currentPage, pageSize);
            }
            else
            {
                tblrepeater.Visible = false;
                rptTopics.DataSource = null;
                rptTopics.DataBind();
            }

        }
        catch (System.Exception ex)
        {
        }
        //در نهایت اگر دیتابیس کانتکست نال نبود نال می کنیم
        finally
        {
            if (db != null)
            {
                db.Dispose();
                db = null;
            }
        }
    }

در کدهای بالا از دستورات linq برای ارتباط با دیتابیس و خواندن اطلاعات استفاده کردیم. ابتدا رکوردهای که می خواهیم نمایش دهیم را توسط skip و take انتخاب کردیم و سپس تعداد کل رکوردها توسط دستور count محاسبه کردیم.

در صورت وجود اطلاعات در یک ریپیتر بایند کردیم و سپس از کلاس Pagination متد Pager را صدا زدیم و ورودی های آن دادیم و خروجی را در یک Literal قرار دادیم تا شماره صفحات را نمایش دهد.

کدهای html

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive" style="padding-right: 15px;" id="Div1" runat="server">
            <table class="table table-bordered table-hover table-striped text-center">
                <thead>
                    <tr>
                        <td>ردیف</td>
                        <td>عنوان مطلب</td>
                        <td>دانلود</td>
                        <td>بازید</td>
                    </tr>
                </thead>
                <tbody>

                    <asp:Repeater ID="Repeater1" runat="server" OnItemCommand="rptIdeas_ItemCommand">
                        <ItemTemplate>

                            <tbody>

                                <tr>
                                    <td><%# Container.ItemIndex + 1 %></td>
                                    <td>
                                        <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label></td>
                                    <td>
                                        <asp:Label ID="lblDownload" runat="server" Text='<%# Eval ("DownloadCount") %>'></asp:Label></td>
                                    <td>
                                        <asp:Label ID="lblView" runat="server" Text='<%# Bind("ViewCount") %>'></asp:Label></td>
                                </tr>
                        </ItemTemplate>
                    </asp:Repeater>

                </tbody>
            </table>
            <div class="text-center">
                <div class="clearfix"></div>
                <asp:Literal runat="server" ID="Literal1"></asp:Literal>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

در کدهای بالا فقط یک Repeater قرار دادیم تا اطلاعات را بایند کنیم و از یک Literal برای نمایش صفحات استفاده کردیم.