功能实现原理
ASP.NET结合ajax实现分页局部刷新的核心思路是，前端通过ajax向后台发送分页参数，后台根据参数查询对应的数据集合，再将数据和分页信息返回给前端，前端只更新展示数据的区域，不会触发整个页面的重新加载。
环境准备
首先需要在项目中引入jQuery库，用于简化ajax请求的编写，同时准备一个用于存储分页数据的数据库表，本文以用户信息表为例，表结构包含用户ID、用户名、年龄、注册时间四个字段。
前端页面实现
前端页面需要包含数据展示区域、分页导航区域，以及发送ajax请求的脚本逻辑，具体代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajax分页示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.data-table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
.data-table th, .data-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.data-table th {
background-color: #f2f2f2;
}
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination a {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
}
.pagination a.current {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<h2 style="text-align:center;">用户信息分页列表</h2>
<!-- 数据展示区域 -->
<div id="dataContainer">
<table class="data-table">
<thead>
<tr>
<th>用户ID</th>
<th>用户名</th>
<th>年龄</th>
<th>注册时间</th>
</tr>
</thead>
<tbody id="dataBody">
<!-- ajax返回的数据会填充到这里 -->
</tbody>
</table>
</div>
<!-- 分页导航区域 -->
<div class="pagination" id="paginationContainer">
<!-- 分页按钮会动态生成到这里 -->
</div>
<script type="text/javascript">
// 页面加载完成后默认加载第一页数据
$(function () {
loadPageData(1);
});
// 加载指定页的数据
function loadPageData(pageIndex) {
$.ajax({
url: "UserHandler.ashx", // 后台处理接口地址
type: "POST",
data: {
pageIndex: pageIndex, // 当前页码
pageSize: 10 // 每页显示条数
},
dataType: "json",
success: function (response) {
if (response.code === 0) {
renderData(response.data.list); // 渲染数据列表
renderPagination(response.data.pageIndex, response.data.totalPages); // 渲染分页导航
} else {
alert("加载数据失败：" + response.msg);
}
},
error: function () {
alert("请求后台接口失败");
}
});
}
// 渲染数据列表
function renderData(list) {
var html = "";
if (list.length === 0) {
html = "<tr><td colspan='4'>暂无数据</td></tr>";
} else {
for (var i = 0; i < list.length; i++) {
var item = list[i];
html += "<tr>";
html += "<td>" + item.UserId + "</td>";
html += "<td>" + item.UserName + "</td>";
html += "<td>" + item.Age + "</td>";
html += "<td>" + item.RegisterTime + "</td>";
html += "</tr>";
}
}
$("#dataBody").html(html);
}
// 渲染分页导航
function renderPagination(currentPage, totalPages) {
var html = "";
// 上一页按钮
if (currentPage > 1) {
html += "<a href='javascript:;' onclick='loadPageData(" + (currentPage - 1) + ")'>上一页</a>";
}
// 页码按钮
for (var i = 1; i <= totalPages; i++) {
if (i === currentPage) {
html += "<a href='javascript:;' class='current'>" + i + "</a>";
} else {
html += "<a href='javascript:;' onclick='loadPageData(" + i + ")'>" + i + "</a>";
}
}
// 下一页按钮
if (currentPage < totalPages) {
html += "<a href='javascript:;' onclick='loadPageData(" + (currentPage + 1) + ")'>下一页</a>";
}
$("#paginationContainer").html(html);
}
</script>
</body>
</html>后台接口实现
后台使用一般处理程序（ashx）接收前端请求，处理分页逻辑并返回数据，具体代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;
using System.Data.SqlClient;
namespace AjaxPaginationDemo
{
/// <summary>
/// 用户数据处理接口
/// </summary>
public class UserHandler : IHttpHandler
{
// 数据库连接字符串，根据实际环境修改
private string connStr = "Server=.;Database=TestDB;Uid=sa;Pwd=123456";
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string result = "";
try
{
// 获取前端传递的分页参数
int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
int pageSize = Convert.ToInt32(context.Request["pageSize"]);
if (pageIndex < 1) pageIndex = 1;
if (pageSize < 1) pageSize = 10;
// 查询数据总条数
int totalCount = GetTotalUserCount();
// 计算总页数
int totalPages = (int)Math.Ceiling((double)totalCount / pageSize);
if (pageIndex > totalPages) pageIndex = totalPages;
// 查询当前页的数据
List<UserInfo> userList = GetUserListByPage(pageIndex, pageSize);
// 构造返回结果
var response = new
{
code = 0,
msg = "success",
data = new
{
pageIndex = pageIndex,
pageSize = pageSize,
totalCount = totalCount,
totalPages = totalPages,
list = userList
}
};
JavaScriptSerializer serializer = new JavaScriptSerializer();
result = serializer.Serialize(response);
}
catch (Exception ex)
{
var errorResponse = new
{
code = -1,
msg = ex.Message,
data = (object)null
};
JavaScriptSerializer serializer = new JavaScriptSerializer();
result = serializer.Serialize(errorResponse);
}
context.Response.Write(result);
}
// 获取用户总条数
private int GetTotalUserCount()
{
int count = 0;
string sql = "SELECT COUNT(1) FROM UserInfo";
using (SqlConnection conn = new SqlConnection(connStr))
{
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
count = Convert.ToInt32(cmd.ExecuteScalar());
}
return count;
}
// 分页查询用户数据
private List<UserInfo> GetUserListByPage(int pageIndex, int pageSize)
{
List<UserInfo> list = new List<UserInfo>();
// 使用OFFSET FETCH分页，SQL Server 2012及以上版本支持
string sql = @"SELECT UserId, UserName, Age, RegisterTime
FROM UserInfo
ORDER BY UserId
OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY";
int offset = (pageIndex - 1) * pageSize;
using (SqlConnection conn = new SqlConnection(connStr))
{
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.Parameters.AddWithValue("@Offset", offset);
cmd.Parameters.AddWithValue("@PageSize", pageSize);
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
UserInfo user = new UserInfo();
user.UserId = Convert.ToInt32(reader["UserId"]);
user.UserName = reader["UserName"].ToString();
user.Age = Convert.ToInt32(reader["Age"]);
user.RegisterTime = Convert.ToDateTime(reader["RegisterTime"]).ToString("yyyy-MM-dd HH:mm:ss");
list.Add(user);
}
}
return list;
}
public bool IsReusable
{
get { return false; }
}
}
// 用户信息实体类
public class UserInfo
{
public int UserId { get; set; }
public string UserName { get; set; }
public int Age { get; set; }
public string RegisterTime { get; set; }
}
}注意事项
- 前端ajax请求的url地址需要和实际后台接口地址保持一致，如果接口部署在其他路径需要做对应修改。
- 数据库连接字符串需要根据实际的数据库环境调整，确保能够正常连接数据库。
- 分页查询的SQL语句如果使用低版本SQL Server，需要替换成对应的分页写法，比如使用ROW_NUMBER()函数实现分页。
- 前端分页导航的样式可以根据实际需求调整，本文提供的是基础样式，可适配大多数场景。
功能测试
将前端页面和后台接口部署到IIS或者ASP.NET开发服务器中，访问前端页面，点击分页导航的不同页码，可以看到只有数据区域的内容发生变化，页面其他部分不会刷新，说明ajax分页局部刷新功能已经实现成功。