Phân trang với Listview control trong ASP.NET C#

Trong một số control hiển thị dữ liệu ở dạng bảng như DataGridview, Repeater, Datalist, Listview,… thì mình thấy Listview là một control khá nhẹ và có đầy đủ các tính năng hỗ trợ hiển thị tốt dữ liệu.

Hôm nay mình sẽ hướng dẫn các bạn phân trang dữ liệu với control Listview Asp.net C#, phân trang sẽ giúp cho dữ liệu hiển thị được rõ ràng hơn và khi load trang thì dữ liệu chỉ load với số lượng dòng chỉ định tại đầu tiên nên sẽ cải thiện được tốc độ website của bạn.

Demo Download

1. Thiết kế control:

<asp:ListView ID="listArticles" runat="server" OnPagePropertiesChanging="OnPagePropertiesChanging">
    <ItemTemplate>
        <div class="row">
            //Chỗ này các bạn viết code html để show dữ liệu, thông thường mình hay sử dụng hàm Eval("fieldName")
        </div>
    </ItemTemplate>
    <EmptyDataTemplate>
        <p>The time is not for new posts.</p>
    </EmptyDataTemplate>
</asp:ListView>
<div class="row text-right">
    <asp:DataPager ID="dtpArticles" runat="server" PagedControlID="listArticles" PageSize="10" ClientIDMode="Static">
        <Fields>
            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true"
                ShowNextPageButton="false" ButtonCssClass="prev-page text-info" />
            <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="btn-cur-page text-info"
                NumericButtonCssClass="btn-num-page text-success" />
            <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="true" ShowNextPageButton="true"
                ShowPreviousPageButton="false" ButtonCssClass="next-page text-info" />
        </Fields>
    </asp:DataPager>
</div>

– OnPagePropertiesChanging=”OnPagePropertiesChanging”: là sự kiện được gọi ở code behind, thực hiện chuyển trang
– ItemTemplate: là phần code tùy chỉnh để tạo một template hiển thị (tin tức chẳng hạn)
– EmptyDataTemplate: dòng hiển thị khi dữ liệu rỗng
– DataPager: là phần trang của Listview, cùng với các button Next, Preview và Page number

2. Code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack) Bind_Data();
}
 
//Hàm đổ dữ liệu vào Listview, nên gọi ở Page_Load event
protected void Bind_Data()
{
    listArticles.DataSource = dtb;
    listArticles.DataBind();
}
  
//Hàm bắt sự kiện khi người dùng click vào các button phân trang
protected void OnPagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
    dtpArticles.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    Bind_Data();
}

Code behind trên mình có gọi hàm Bind_Data(), hàm này mình viết trong class cha nên không tiện để hiển thị, nhưng các bạn cũng có thể thay bằng một hàm khác có chứ năng lấy data từ cơ sở dữ liệu.

Sau khi thực hiện như trên, cùng với một số thiết kế style riêng cho các button phân trang, các bạn sẽ được một Listview phân trang dữ liệu đơn giản, chúc các bạn thành công!