ASP.NET 是一款开放源码的服务器端 Web 应用程序框架，提供了丰富的功能和强大的工具，为开发者提供了高效的方式来构建、部署和维护 Web 应用程序。无刷新分页是其中一个常见需求，本文将通过两个示例来演示如何实现ASP.NET无刷新分页功能。
示例1：使用AJAX实现无刷新分页
步骤1：创建数据库表和数据
CREATE TABLE [dbo].[Users](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NOT NULL,
[Age] [int] NOT NULL,
[Gender] [nvarchar](10) NOT NULL,
[Address] [nvarchar](100) NOT NULL
)
步骤2：创建数据访问类和方法
public class UserData
{
public int ID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Gender { get; set; }
public string Address { get; set; }
}
public class UserDA
{
public static List<UserData> GetUserList(int pageIndex, int pageSize)
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select top (@pageSize) * from (select row_number() over (order by ID) as rownumber, ID, Name, Age, Gender, Address from Users) as t where rownumber > (@pageIndex-1)*@pageSize order by ID";
cmd.Parameters.AddWithValue("@pageSize", pageSize);
cmd.Parameters.AddWithValue("@pageIndex", pageIndex);
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
List<UserData> userList = new List<UserData>();
while (reader.Read())
{
UserData user = new UserData();
user.ID = Convert.ToInt32(reader["ID"]);
user.Name = reader["Name"].ToString();
user.Age = Convert.ToInt32(reader["Age"]);
user.Gender = reader["Gender"].ToString();
user.Address = reader["Address"].ToString();
userList.Add(user);
}
return userList;
}
}
}
public static int GetUserCount()
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select count(*) from Users";
con.Open();
return Convert.ToInt32(cmd.ExecuteScalar());
}
}
}
}
步骤3：编写前台页面
<!DOCTYPE html>
<html>
<head>
<title>ASP.NET分页无刷新实例</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
LoadData(1);
});
function LoadData(pageIndex) {
var pageSize = 10;
$.ajax({
type: "POST",
url: "Default.aspx/GetUserList",
data: '{pageIndex: ' + pageIndex + ', pageSize: ' + pageSize + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var html = "";
for (var i = 0; i < data.d.length; i++) {
html += "<tr><td>" + data.d[i].Name + "</td><td>" + data.d[i].Age + "</td><td>" + data.d[i].Gender + "</td><td>" + data.d[i].Address + "</td></tr>";
}
$("#userTableBody").html(html);
}
});
}
</script>
</head>
<body>
<div class="container">
<h1>ASP.NET分页无刷新实例</h1>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody id="userTableBody">
</tbody>
</table>
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="LoadData(1);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="LoadData(2);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="LoadData(3);">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="LoadData(4);">4</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);" onclick="LoadData(5);">5</a></li>
</ul>
</nav>
</div>
</body>
</html>
步骤4：编写后台代码
[WebMethod]
public static List<UserData> GetUserList(int pageIndex, int pageSize)
{
List<UserData> userList = UserDA.GetUserList(pageIndex, pageSize);
return userList;
}
示例2：使用Bootstrap和jQuery实现无刷新分页
步骤1：创建数据库表和数据
与示例1相同
步骤2：创建数据访问类和方法
与示例1相同
步骤3：编写前台页面
<!DOCTYPE html>
<html>
<head>
<title>ASP.NET无刷新分页</title>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
LoadData(1);
});
function LoadData(pageIndex) {
var pageSize = 10;
$.ajax({
type: "POST",
url: "Default.aspx/GetUserList",
data: '{pageIndex: ' + pageIndex + ', pageSize: ' + pageSize + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var html = "";
for (var i = 0; i < data.d.length; i++) {
html += "<div class='panel panel-default'><div class='panel-body'><p>姓名：" + data.d[i].Name + "</p><p>年龄：" + data.d[i].Age + "</p><p>性别：" + data.d[i].Gender + "</p><p>地址：" + data.d[i].Address + "</p></div></div>";
}
$("#userList").html(html);
}
});
}
function setPage(pageIndex) {
var pageCount = 5;
if ($("#btnPrefab").length <= 0) return;
var goIndex = 1;
if (pageIndex < 1) goIndex = 1;
else if (pageIndex > pageCount) goIndex = pageCount;
else {
goIndex = pageIndex;
}
var html = "";
if (goIndex != 1)
html += "<li><a href='javascript:void(0);' onclick='LoadData(1);'>首页</a></li>";
else
html += "<li class='disabled'><a href='javascript:void(0);'>首页</a></li>";
for (var i = 1; i <= pageCount; i++) {
if (i == pageIndex)
html += "<li class='active'><a href='javascript:void(0);'>" + i + "</a></li>";
else
html += "<li><a href='javascript:void(0);' onclick='LoadData(" + i + ");'>" + i + "</a></li>";
}
if (goIndex != pageCount)
html += "<li><a href='javascript:void(0);' onclick='LoadData(" + pageCount + ");'>末页</a></li>";
else
html += "<li class='disabled'><a href='javascript:void(0);'>末页</a></li>";
$("#btnPrefab").html(html);
}
</script>
</head>
<body>
<div class="container">
<h1>ASP.NET无刷新分页</h1>
<div id="userList"></div>
<ul id="btnPrefab" class="pagination"></ul>
</div>
</body>
</html>
步骤4：编写后台代码
与示例1相同
以上就是两个例子的代码实现，可以根据自己的需求选择其中一种实现无刷新分页功能。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net 无刷新分页实例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 