asp.net 使用js分页实现异步加载数据
程序员文章站
2024-02-26 10:40:10
1、准备工作 引入“jquery-1.8.3.min.js”，ajaxpro.2.dll”：用于前台js调用后台方法。 2、web.config的配置 复制代码 代码如下:...
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>
引入“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>