如何在 ASP.NET 中实现 GridView 控件分页

引言

GridView 是 ASP.NET 中以网格格式显示数据的最常用工具之一。当数据量很大时，分页有助于用户查看数据块，并提高页面加载时间。 在本文中，我们将了解如何在 GridView 控件中实现分页。

那么，让我们直接进入代码。

ASPX 页面

• 在 Visual Studio 解决方案中，将一个 GridView 控件拖放到任何页面上。 让我们将其命名为 grdData。
• 将 GridView 的 AllowPaging 属性设置为 true。
• 处理 GridView 的 OnPageIndexChanging 事件。
• 默认情况下，GridView 每页显示 10 条记录。 如果要修改每页显示的记录数，请将 GridView 的 PageSize 属性设置为所需数字。 在此示例中，我将此属性设置为 5。
• 以下是在 aspx 页面中的完整 GridView 代码

<asp:gridview ID="grdData" runat="server" 
AutoGenerateColumns="False" CellPadding="4" PageSize="5"
            ForeColor="#333333" GridLines="None" Width="200" AllowPaging="True"
            OnPageIndexChanging="grdData_PageIndexChanging">
            <alternatingrowstyle BackColor="White" ForeColor="#284775"></alternatingrowstyle>
            <columns>
                <asp:boundfield DataField="ID" HeaderText="ID"></asp:boundfield>
                <asp:boundfield DataField="Name" HeaderText="Name"></asp:boundfield>
            </columns>
            <editrowstyle BackColor="#999999"></editrowstyle>
            <footerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></footerstyle>
            <headerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></headerstyle>
            <pagerstyle BackColor="#284775" ForeColor="White" 
            HorizontalAlign="Center"></pagerstyle>
            <rowstyle BackColor="#F7F6F3" ForeColor="#333333"></rowstyle>
            <selectedrowstyle BackColor="#E2DED6" Font-Bold="True" 
            ForeColor="#333333"></selectedrowstyle>
            <sortedascendingcellstyle BackColor="#E9E7E2"></sortedascendingcellstyle>
            <sortedascendingheaderstyle BackColor="#506C8C"></sortedascendingheaderstyle>
            <sorteddescendingcellstyle BackColor="#FFFDF8"></sorteddescendingcellstyle>
            <sorteddescendingheaderstyle BackColor="#6F8DAE"></sorteddescendingheaderstyle>
        </asp:gridview>

ASPX.CS 页面

• 创建一个新函数，从你的数据存储库（数据库）加载数据并将其绑定到 GridView。 让我们将其命名为 LoadGridData()。
• 在 Page_Load 事件中，检查页面的 IsPostback 属性后调用 LoadGridData()。
• 在 grdData_PageIndexChanging 事件中，编写以下代码。 在下面的代码中，我们设置 GridView 的 NewPageIndex 属性并再次调用 LoadGridData() 函数。 .NET GridView 会自动处理内部事务，仅显示所选页面的数据。
• 以下是来自 .aspx.cs 页面的完整代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        LoadGridData();
}
private void LoadGridData()
{
    //I am adding dummy data here. You should bring data from your repository.
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Name");
    for (int i = 0; i < 10; i++)
    {
        DataRow dr = dt.NewRow();
        dr["Id"] = i + 1;
        dr["Name"] = "Student " + (i + 1);
        dt.Rows.Add(dr);
    }
    grdData.DataSource = dt;
    grdData.DataBind();
}
protected void grdData_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    grdData.PageIndex = e.NewPageIndex;
    LoadGridData();
}

完成了。

输出

第 1 页

第 2 页

希望你喜欢这篇文章！ 继续学习和分享！ 祝好！