服务器之家

服务器之家 > 正文

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

时间:2019-12-03 11:48     来源/作者:ASP.NET教程网

1、准备工作 

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

2、Web.config的配置 

复制代码代码如下:


<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
<connectionStrings> 
<clear/> 
<!-- 数据库链接 --> 
<add name="connSwtLoginLog" connectionString="Server=DUWEI\SQL2005;Database=SwtLoginLog;user id=sa;password=111111;Connect Timeout=120;pooling=true;min pool size=5;max pool size=10"/> 
</connectionStrings> 
<system.web> 
<compilation debug="true" targetFramework="4.0" /> 
<!-- 页面调用后台方法 --> 
<httpHandlers> 
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> 
</httpHandlers> 
</system.web> 
</configuration> 


3、目录结构 
asp.net 使用js分页实现异步加载数据 

下面就直接上代码了。 

4、Login.aspx页面代码 

复制代码代码如下:


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

<!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></title> 
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function initTable(dt) { 
var str = '<table border="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 (var i = 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); 

function firtPage(page) { 
$("#pageNo").text(page); 
var dt = AspNet.Login.FindDate(page).value; 
initTable(dt); 

//定义一个当前页初始为1 
var pageNo = 1; 
//总页数 
var totalPage = <%=pageCount %>; 
function showContent(op) { 
if (op == "first") { 
pageNo = 1; 

else if (op == "previous") { 
if (pageNo > 1) 
pageNo -= 1; 
else 
pageNo = 1; 

else if (op == "next") { 
if (pageNo < totalPage - 1) 
pageNo += 1; 
else 
pageNo = totalPage - 1; 

else if (op == "last") { 
pageNo = totalPage - 1; 

else if(op=="jump"){ 
var jump = $("#jump").val(); 
if(jump<1 || jump>totalPage){ 
pageNo = 1; 
}else{ 
pageNo = jump; 


else { 
pageNo = 1; 

firtPage(pageNo); 

$(function () { 
showContent("first"); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="d1" align="center"></div> 
<div align="center"> 
<span id="sp_ShowContent"> 
第<label id="pageNo"></label>页|共<%=pageCount%>页 
|<a onclick="showContent('first');" href="javascript:void(0);">首页</a> 
|<a onclick="showContent('previous');" href="javascript:void(0);">上一页</a> 
|<a onclick="showContent('next');" href="javascript:void(0);">下一页</a> 
|<a onclick="showContent('last');" href="javascript:void(0);">尾页</a> 
|跳到<input id="jump"/><a onclick="showContent('jump');" href="javascript:void(0);">GO</a> 
</span> 
</div> 
</form> 
</body> 
</html> 


后台代码 

复制代码代码如下:


using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Data; 
using AspNet.service; 

namespace AspNet 

public partial class Login : System.Web.UI.Page 

//测试用 没页2条数据 
public int pageSize = 2; 
public int pageCount; 
public LoginLogService logService = new LoginLogService(); 
protected void Page_Load(object sender, EventArgs e) 

AjaxPro.Utility.RegisterTypeForAjax(typeof(Login)); 
if (!IsPostBack) 

pageCount = logService.PageCount(pageSize); 


//AjaxPro具体使用方法可以网上例子很多 
[AjaxPro.AjaxMethod] 
public DataTable FindDate(int currentPage) 

return logService.FindDate(pageSize, currentPage); 



5、LoginLogService.cs 

复制代码代码如下:


using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient; 

namespace AspNet.service 

public class LoginLogService 

public DataTable FindDate(int pageSize, int currentPage) 


string sql = "SELECT LoginID,SwtID,UserName,IP,Address,Address2,LogTime,LogType FROM ( " 
+ "SELECT * ,ROW_NUMBER() OVER(ORDER BY LoginID) AS columnNum FROM dbo.LoginLog ) a " 
+ "WHERE a.columnNum BETWEEN @begin AND @end"; 
SqlParameter[] paras = new SqlParameter[]{new SqlParameter("@begin",pageSize * (currentPage-1)+1), 
new SqlParameter("@end",pageSize * currentPage)}; 
DataTable dt = DBHelper.GetDataSet(sql, paras); 
return DBHelper.GetDataSet(sql, paras); 

public int PageCount(int pageSize) 

string sql = "SELECT COUNT(1) FROM dbo.LoginLog"; 
int rowCount = int.Parse(DBHelper.GetDataSet(sql).Rows[0][0].ToString()); 
return rowCount % pageSize == 0 ? rowCount / pageSize : rowCount / pageSize+1; 



6、Utils放着DBHelper.cs 

复制代码代码如下:


using System; 
using System.Collections.Generic; 
using System.Text; 
using System.Data; 
using System.Data.SqlClient; 
using System.Configuration; 

namespace AspNet 

public static class DBHelper 


private static SqlConnection connection; 
public static SqlConnection Connection 

get 

string connectionString = ConfigurationManager.ConnectionStrings["connSwtLoginLog"].ConnectionString; 
if (connection == null) 

connection = new SqlConnection(connectionString); 
connection.Open(); 

else if (connection.State == System.Data.ConnectionState.Closed) 

connection.Open(); 

else if (connection.State == System.Data.ConnectionState.Broken) 

connection.Close(); 
connection.Open(); 

return connection; 



//ExecuteNonQuery方法是用来执行insert、delete、update语句的,返回的是影响的行数 
public static int ExecuteCommand(string safeSql) 

SqlCommand cmd = new SqlCommand(safeSql, Connection); 
int result = cmd.ExecuteNonQuery(); 
return result; 


public static int ExecuteCommand(string sql, params SqlParameter[] values) 

SqlCommand cmd = new SqlCommand(sql, Connection); 
cmd.Parameters.AddRange(values); 
return cmd.ExecuteNonQuery(); 



//ExecuteScalar()返回sql语句执行后的第一行第一列的值,object类型 
public static int GetScalar(string safeSql) 

SqlCommand cmd = new SqlCommand(safeSql, Connection); 
int result = Convert.ToInt32(cmd.ExecuteScalar()); 
return result; 


public static int GetScalar(string sql, params SqlParameter[] values) 

SqlCommand cmd = new SqlCommand(sql, Connection); 
cmd.Parameters.AddRange(values); 
int result = Convert.ToInt32(cmd.ExecuteScalar()); 
return result; 


//ExecuteReader()返回一个Datareader对象,对象内容是为与命令匹配的所有行,通常用于读取数据 
public static SqlDataReader GetReader(string safeSql) 

SqlCommand cmd = new SqlCommand(safeSql, Connection); 
SqlDataReader reader = cmd.ExecuteReader(); 
return reader; 


public static SqlDataReader GetReader(string sql, params SqlParameter[] values) 

SqlCommand cmd = new SqlCommand(sql, Connection); 
cmd.Parameters.AddRange(values); 
SqlDataReader reader = cmd.ExecuteReader(); 
return reader; 


public static DataTable GetDataSet(string safeSql) 

connection = Connection; 
DataSet ds = new DataSet(); 
SqlCommand cmd = new SqlCommand(safeSql, Connection); 
SqlDataAdapter da = new SqlDataAdapter(cmd); 
da.Fill(ds); 
cmd.Parameters.Clear(); 
return ds.Tables[0]; 


public static DataTable GetDataSet(string sql, params SqlParameter[] values) 

DataSet ds = new DataSet(); 
SqlCommand cmd = new SqlCommand(sql, Connection); 
cmd.Parameters.AddRange(values); 
SqlDataAdapter da = new SqlDataAdapter(cmd); 
da.Fill(ds); 
cmd.Parameters.Clear(); 
return ds.Tables[0]; 



 

复制代码代码如下:


数据表结构:<pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355" name="code" class="plain">CREATE TABLE [dbo].[LoginLog]( 
[LoginID] [int] IDENTITY(1,1) NOT NULL, 
[SwtID] [int] NULL, 
[UserName] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL, 
[IP] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL, 
[Address] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL, 
[Address2] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL, 
[LogTime] [datetime] NULL, 
[LogType] [int] NULL CONSTRAINT [DEFAULT_LoginLog_LogType] DEFAULT ((1)), 
CONSTRAINT [PK_LoginLog_LoginID] PRIMARY KEY CLUSTERED 

[LoginID] ASC 
)WITH (PAD_INDEX = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY] 
) ON [PRIMARY]</pre> 
<pre></pre> 
<pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355" name="code" class="csharp"><pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355" name="code" class="sql"><pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355"></pre> 
<pre></pre> 
<pre></pre> 
<pre></pre> 
<pre></pre> 
<pre></pre> 

</pre></pre> 

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
配置IIS网站web服务器的安全策略配置解决方案
配置IIS网站web服务器的安全策略配置解决方案 2019-05-23
Nginx服务器究竟是怎么执行PHP项目
Nginx服务器究竟是怎么执行PHP项目 2019-05-24
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
返回顶部