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

更新时间：2021年9月22日 10:12 点击：2065

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、目录结构

下面就直接上代码了。

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> 

[!--infotagslink--]

上一篇: ASP.NET mvc异常处理的方法示例介绍

下一篇: ASP.NET中application对象的使用介绍

AngularJS 实现按需异步加载实例代码
AngularJS 通过路由支持多视图应用，可以根据路由动态加载所需的视图，在 AngularJS 的文档中有详细的介绍，网上也有不少教程，就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性...2015-10-21
详解vue-router的Import异步加载模块问题的解决方案
这篇文章主要介绍了详解vue-router的Import异步加载模块问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-14
点评js异步加载的4种方式
这篇文章主要介绍了点评js异步加载的4种方式，帮助大家更全面的了解js异步加载方式，感兴趣的小伙伴们可以参考一下...2015-12-24
C#使用Jquery zTree实现树状结构显示异步数据加载
这篇文章主要为大家详细介绍了C#使用Jquery zTree实现树状结构显示和异步数据加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
asp.net下的异步加载
这篇文章主要为大家详细介绍了asp.net的异步加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
ASP.NET中AJAX的异步加载（Demo演示）
这篇文章主要介绍了ASP.NET中AJAX的异步加载（Demo演示），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
Android优化双缓存的图片异步加载工具(LruCache+SoftReference)
下面来为各位介绍一个关于Android优化双缓存的图片异步加载工具(LruCache+SoftReference)例子，希望对大家有帮助．之前在郭大神的博客看到使用LruCache算法实现图...2016-09-20
asp.net 使用js分页实现异步加载数据
这篇文章主要介绍了asp.net使用js分页实现异步加载数据,需要的朋友可以参考下...2021-09-22
android开发之ListView异步加载图片
本文章分享和下关于android开发之ListView异步加载图片，有需了解的朋友可以参考一下。 ListView异步加载图片是非常实用的方法，凡是是要通过网络获取图片资源一般...2016-09-20
解决Android ListView异步加载图片乱序问题
Android ListView异步加载图片乱序问题如果对于要求不高的朋友来讲这个不算是问题当然对于一定要按我们后台上传的方式来排序图片那肯定就是一个大问题了，具体看要求来...2016-09-20
android开发中解决ListView异步加载图片错乱问题
发一个异步图片加载控件。网上也有大把的异步网络加载图片的控件，但是有一个问题，异步加载会造成列表中的图片混乱，因为列表的每一项的View都可能被重用，异步加载的时候多...2016-09-20
jquery zTree异步加载、模糊搜索简单实例分享
这篇文章主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例，感兴趣的小伙伴们可以参考一下...2016-03-28

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

相关文章

阁下可能感兴趣的内容

推荐阅读