本文介绍在ASP.NET环境中，通过后端C#代码获取分页参数，并结合JavaScript在前端动态生成分页条的方法。核心逻辑包括利用jQuery创建分页UI，通过URL参数传递当前页码与搜索条件，实现无刷新或简单跳转的分页交互，适用于基础Web应用开发。
后端C#代码初始化分页参数
在Default.aspx.cs文件中，首先定义了分页相关的核心属性。其中pageIndex用于记录当前页码，默认值为1；pageSize设定每页显示的数据条数，默认为10；pageCount表示总页数，此处示例设为100；name变量用于存储搜索关键词，初始为空字符串。在Page_Load事件中，通过Request.QueryString获取URL中的pageIndex参数并转换为整数赋值给pageIndex，同时获取name参数赋值给name变量，完成初始数据的加载。
protected int pageIndex = 1;
protected int pageSize = 10;
protected int pageCount = 100;
protected string name = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
int.TryParse(Request.QueryString["pageIndex"],out pageIndex);
name=Request.QueryString["name"];
}
在Default.aspx.cs文件中，继续处理页面逻辑。这部分代码主要涉及后端对页面状态的管理，确保在页面加载时能正确解析用户传递的分页参数和搜索条件，为前端生成分页条提供必要的数据支持。
前端HTML结构构建
在HTML的Body部分，构建了页面的基本结构。首先包含一个文本输入框，ID为txtName，其value属性绑定后端的name变量，用于显示或输入搜索关键词。接着定义了一个ID为PageBar的div容器，该容器将作为JavaScript动态生成分页条的挂载点，初始状态下为空，等待JS脚本填充内容。
名称:<input type="text" id="txtName" value="<%=name %>" />
<div id="PageBar">
JavaScript动态生成分页条逻辑
在JavaScript部分，首先引入jquery-1.4.1.js库以支持DOM操作。随后定义三个全局变量pagecount、pageindex和pageSize，分别通过服务端渲染的<%=pageCount %>、<%=pageIndex %>和<%=pageSize %>获取后端传递的分页数据。在页面加载完成后，调用createPageBar函数，传入当前页码和总页数，触发分页条的生成逻辑。
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var pagecount=<%=pageCount %>;
var pageindex=<%=pageIndex %>;
var pageSize=<%=pageSize %>;
$(function(){
createPageBar(pageindex,pagecount);
})
//生成分页条
function createPageBar(pageindex,pageCount){
//拿到存放分页条的div并清空
var pageBarObj=$('#PageBar');
pageBarObj.html('');
//判断给定页码
if(pageindex<1){
pageindex=1;
}
if(pageindex>pageCount){
pageindex=pagecount;
}
//首页与上一页
$('<a href="javaScript:void(0)">首页</a> ').appendTo(pageBarObj).click(function(){
goPage(1);
});
if(pageindex>1){
$('<a href="javaScript:void(0)">上一页</a> ').appendTo(pageBarObj).click(function(){
goPage(pageindex-1);
});
}
//数字分页
var start=pageindex-4;
if(start<1){
start=1;
}
var end=start+9;
if(end>pagecount){
end=pagecount;
}
for(var i=start;i<=end;i++){
$(' <a href="javascript:void(0)">['+i+']</a> ').appendTo(pageBarObj).click(function(){
goPage(i);
});
}
//下一页与尾页
if(pageindex<pagecount){
$('<a href="javaScript:void(0)">下一页</a> ').appendTo(pageBarObj).click(function(){
goPage(pageindex+1);
});
}
$('<a href="javaScript:void(0)">尾页</a>').appendTo(pageBarObj).click(function(){
goPage(pagecount);
});
}
//去跳转
function goPage(pageindex){
var name=$('#txtName').val();
window.location="/Default.aspx?pageindex="+pageindex+"&name="+name;
}
</script>createPageBar函数负责生成分页条的具体实现。首先获取ID为PageBar的div元素并清空其内容。接着判断页码的有效性，若页码超出范围则进行修正。随后构建分页条的HTML结构，包括首页、上一页、页码数字、下一页和末页按钮。每个按钮绑定相应的事件处理函数，如goPage用于跳转指定页码。goPage函数获取当前搜索关键词，并通过window.location将页面重定向到Default.aspx，同时携带新的pageindex和name参数，实现分页与搜索条件的同步更新。