脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → js分页异步加载数据

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

 更新时间：2014年04月04日 15:42:33   作者：  
这篇文章主要介绍了asp.net使用js分页实现异步加载数据,需要的朋友可以参考下
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>
您可能感兴趣的文章:

相关文章

  • firebird Embedded模式(.net 3.5)

    firebird Embedded模式(.net 3.5)

    实现的关键：copy fbembed.dll icudt30.dll icuuc30.dll到system32文件夹下
    2008-12-12
  • Asp.NetCore1.1版本去掉project.json后如何打包生成跨平台包

    Asp.NetCore1.1版本去掉project.json后如何打包生成跨平台包

    这篇文章主要为大家详细介绍了Asp.NetCore1.1版本去掉project.json后如何打包生成跨平台包 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • C#精髓 GridView72大绝技 学习gridview的朋友必看

    C#精髓 GridView72大绝技 学习gridview的朋友必看

    C#精髓 GridView72大绝技 学习gridview的朋友可以参考下。
    2009-10-10
  • Linkbutton控件在项目中的简单应用

    Linkbutton控件在项目中的简单应用

    Button控件可分为button控件、LinkButton控件、ImageButton控件三类，而LinkButton控件则在页面上显示为一个超级链接，下面与大家分享下其具体应用
    2013-05-05
  • asp.net常用函数收藏

    asp.net常用函数收藏

    这篇文章给大家介绍asp.net常用函数收藏，主要包括 得到站点用户IP,去除字符串最后一个','号、去除字符串第一个'/'号等，感兴趣的朋友跟随小编一起看看吧
    2008-09-09
  • .NET Core中HttpClient的正确打开方式

    .NET Core中HttpClient的正确打开方式

    这篇文章主要给大家介绍了关于.NET Core中HttpClient的正确打开方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 密码绑定至密码文本框中(TextMode设为Password)

    密码绑定至密码文本框中(TextMode设为Password)

    一般情况之下TextBox的TextMode设为Password话，我们想在后台(.cs)绑定一个值至此文本框，是无法实现的,如果一定要绑定值的话，该如何实现呢？，本文将告诉你实现方法，感兴趣的朋友可以参考下
    2013-01-01
  • .Net中的集合排序可以这么玩你知道吗

    .Net中的集合排序可以这么玩你知道吗

    集合为处理大量数据时所用到一种容器类。简单讲就是数据结构算法的具体平台上的实现。下面这篇文章主要给大家介绍了关于.Net中集合排序的一些你可能不知道的用法，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2018-04-04
  • 把js文件编译成dll供页面调用的方法

    把js文件编译成dll供页面调用的方法

    这篇文章主要介绍了把js文件编译成dll供页面调用的方法,需要的朋友可以参考下
    2014-08-08
  • asp.net获取网站绝对路径示例

    asp.net获取网站绝对路径示例

    在编写 ASP.NET 应用程序的时候，有时为了更好地进行控制静态文件的路径，如在模板页或者用户控件中设置js或者css文件的路径等，采用绝对路径是难免的。下面就是几种获取绝对路径的几种方法
    2014-02-02

最新评论