ASP.NET结合jQuery与Ajax实现无刷新分页的完整示例

作者:键盘侠时间:2026-10-27 22:08:01浏览:558

本文详细介绍如何在ASP.NET中使用jQuery、Ajax和Json技术实现网页数据的无刷新分页功能。通过前端jQuery插件配置与后端C#代码处理,演示了如何构建分页控件、发起异步请求并动态更新表格数据,适用于需要提升用户体验的Web开发场景。

前端页面结构与jQuery配置

具体实现代码如下所示:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery+Ajax+Json分页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link href="Styles/tablecloth.css" rel="stylesheet" type="text/css" />
<link href="Styles/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.pagination.js"></script>
<script type="text/javascript">
var pageIndex = 0; //页面索引初始值
var pageSize = 10; //每页显示条数初始化,修改显示条数,修改这里即可
$(function () {
InitTable(0); //Load事件,初始化表格数据,页面索引为0(第一页)
//分页,PageCount是总条目数,这是必选参数,其它参数都是可选
$("#Pagination").pagination(<%=pageCount %>, {
callback: PageCallback,
prev_text: '上一页', //上一页按钮里text
next_text: '下一页', //下一页按钮里text
items_per_page: pageSize, //显示条数
num_display_entries: 6, //连续分页主体部分分页条目数
current_page: pageIndex, //当前页索引
num_edge_entries: 2 //两侧首尾分页条目数
        });
//翻页调用
 function PageCallback(index, jq) {
 InitTable(index);
 }
//请求数据
 function InitTable(pageIndex) {
 $.ajax({
 type: "POST",
 dataType: "json",
 url: 'SupplyAJAX.aspx', //提交到一般处理程序请求数据
 data: "type=show&random=" + Math.random() + "&pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, //提交两个参数:pageIndex(页面索引),pageSize(显示条数) 
 error: function () { alert('error data'); }, //错误执行方法 
 success: function (data) {
 $("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变)
 var json = data; //数组 
 var html = "";
 $.each(json.data, function (index, item) {
 //循环获取数据 
 var id = item.Id;
 var name = item.Name;
 var sex = item.Sex;
 html += "<tr><td>" + id + "</td><td>" + name + "</td><td>" + sex + "</td></tr>";
 });
 $("#Result").append(html); //将返回的数据追加到表格
 }
 });
 }
 }); 
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <table id="Result" cellspacing="0" cellpadding="0">
 <tr>
 <th>
 编号
 </th>
 <th>
 姓名
 </th>
 <th>
 性别
 </th>
 </tr>
 </table>
 <div id="Pagination">
 </div>
 </form>
</body>
</html>

后端数据获取与页面加载处理

后端C#代码实现如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Net;
using System.IO;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class AjaxJson : System.Web.UI.Page
{
 public string pageCount = string.Empty; //总条目数
protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 string url = "/SupplyAJAX.aspx";
 string strResult = GetRequestJsonString(url, "type=getcount");
 pageCount = strResult.ToString();
 }
 }
#region 后台获取ashx返回的数据
 /// <summary>
 /// 后台获取ashx返回的数据
 /// </summary>
 /// <param name="relativePath">地址</param>
 /// <param name="data">参数</param>
 /// <returns></returns>
 public static string GetRequestJsonString(string relativePath, string data)
 {
 string requestUrl = GetRequestUrl(relativePath, data);
try
 {
 WebRequest request = WebRequest.Create(requestUrl);
 request.Method = "GET";
StreamReader jsonStream = new StreamReader(request.GetResponse().GetResponseStream());
 string jsonObject = jsonStream.ReadToEnd();
return jsonObject;
 }
 catch
 {
 return string.Empty;
 }
 }
public static string GetRequestUrl(string relativePath, string data)
 {
 string absolutePath = HttpContext.Current.Request.Url.AbsoluteUri;
 string hostNameAndPort = HttpContext.Current.Request.Url.Authority;
 string applicationDir = HttpContext.Current.Request.ApplicationPath;
 StringBuilder sbRequestUrl = new StringBuilder();
 sbRequestUrl.Append(absolutePath.Substring(0, absolutePath.IndexOf(hostNameAndPort)));
 sbRequestUrl.Append(hostNameAndPort);
 sbRequestUrl.Append(applicationDir);
 sbRequestUrl.Append(relativePath);
 if (!string.IsNullOrEmpty(data))
 {
 sbRequestUrl.Append("?");
 sbRequestUrl.Append(data);
 }
 return sbRequestUrl.ToString();
 }
 #endregion 
}

Ajax请求处理与数据序列化

处理Ajax请求的后台代码示例:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
//新增
using System.Web.Script.Serialization;
using System.Text;
public partial class SupplyAJAX : System.Web.UI.Page
{
 protected static List<Student> StudentList = new List<Student>();
 protected static int RecordCount = 0;
 protected static DataTable dt = CreateDT();
 protected void Page_Load(object sender, EventArgs e)
 {
 switch (Request["type"])
 {
 case "show":
 #region 分页配置
 //具体的页面数
 int pageIndex;
 int.TryParse(Request["pageIndex"], out pageIndex);
 //页面显示条数
 int PageSize = Convert.ToInt32(Request["pageSize"]);
 if (pageIndex == 0)
 {
 pageIndex = 1;
 }
 #endregion 
 DataTable PagedDT = GetPagedTable(dt, pageIndex, PageSize);
 List<Student> list = new List<Student>();
 foreach (DataRow dr in PagedDT.Rows)
 {
 Student c = new Student();
 c.Id = (Int32)dr["Id"];
 c.Name = dr["Name"].ToString();
 c.Sex = dr["Sex"].ToString();
 list.Add(c); 
 }
 string json = new JavaScriptSerializer().Serialize(list);//这个很关键,否则error 
 StringBuilder Builder = new StringBuilder();
 Builder.Append("{");
 Builder.Append("\"recordcount\":" + RecordCount + ",");
 Builder.Append("\"data\":");
 Builder.Append(json);
 Builder.Append("}");
 Response.ContentType = "application/json";
 Response.Write(Builder.ToString());
 break;
 case "getcount":
 Response.Write(dt.Rows.Count);
 break;
 case "add":
 break;
 case "update":
 break;
 case "delete":
 break;
 }
 Response.End();
 }
#region 模拟数据
 private static DataTable CreateDT()
 {
 DataTable dt = new DataTable();
 dt.Columns.Add(new DataColumn("Id", typeof(int)) { DefaultValue = 0 });
 dt.Columns.Add(new DataColumn("Name", typeof(string)) { DefaultValue = "1" });
 dt.Columns.Add(new DataColumn("Sex", typeof(string)) { DefaultValue = "男" });
 for (int i = 1; i <= 1000; i++)
 {
 dt.Rows.Add(i, "张三" + i.ToString().PadLeft(4, '0'));
 }
 RecordCount = dt.Rows.Count;
 return dt;
 }
 #endregion
/// <summary> 
 /// 对DataTable进行分页,起始页为1 
 /// </summary> 
 /// <param name="dt"></param> 
 /// <param name="PageIndex"></param> 
 /// <param name="PageSize"></param> 
 /// <returns></returns> 
 public static DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize) 
 { 
 if (PageIndex == 0) 
 return dt; 
 DataTable newdt = dt.Copy(); 
 newdt.Clear(); 
 int rowbegin = (PageIndex - 1) * PageSize; 
 int rowend = PageIndex * PageSize; 
 if (rowbegin >= dt.Rows.Count) 
 return newdt; 
 if (rowend > dt.Rows.Count) 
 rowend = dt.Rows.Count; 
 for (int i = rowbegin; i <= rowend - 1; i++) 
 { 
 DataRow newdr = newdt.NewRow(); 
 DataRow dr = dt.Rows[i]; 
 foreach (DataColumn column in dt.Columns) 
 { 
 newdr[column.ColumnName] = dr[column.ColumnName]; 
 } 
 newdt.Rows.Add(newdr); 
 } 
 return newdt; 
 } 
 /// <summary> 
 /// 获取总页数 
 /// </summary> 
 /// <param name="sumCount">结果集数量</param> 
 /// <param name="pageSize">页面数量</param> 
 /// <returns></returns> 
 public static int getPageCount(int sumCount, int pageSize) 
 { 
 int page = sumCount / pageSize; 
 if (sumCount % pageSize > 0) 
 { 
 page = page + 1;
 } 
 return page; 
 }
public struct Student
 {
 public int Id;
 public string Name;
 public string Sex;
 } 
}
作者最新文章