ASP.NET Web Forms里GridView分页要怎么配才能正常翻页并显示数据？

# ASP.NET Web Forms GridView分页功能完整配置指南 ## 1. GridView分页基础配置 ### 1.1 基本属性设置在ASP.NET Web Forms中，GridView控件的分页功能主要通过几个关键属性来实现。以下是基本的前端标记配置： ```aspx <asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="10" PageIndex="0" OnPageIndexChanging="GridView1_PageIndexChanging" PagerSettings-Mode="NumericFirstLast" PagerSettings-Position="Bottom" PagerSettings-FirstPageText="首页" PagerSettings-LastPageText="末页" PagerSettings-PageButtonCount="10"> </asp:GridView> ``` **属性说明**： - `AllowPaging="true"`：启用分页功能 [ref_1] - `PageSize="10"`：设置每页显示10条记录 [ref_1] - `OnPageIndexChanging`：分页索引改变时触发的事件 [ref_1] ### 1.2 分页样式自定义可以通过CSS对分页控件进行样式美化： ```css /* 分页控件样式 */ .gridview-pager { text-align: center; padding: 10px 0; margin-top: 10px; } .gridview-pager table { margin: 0 auto; } .gridview-pager td { padding: 3px 8px; border: 1px solid #ddd; background-color: #f8f9fa; } .gridview-pager .pager-selected { background-color: #007bff; color: white; font-weight: bold; } ``` ## 2. 数据绑定与分页集成 ### 2.1 数据源绑定方法在代码后台实现数据绑定，这是实现分页功能的核心： ```csharp // 数据绑定方法 private void BindGridViewData() { // 获取数据源 DataTable dataTable = GetDataSource(); // 绑定到GridView GridView1.DataSource = dataTable; GridView1.DataBind(); // 设置分页信息显示 lblPageInfo.Text = $"第 {GridView1.PageIndex + 1} 页，共 {GridView1.PageCount} 页"; } // 模拟数据源获取 private DataTable GetDataSource() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("CreateDate", typeof(DateTime)); // 添加示例数据 for (int i = 1; i <= 100; i++) { dt.Rows.Add(i, $"用户{i}", DateTime.Now.AddDays(-i)); } return dt; } ``` ### 2.2 分页事件处理处理分页索引改变事件，这是分页功能的关键： ```csharp protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { try { // 设置新的页面索引 GridView1.PageIndex = e.NewPageIndex; // 重新绑定数据 BindGridViewData(); // 可选：取消默认的分页行为（如果使用自定义分页逻辑） // e.Cancel = true; } catch (Exception ex) { // 异常处理 Response.Write($"<script>alert('分页操作失败：{ex.Message}');</script>"); } } ``` ## 3. 完整示例实现 ### 3.1 前端页面完整代码 ```aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewPaging.aspx.cs" Inherits="WebApplication1.GridViewPaging" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>GridView分页示例</title> <style> .gridview-container { width: 80%; margin: 20px auto; font-family: Arial, sans-serif; } .gridview-header { background-color: #343a40; color: white; font-weight: bold; } .gridview-row { background-color: #f8f9fa; } .gridview-alternating { background-color: #e9ecef; } .pager-info { text-align: center; margin: 10px 0; font-weight: bold; } </style> </head> <body> <form id="form1" runat="server"> <div class="gridview-container"> <h2>用户列表 - GridView分页演示</h2> <asp:Label ID="lblPageInfo" runat="server" CssClass="pager-info"></asp:Label> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AllowPaging="true" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging" CssClass="table table-bordered" HeaderStyle-CssClass="gridview-header" RowStyle-CssClass="gridview-row" AlternatingRowStyle-CssClass="gridview-alternating" PagerSettings-Mode="NumericFirstLast" PagerSettings-FirstPageText="首页" PagerSettings-LastPageText="末页" PagerSettings-PageButtonCount="5"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="80px" /> <asp:BoundField DataField="Name" HeaderText="姓名" ItemStyle-Width="150px" /> <asp:BoundField DataField="CreateDate" HeaderText="创建日期" DataFormatString="{0:yyyy-MM-dd}" ItemStyle-Width="120px" /> </Columns> </asp:GridView> </div> </form> </body> </html> ``` ### 3.2 后台代码完整实现 ```csharp using System; using System.Data; using System.Web.UI; namespace WebApplication1 { public partial class GridViewPaging : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { // 首次加载时绑定数据 BindGridViewData(); } } private void BindGridViewData() { try { DataTable dataTable = GetDataSource(); GridView1.DataSource = dataTable; GridView1.DataBind(); // 更新分页信息 UpdatePageInfo(); } catch (Exception ex) { Response.Write($"<script>alert('数据加载失败：{ex.Message}');</script>"); } } protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { GridView1.PageIndex = e.NewPageIndex; BindGridViewData(); } private DataTable GetDataSource() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("CreateDate", typeof(DateTime)); // 生成示例数据 Random rand = new Random(); for (int i = 1; i <= 50; i++) { dt.Rows.Add(i, $"测试用户{i:000}", DateTime.Now.AddDays(-rand.Next(1, 365))); } return dt; } private void UpdatePageInfo() { int currentPage = GridView1.PageIndex + 1; int totalPages = GridView1.PageCount; int pageSize = GridView1.PageSize; int totalRecords = GetTotalRecordCount(); lblPageInfo.Text = $"显示第 {(currentPage - 1) * pageSize + 1} - " + $"{Math.Min(currentPage * pageSize, totalRecords)} 条记录，" + $"共 {totalRecords} 条记录，第 {currentPage} 页/共 {totalPages} 页"; } private int GetTotalRecordCount() { // 实际项目中应从数据库获取总记录数 return 50; } } } ``` ## 4. 高级配置与优化 ### 4.1 自定义分页模板如果需要更灵活的分页控件，可以使用PagerTemplate： ```aspx <asp:GridView ID="GridView2" runat="server" AllowPaging="true" PageSize="5"> <PagerTemplate> <div style="text-align: center; padding: 10px;"> <asp:LinkButton ID="btnFirst" runat="server" CommandName="Page" CommandArgument="First" Text="首页" /> <asp:LinkButton ID="btnPrev" runat="server" CommandName="Page" CommandArgument="Prev" Text="上一页" /> <span style="margin: 0 10px;"> 第 <asp:Label ID="lblCurrentPage" runat="server" Text='<%# Container.PageIndex + 1 %>' /> 页/共 <asp:Label ID="lblTotalPages" runat="server" Text='<%# Container.PageCount %>' /> 页 </span> <asp:LinkButton ID="btnNext" runat="server" CommandName="Page" CommandArgument="Next" Text="下一页" /> <asp:LinkButton ID="btnLast" runat="server" CommandName="Page" CommandArgument="Last" Text="末页" /> </div> </PagerTemplate> </asp:GridView> ``` ### 4.2 性能优化建议对于大数据量的分页，建议使用数据库分页： ```csharp // 数据库分页查询示例（SQL Server） private DataTable GetPagedData(int pageIndex, int pageSize) { string connectionString = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString; string query = @" SELECT * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY ID) AS RowNum, * FROM Users ) AS Result WHERE RowNum BETWEEN @StartIndex AND @EndIndex"; using (SqlConnection conn = new SqlConnection(connectionString)) { SqlCommand cmd = new SqlCommand(query, conn); cmd.Parameters.AddWithValue("@StartIndex", pageIndex * pageSize + 1); cmd.Parameters.AddWithValue("@EndIndex", (pageIndex + 1) * pageSize); SqlDataAdapter da = new SqlDataAdapter(cmd); DataTable dt = new DataTable(); da.Fill(dt); return dt; } } ``` ## 5. 常见问题与解决方案 ### 5.1 分页后数据丢失问题 **问题**：分页后GridView数据显示异常或为空 **解决方案**：确保在Page_Load和分页事件中都正确绑定数据 ```csharp protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridViewData(); // 只在首次加载时绑定 } } protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { GridView1.PageIndex = e.NewPageIndex; BindGridViewData(); // 分页时必须重新绑定 } ``` ### 5.2 分页样式不生效 **问题**：分页控件样式无法正常显示 **解决方案**：检查CSS选择器是否正确，确保样式优先级足够高 ```css /* 确保样式能够覆盖默认样式 */ .gridview-pager td a { color: #007bff !important; text-decoration: none !important; } .gridview-pager td a:hover { color: #0056b3 !important; text-decoration: underline !important; } ``` 通过以上完整的配置指南，您可以在ASP.NET Web Forms中成功实现GridView的分页功能，并根据具体需求进行个性化定制和性能优化。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 Vue2里怎么用$confirm弹窗嵌入el-form并实时绑定dataForm数据？

目录

ASP.NET Web Forms里GridView分页要怎么配才能正常翻页并显示数据？

Python内容推荐

Python表格文件读取以及保存 包含表格文件读取以及保存.py以及测试表格数据文件xls以及.xlsx

Asp.net GridView使用大全(分页实现)

基于ASP.NET+C#实现的Gridview, DataGrid, DataList and Repeater 通用翻页控件源码例子

asp.net 显示固定行数的 GridView

Gridview分页的例子

asp.net中实现打印gridview代码

asp.net 分页显示数据表的数据的代码

一个gridview数据绑定和分页

asp.net中gridview分页功能（三层框架）

asp.net中的GridView自定义分页及改变列宽代码

Gridview控件的使用详解

asp.net(GridView)存储过程分页源码

用gridview通过代码绑定数据，同时用aspnetpager实现分页

gridview数据绑定和自定义分页

数组绑定GridView并分页

GridView查询排序分页

gridview分页

Asp.net Mvc GridView

GridView分页

GridView显示XML数据

备忘录（动销表制作规范）

国央企创新负责人如何通过产业大脑优化产业链协同与资源配置？.docx

【三变量联合分布函数copula】利用AIC BIC确定单变量最优拟合函数、利用AIC确定三变量联合最优copula函数、计算联合概率（Matlab代码实现）

（121页PPT）医药集团IT信息化规划报告P121.pptx

国央企创新负责人如何通过数智转型专区推动下属企业实现智能化升级？.docx

学生成绩管理系统C++课程设计与实践

别再手动拖拽了！用Lumerical脚本批量创建FDTD仿真结构（附完整代码）

Java邮件解析任务中，如何安全高效地提取HTML邮件内容并避免硬编码、资源泄漏和类型转换异常？

RH公司应收账款管理优化策略研究

新手别慌！用BingPi-M2开发板带你5分钟搞懂Tina Linux SDK目录结构

Python表格文件读取以及保存包含表格文件读取以及保存.py以及测试表格数据文件xls以及.xlsx