提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

asp.net使用js分页实现异步加载数据

NetJSASP数据异步 实现 使用 加载
2023-06-13 09:15:24 时间
1、准备工作

引入“jquery-1.8.3.min.js”，AjaxPro.2.dll”：用于前台js调用后台方法。

2、Web.config的配置
复制代码代码如下:

<?xmlversion="1.0"encoding="utf-8"?>
<configuration>
<connectionStrings>
<clear/>
<!--数据库链接-->
<addname="connSwtLoginLog"connectionString="Server=DUWEI\SQL2005;Database=SwtLoginLog;userid=sa;password=111111;ConnectTimeout=120;pooling=true;minpoolsize=5;maxpoolsize=10"/>
</connectionStrings>
<system.web>
<compilationdebug="true"targetFramework="4.0"/>
<!--页面调用后台方法-->
<httpHandlers>
<addverb="POST,GET"path="ajaxpro/*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>
</configuration>

3、目录结构
 

下面就直接上代码了。

4、Login.aspx页面代码
复制代码代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Login.aspx.cs"Inherits="AspNet.Login"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="js/jquery-1.8.3.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
functioninitTable(dt){
varstr="<tableborder="1px">"
+"<tr>"
+"<td>"
+"LoginID"
+"</td>"
+"<td>"
+"SwtID"
+"</td>"
+"<td>"
+"UserName"
+"</td>"
+"<td>"
+"IP"
+"</td>"
+"<td>"
+"Address"
+"</td>"
+"<td>"
+"LogTime"
+"</td>"
+"<td>"
+"LogType"
+"</td>"
+"</tr>";
for(vari=0;i<dt.Rows.length;i++){
str=str+"<tr>"
+"<td>"
+dt.Rows[i]["LoginID"]
+"</td>"
+"<td>"
+dt.Rows[i]["SwtID"]
+"</td>"
+"<td>"
+dt.Rows[i]["UserName"]
+"</td>"
+"<td>"
+dt.Rows[i]["IP"]
+"</td>"
+"<td>"
+dt.Rows[i]["Address"]+dt.Rows[i]["Address2"]
+"</td>"
+"<td>"
+dt.Rows[i]["LogTime"]
+"</td>"
+"<td>"
+dt.Rows[i]["LogType"]
+"</td>"
+"</tr>"
}
str=str+"</table>";
$("#d1").html(str);
}
functionfirtPage(page){
$("#pageNo").text(page);
vardt=AspNet.Login.FindDate(page).value;
initTable(dt);
}
//定义一个当前页初始为1
varpageNo=1;
//总页数
vartotalPage=<%=pageCount%>;
functionshowContent(op){
if(op=="first"){
pageNo=1;
}
elseif(op=="previous"){
if(pageNo>1)
pageNo-=1;
else
pageNo=1;
}
elseif(op=="next"){
if(pageNo<totalPage-1)
pageNo+=1;
else
pageNo=totalPage-1;
}
elseif(op=="last"){
pageNo=totalPage-1;
}
elseif(op=="jump"){
varjump=$("#jump").val();
if(jump<1||jump>totalPage){
pageNo=1;
}else{
pageNo=jump;
}
}
else{
pageNo=1;
}
firtPage(pageNo);
}
$(function(){
showContent("first");
});
</script>
</head>
<body>
<formid="form1"runat="server">
<divid="d1"align="center"></div>
<divalign="center">
<spanid="sp_ShowContent">
第<labelid="pageNo"></label>页|共<%=pageCount%>页
|<aonclick="showContent("first");"href="javascript:void(0);">首页</a>
|<aonclick="showContent("previous");"href="javascript:void(0);">上一页</a>
|<aonclick="showContent("next");"href="javascript:void(0);">下一页</a>
|<aonclick="showContent("last");"href="javascript:void(0);">尾页</a>
|跳到<inputid="jump"/><aonclick="showContent("jump");"href="javascript:void(0);">GO</a>
</span>
</div>
</form>
</body>
</html>

后台代码
复制代码代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Data;
usingAspNet.service;

namespaceAspNet
{
publicpartialclassLogin:System.Web.UI.Page
{
//测试用没页2条数据
publicintpageSize=2;
publicintpageCount;
publicLoginLogServicelogService=newLoginLogService();
protectedvoidPage_Load(objectsender,EventArgse)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Login));
if(!IsPostBack)
{
pageCount=logService.PageCount(pageSize);
}
}
//AjaxPro具体使用方法可以网上例子很多
[AjaxPro.AjaxMethod]
publicDataTableFindDate(intcurrentPage)
{
returnlogService.FindDate(pageSize,currentPage);
}
}
}

5、LoginLogService.cs
复制代码代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Data;
usingSystem.Data.SqlClient;

namespaceAspNet.service
{
publicclassLoginLogService
{
publicDataTableFindDate(intpageSize,intcurrentPage)
{

stringsql="SELECTLoginID,SwtID,UserName,IP,Address,Address2,LogTime,LogTypeFROM("
+"SELECT*,ROW_NUMBER()OVER(ORDERBYLoginID)AScolumnNumFROMdbo.LoginLog)a"
+"WHEREa.columnNumBETWEEN@beginAND@end";
SqlParameter[]paras=newSqlParameter[]{newSqlParameter("@begin",pageSize*(currentPage-1)+1),
newSqlParameter("@end",pageSize*currentPage)};
DataTabledt=DBHelper.GetDataSet(sql,paras);
returnDBHelper.GetDataSet(sql,paras);
}
publicintPageCount(intpageSize)
{
stringsql="SELECTCOUNT(1)FROMdbo.LoginLog";
introwCount=int.Parse(DBHelper.GetDataSet(sql).Rows[0][0].ToString());
returnrowCount%pageSize==0?rowCount/pageSize:rowCount/pageSize+1;
}
}
}

6、Utils放着DBHelper.cs
复制代码代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;
usingSystem.Data;
usingSystem.Data.SqlClient;
usingSystem.Configuration;

namespaceAspNet
{
publicstaticclassDBHelper
{

privatestaticSqlConnectionconnection;
publicstaticSqlConnectionConnection
{
get
{
stringconnectionString=ConfigurationManager.ConnectionStrings["connSwtLoginLog"].ConnectionString;
if(connection==null)
{
connection=newSqlConnection(connectionString);
connection.Open();
}
elseif(connection.State==System.Data.ConnectionState.Closed)
{
connection.Open();
}
elseif(connection.State==System.Data.ConnectionState.Broken)
{
connection.Close();
connection.Open();
}
returnconnection;
}
}

//ExecuteNonQuery方法是用来执行insert、delete、update语句的,返回的是影响的行数
publicstaticintExecuteCommand(stringsafeSql)
{
SqlCommandcmd=newSqlCommand(safeSql,Connection);
intresult=cmd.ExecuteNonQuery();
returnresult;
}

publicstaticintExecuteCommand(stringsql,paramsSqlParameter[]values)
{
SqlCommandcmd=newSqlCommand(sql,Connection);
cmd.Parameters.AddRange(values);
returncmd.ExecuteNonQuery();
}


//ExecuteScalar()返回sql语句执行后的第一行第一列的值,object类型
publicstaticintGetScalar(stringsafeSql)
{
SqlCommandcmd=newSqlCommand(safeSql,Connection);
intresult=Convert.ToInt32(cmd.ExecuteScalar());
returnresult;
}

publicstaticintGetScalar(stringsql,paramsSqlParameter[]values)
{
SqlCommandcmd=newSqlCommand(sql,Connection);
cmd.Parameters.AddRange(values);
intresult=Convert.ToInt32(cmd.ExecuteScalar());
returnresult;
}

//ExecuteReader()返回一个Datareader对象，对象内容是为与命令匹配的所有行，通常用于读取数据
publicstaticSqlDataReaderGetReader(stringsafeSql)
{
SqlCommandcmd=newSqlCommand(safeSql,Connection);
SqlDataReaderreader=cmd.ExecuteReader();
returnreader;
}

publicstaticSqlDataReaderGetReader(stringsql,paramsSqlParameter[]values)
{
SqlCommandcmd=newSqlCommand(sql,Connection);
cmd.Parameters.AddRange(values);
SqlDataReaderreader=cmd.ExecuteReader();
returnreader;
}

publicstaticDataTableGetDataSet(stringsafeSql)
{
connection=Connection;
DataSetds=newDataSet();
SqlCommandcmd=newSqlCommand(safeSql,Connection);
SqlDataAdapterda=newSqlDataAdapter(cmd);
da.Fill(ds);
cmd.Parameters.Clear();
returnds.Tables[0];
}

publicstaticDataTableGetDataSet(stringsql,paramsSqlParameter[]values)
{
DataSetds=newDataSet();
SqlCommandcmd=newSqlCommand(sql,Connection);
cmd.Parameters.AddRange(values);
SqlDataAdapterda=newSqlDataAdapter(cmd);
da.Fill(ds);
cmd.Parameters.Clear();
returnds.Tables[0];
}

}
}

复制代码代码如下:
数据表结构：<precode_snippet_id="274427"snippet_file_name="blog_20140404_6_6418355"name="code"class="plain">CREATETABLE[dbo].[LoginLog](
[LoginID][int]IDENTITY(1,1)NOTNULL,
[SwtID][int]NULL,
[UserName][nvarchar](255)COLLATEChinese_PRC_CI_ASNULL,
[IP][nvarchar](20)COLLATEChinese_PRC_CI_ASNULL,
[Address][nvarchar](255)COLLATEChinese_PRC_CI_ASNULL,
[Address2][nvarchar](255)COLLATEChinese_PRC_CI_ASNULL,
[LogTime][datetime]NULL,
[LogType][int]NULLCONSTRAINT[DEFAULT_LoginLog_LogType]DEFAULT((1)),
CONSTRAINT[PK_LoginLog_LoginID]PRIMARYKEYCLUSTERED
(
[LoginID]ASC
)WITH(PAD_INDEX=OFF,IGNORE_DUP_KEY=OFF)ON[PRIMARY]
)ON[PRIMARY]</pre>
<pre></pre>
<precode_snippet_id="274427"snippet_file_name="blog_20140404_6_6418355"name="code"class="csharp"><precode_snippet_id="274427"snippet_file_name="blog_20140404_6_6418355"name="code"class="sql"><precode_snippet_id="274427"snippet_file_name="blog_20140404_6_6418355"></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>

</pre></pre>

相关文章