如何实现ASP.NET无刷新分页？简单方法分享！

<div class="container">
    <p>实现ASP.NET无刷新分页的核心在于结合AJAX技术与服务端分页逻辑，仅动态更新数据区域而非刷新整个页面，大幅提升用户体验与性能，关键在于异步请求数据、服务端处理分页逻辑、客户端动态渲染结果。</p>
    <h3>核心实现原理</h3>
    <p>无刷新分页通过以下流程运作：</p>
    <ol>
        <li><strong>客户端触发</strong>：用户点击页码按钮（非传统回发PostBack链接）。</li>
        <li><strong>异步请求</strong>：通过JavaScript（通常使用jQuery AJAX或Fetch API）向服务端发送请求，携带目标页码和每页记录数等参数。</li>
        <li><strong>服务端处理</strong>：ASP.NET页面或Web API/MVC Controller接收请求，执行数据库查询（使用高效分页如SQL的<code>OFFSET-FETCH</code>或存储过程），获取当前页数据。</li>
        <li><strong>数据返回</strong>：服务端将当前页数据序列化为JSON格式返回客户端。</li>
        <li><strong>动态渲染</strong>：客户端AJAX回调函数解析JSON数据，使用JavaScript（如原生JS或Vue/React）动态更新HTML表格或列表内容，同时更新分页导航UI状态。</li>
    </ol>
    <h3>基础实现方案：使用UpdatePanel（快速入门）</h3>
    <p>适用于Web Forms项目快速集成：</p>
    <pre><code class="language-aspnet">&lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt;
&lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"&gt;
    &lt;ContentTemplate&gt;
        &lt;!-- 数据容器 --&gt;
        &lt;asp:GridView ID="gvData" runat="server" AutoGenerateColumns="true" 
                     OnPageIndexChanging="gvData_PageIndexChanging" AllowPaging="True" PageSize="10"&gt;
        &lt;/asp:GridView&gt;
        &lt;!-- 自定义分页控件 (需实现) --&gt;
        &lt;uc:CustomPager ID="pager" runat="server" OnPageChanged="pager_PageChanged" /&gt;
    &lt;/ContentTemplate&gt;
&lt;/asp:UpdatePanel&gt;</code></pre>
    <p><strong>服务端事件处理</strong>：</p>
    <pre><code class="language-csharp">protected void pager_PageChanged(object sender, PageChangedEventArgs e) {
    gvData.PageIndex = e.NewPageIndex; // 更新GridView页码
    BindGridData(); // 重新绑定当前页数据
}</code></pre>
    <p><strong>注意</strong>：UpdatePanel本质是部分回发，虽实现简单，但传输整个ViewState，性能非最优，仅适用于中小型数据量。</p>
    <h3>高性能方案：AJAX + JSON + Web API / PageMethods</h3>
    <p>追求极致性能与用户体验的推荐方案：</p>
    <h4>步骤1：服务端准备分页数据接口</h4>
    <p><strong>ASP.NET Web API (推荐)：</strong></p>
    <pre><code class="language-csharp">// ApiController
[Route("api/data")]
[HttpGet]
public IHttpActionResult GetPagedData(int pageIndex = 1, int pageSize = 10) {
    try {
        // 1. 计算总记录数
        int totalCount = dataService.GetTotalRecordCount();
        // 2. 获取当前页数据 (使用高效分页查询)
        var pagedData = dataService.GetPagedRecords(pageIndex, pageSize);
        // 3. 返回包含数据和分页信息的JSON
        return Ok(new {
            Success = true,
            Data = pagedData,
            TotalCount = totalCount,
            PageIndex = pageIndex,
            PageSize = pageSize,
            TotalPages = (int)Math.Ceiling(totalCount / (double)pageSize)
        });
    } catch (Exception ex) {
        return InternalServerError(ex);
    }
}</code></pre>
    <p><strong>ASP.NET Web Forms PageMethods：</strong></p>
    <pre><code class="language-csharp">[System.Web.Services.WebMethod]
public static string GetPagedData(int pageIndex, int pageSize) {
    // ... 同上，获取数据 ...
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(new {
        Data = pagedData,
        TotalCount = totalCount
        // ... 其他分页信息
    });
}</code></pre>
    <h4>步骤2：客户端实现AJAX请求与渲染</h4>
    <pre><code class="language-javascript">function loadPageData(pageIndex) {
    $.ajax({
        url: '/api/data?pageIndex=' + pageIndex + '&pageSize=10', // 或 PageMethods 路径
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.Success) {
                // 1. 清空现有表格内容
                $('#dataTable tbody').empty();
                // 2. 动态填充新数据
                $.each(response.Data, function(index, item) {
                    var row = $('&lt;tr&gt;');
                    row.append($('&lt;td&gt;').text(item.ID));
                    row.append($('&lt;td&gt;').text(item.Name));
                    // ... 其他列 ...
                    $('#dataTable tbody').append(row);
                });
                // 3. 更新分页导航控件
                updatePagerUI(response.PageIndex, response.TotalPages);
            } else {
                alert('加载数据失败');
            }
        },
        error: function() {
            alert('网络请求错误');
        }
    });
}
// 初始化加载第一页
$(document).ready(function() {
    loadPageData(1);
});</code></pre>
    <h4>步骤3：构建动态分页导航UI</h4>
    <pre><code class="language-javascript">function updatePagerUI(currentPage, totalPages) {
    var $pager = $('#pagination');
    $pager.empty();
    // 上一页按钮
    if (currentPage > 1) {
        $pager.append('&lt;li class="page-item"&gt;&lt;a class="page-link" href="#" onclick="loadPageData(' + (currentPage - 1) + ')"&gt;上一页&lt;/a&gt;&lt;/li&gt;');
    }
    // 页码按钮 (示例：显示最多10个页码)
    for (var i = Math.max(1, currentPage - 4); i &lt;= Math.min(totalPages, currentPage + 5); i++) {
        var active = i === currentPage ? ' active' : '';
        $pager.append('&lt;li class="page-item' + active + '"&gt;&lt;a class="page-link" href="#" onclick="loadPageData(' + i + ')"&gt;' + i + '&lt;/a&gt;&lt;/li&gt;');
    }
    // 下一页按钮
    if (currentPage < totalPages) {
        $pager.append('&lt;li class="page-item"&gt;&lt;a class="page-link" href="#" onclick="loadPageData(' + (currentPage + 1) + ')"&gt;下一页&lt;/a&gt;&lt;/li&gt;');
    }
}</code></pre>
    <h3>关键优化与注意事项</h3>
    <ul>
        <li><strong>数据库分页效率</strong>：务必在数据库层使用<code>OFFSET ... FETCH</code> (SQL Server 2012+), <code>ROW_NUMBER()</code> 或数据库特定高效分页语句（如MySQL的<code>LIMIT</code>），避免在应用层进行全量查询后分片。</li>
        <li><strong>JSON数据精简</strong>：仅返回前端渲染必需字段，减小网络传输负载。</li>
        <li><strong>客户端模板引擎</strong>：复杂渲染推荐使用<code>Vue.js</code>、<code>React</code>或轻量库如<code>Handlebars.js</code>，提高代码可维护性。</li>
        <li><strong>加载状态反馈</strong>：添加加载中动画（如Spin.js）或提示，提升用户体验。</li>
        <li><strong>错误处理</strong>：完善AJAX错误回调，提供友好错误提示和重试机制。</li>
        <li><strong>浏览器历史记录</strong>：重要分页状态可使用<code>history.pushState</code>更新URL，支持浏览器前进/后退导航。</li>
    </ul>
    <h3>高级扩展：无限滚动（Infinite Scroll）</h3>
    <p>替代传统分页按钮，滚动到底部自动加载下一页：</p>
    <pre><code class="language-javascript">$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        if (!isLoading && currentPage < totalPages) {
            isLoading = true;
            loadPageData(currentPage + 1); // 加载下一页
        }
    }
});</code></pre>
    <p>在<code>loadPageData</code>的<code>success</code>回调中，需追加数据而非替换，并重置<code>isLoading</code>状态。</p>
    <h3>方案对比与选型建议</h3>
    <table class="table">
        <thead>
            <tr>
                <th>方案</th>
                <th>优点</th>
                <th>缺点</th>
                <th>适用场景</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>UpdatePanel</strong></td>
                <td>实现简单，基本无需写JS</td>
                <td>性能较差（传输ViewState），控制粒度粗</td>
                <td>小型项目、数据量少、快速原型</td>
            </tr>
            <tr>
                <td><strong>AJAX + PageMethods</strong></td>
                <td>性能较好，适合Web Forms项目</td>
                <td>仍需管理ScriptManager，灵活性中等</td>
                <td>传统Web Forms项目升级</td>
            </tr>
            <tr>
                <td><strong>AJAX + Web API</strong></td>
                <td>高性能、前后端分离、灵活、易扩展</td>
                <td>需编写较多JS和API</td>
                <td>现代Web应用、大型项目、追求最佳体验</td>
            </tr>
        </tbody>
    </table>
    <p>无刷新分页已成为现代Web应用标配，选择何种方案应基于项目规模、团队技能栈及性能要求，对于新项目，强烈推荐采用<strong>Web API + 前端框架</strong>的组合，它能提供最佳性能、可维护性和扩展空间，完美契合复杂交互场景，立即尝试上述方案，彻底告别整页刷新，为用户带来更流畅的数据浏览体验！</p>
    <p>您在实现无刷新分页时遇到过哪些挑战？是性能瓶颈、分页控件定制还是滚动加载优化？欢迎分享您的实战经验或疑问，共同探讨更优解！</p>
</div>

加载中

Ajax 是什么? 如何创建一个 Ajax？ - JavaScript前端Web工程师

技术蛋老师

8.2万3499230

原视频地址