AJAX分页的代码(后台asp.net)
2023-06-13 09:14:26 时间
在ASP.NET中有很多数据展现的控件，比如用的最多的GridView，它同时也自带了分页的功能。但是我们知道用GridView来显示数据，如果没有禁用ViewState，页面的大小会是非常的大的。而且平时我们点击首页，下一页，上一页，尾页这些功能都是会引起页面回发的，也就是需要完全跟服务器进行交互，来回响应的时间，传输的数据量都是很大的。AJAX的分页可以很好的解决这些问题。
开发的坏境是：jQueryAJAX+Northwind。
具体的步骤：
SearchCustomer.aspx:
复制代码代码如下:
开发的坏境是：jQueryAJAX+Northwind。
具体的步骤：
SearchCustomer.aspx:
<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
<scripttype="text/javascript">
varpageIndex=0;
varpageSize=10;
$(function(){
$("#btnSearch").click(function(){
/*
name顾客的名字,文本框中输入的内容
0表示的是第1页
10每页的大小
*/
varname=$("#txtSearch").val();
pageIndex=0;
AjaxGetData(name,pageIndex,pageSize);
});
});
functionAjaxGetData(name,index,size){
$.ajax({
url:"jQueryPaging.aspx",
type:"Get",
data:"Name="+name+"&PageIndex="+index+"&PageSize="+size,
dataType:"json",
success:function(data){
varhtmlStr="";
htmlStr+="<table>"
htmlStr+="<thead>"
htmlStr+="<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>"
htmlStr+="</thead>";
htmlStr+="<tbody>"
for(vari=0;i<data.Customers.length;i++){
htmlStr+="<tr>";
htmlStr+="<td>"+data.Customers[i].CustomerID+"</td>"
+"<td>"+data.Customers[i].CompanyName+"</td>"
+"<td>"+data.Customers[i].ContactName+"</td>"
+"<td>"+data.Customers[i].ContactTitle+"</td>"
+"<td>"+data.Customers[i].Address+"</td>"
+"<td>"+data.Customers[i].City+"</td>"
htmlStr+="</tr>";
}
htmlStr+="</tbody>";
htmlStr+="<tfoot>";
htmlStr+="<tr>";
htmlStr+="<tdcolspan="6">";
htmlStr+="<span>共有记录"+data.Count+";共<spanid="count">"+(data.Count%10==0?parseInt(data.Count/10):parseInt(data.Count/10+1))+"</span>页"+"</span>";
htmlStr+="<ahref="javascript:void"onclick="GoToFirstPage()"id="aFirstPage">首页</a> ";
htmlStr+="<ahref="javascript:void"onclick="GoToPrePage()"id="aPrePage">前一页</a> ";
htmlStr+="<ahref="javascript:void"onclick="GoToNextPage()"id="aNextPage">后一页</a> ";
htmlStr+="<ahref="javascript:void"onclick="GoToEndPage()"id="aEndPage">尾页</a> ";
htmlStr+="<inputtype="text"/><inputtype="button"value="跳转"onclick="GoToAppointPage(this)"/>";
htmlStr+="</td>";
htmlStr+="</tr>";
htmlStr+="</tfoot>";
htmlStr+="</table>";
$("#divSearchResult").html(htmlStr);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
});
}
//首页
functionGoToFirstPage(){
pageIndex=0;
AjaxGetData($("#txtSearch").val(),pageIndex,pageSize);
}
//前一页
functionGoToPrePage(){
pageIndex-=1;
pageIndex=pageIndex>=0?pageIndex:0;
AjaxGetData($("#txtSearch").val(),pageIndex,pageSize);
}
//后一页
functionGoToNextPage(){
if(pageIndex+1<parseInt($("#count").text())){
pageIndex+=1;
}
AjaxGetData($("#txtSearch").val(),pageIndex,pageSize);
}
//尾页
functionGoToEndPage(){
pageIndex=parseInt($("#count").text())-1;
AjaxGetData($("#txtSearch").val(),pageIndex,pageSize);
}
//跳转
functionGoToAppointPage(e){
varpage=$(e).prev().val();
if(isNaN(page)){
alert("请输入数字!");
}
else{
vartempPageIndex=pageIndex;
pageIndex=parseInt($(e).prev().val())-1;
if(pageIndex<0||pageIndex>=parseInt($("#count").text())){
pageIndex=tempPageIndex;
alert("请输入有效的页面范围!");
}
else{
AjaxGetData($("#txtSearch").val(),pageIndex,pageSize);
}
}
}
</script>
数据的传输用的JSON格式。大家知道JSON是轻量级别的数据传输。前台的展现时用的table。这样生成的HTML代码很简洁。
HTML如下：
<div>
<inputtype="text"id="txtSearch"/>
<inputtype="button"id="btnSearch"value="Search"/>
</div>
<divid="divSearchResult">
</div>
jQueryPaging.aspx页面的CS代码如下：
publicpartialclassjQueryPaging:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
Int32pageIndex=Int32.MinValue;
Int32pageSize=Int32.MinValue;
Stringname=String.Empty;
JavaScriptSerializerjss=newJavaScriptSerializer();
if(Request["Name"]!=null)
{
name=Request["Name"].ToString();
if(Request["PageIndex"]!=null)
{
pageIndex=Int32.Parse(Request["PageIndex"].ToString());
pageSize=Request["PageSize"]!=null?Int32.Parse(Request["PageSize"].ToString()):10;
IList<Customer>customersLists=newList<Customer>();
Customerc=null;
DataSetds=LookDataFromDB(name,pageIndex,pageSize);
foreach(DataRowrowinds.Tables[0].Rows)
{
c=newCustomer();
c.CustomerID=row["CustomerID"].ToString();
c.CompanyName=row["CompanyName"].ToString();
c.ContactName=row["ContactName"].ToString();
c.ContactTitle=row["ContactTitle"].ToString();
c.Address=row["Address"].ToString();
c.City=row["City"].ToString();
customersLists.Add(c);
}
if(customersLists.Count>0)
{
Response.Write("{\"Count\":"+ds.Tables[1].Rows[0][0]+",\"Customers\":"+jss.Serialize(customersLists)+"}");
Response.End();
}
}
}
}
privateDataSetLookDataFromDB(stringname,intpageIndex,intpageSize)
{
SqlConnectionconn=newSqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
conn.Open();
SqlCommandcmd=newSqlCommand();
cmd.Connection=conn;
cmd.CommandType=CommandType.StoredProcedure;
cmd.CommandText="SearchCustomerByName";
cmd.Parameters.Add(newSqlParameter("@name",name));
cmd.Parameters.Add(newSqlParameter("@pageIndex",pageIndex));
cmd.Parameters.Add(newSqlParameter("@pageSize",pageSize));
SqlDataAdapterdataAdapter=newSqlDataAdapter(cmd);
DataSetds=newDataSet();
try
{
dataAdapter.Fill(ds);
}
catch(Exception)
{
}
finally
{
if(dataAdapter!=null)
{
dataAdapter.Dispose();
}
if(cmd!=null)
{
cmd.Dispose();
}
if(conn!=null)
{
conn.Dispose();
}
}
returnds;
}
}
还有我们在CS中定义的Model类：
publicclassCustomer
{
publicStringCustomerID{get;set;}
publicStringCompanyName{get;set;}
publicStringContactName{get;set;}
publicStringContactTitle{get;set;}
publicStringAddress{get;set;}
publicStringCity{get;set;}
}
SearchCustomerByName存储过程的代码如下：
SETANSI_NULLSON
GO
SETQUOTED_IDENTIFIERON
GO
CreatePROCEDURESearchCustomerByName
@namenvarchar(30),
@pageIndexint,
@pageSizeint
AS
BEGIN
SETNOCOUNTON;
selectt.CustomerID,t.CompanyName,t.ContactName,t.ContactTitle,t.Address,t.Cityfrom
(
selectRow_Number()over(orderbyCustomerID)ASRowNum,*fromCustomerswhereContactNamelike"%"+@name+"%"
)t
wheret.RowNumbetween@pageIndex*10+1and(@pageIndex+1)*10
selectcount(*)fromCustomers
whereContactNamelike"%"+@name+"%"
END
GO
具体的效果，大家可以把上述的代码响应的复制到VS中和数据库中，进行演示。
这个版本其实很多的功能点都是没有考虑到的，仅仅是个示例，大家可以在自己的实际项目中修改以上的功能来满足自己的需求。
相关文章
- [.NET控件]Telerik RadControls for ASP.NET AJAX 2008 Q1 net 2.0 Web.UI「建议收藏」
- ASP.NET MVC商城网站后台管理系统
- .netLinux下部署ASP.NET环境指南（linux部署asp）
- .net安装 Linux 上的 ASP.NET 环境（linux安装asp）
- .net利用MSSQL连接ASP.NET的办法探索（mssql 连接asp）
- 应用ASP应用深度运用MSSQL语句（mssql 语句 asp）
- ASP.NET使用正则表达式屏蔽垃圾信息
- asp.net“服务器应用程序不可用”解决方法
- asp.net用户控件中图片及样式问题
- asp.net(C#)动态添加非ASP的标准html控件（如添加Script标签）
- ASP.NET前台javascript与后台代码调用
- asp.net页面间传值方法小结
- javascript与asp.net(c#)互相调用方法
- JQuery运用ajax注册用户实例(后台asp.net)
- Asp.net开发常用的51个非常实用的代码
- 鼠标右击事件代码(asp.net后台)
- 如何限制asp.net中上传文件的大小的代码
- 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
- Asp.net请求处理之管道处理介绍
- ASP.NET向Javascript传递变量两种实现方法
- ASP.NET(VB)写的后台发送短信实现代码
- asp.net利用Ajax和Jquery在前台向后台传参数并返回值的实例
- asp.net后台关闭当前页面并传值的两种方法
- jquery.Ajax()方法调用Asp.Net后台的方法解析
- ASP.NET中MVC从后台控制器传递数据到前台视图的方式
- asp.net使用Repeater控件中的全选进行批量操作实例