c#ajax用分四部打造漂亮的新闻列表无刷新分页内容预览.docx

我们看到这是一个table，但里面并没有绑定或者写一些代码，这是为了以后使用ajax添加上去。

同时我们注意到有这样的一些id

这是以后使用json绑定是需要的。

现在，我们来写一些后台代码，尝试着连接数据库。

为了简单起见，我把连接数据库的代码写到NewsList.aspx的后台代码及NewsList.aspx.cs中，其实我们在实际的项目中，往往会把数据库操作的那块封装起了，只提供接口。

后台代码如下：

usingSystem;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Web;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Data.OleDb;

namespaceMyNewsList

{

publicpartialclassNewsList:

System.Web.UI.Page

{

//数据库连接字符串

publicstaticstringconnectionString=System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NewsConnection"].ToString（）;

publicstaticOleDbConnectionconn;

protectedvoidPage_Load（objectsender,EventArgse）

{

if（!

Page.IsPostBack）

{

TestConnection（）;//测试连接数据库

}

}

protectedvoidTestConnection（）

{

conn=newOleDbConnection（connectionString）;//创建新的连接

try

{

conn.Open（）;

if（conn.State==System.Data.ConnectionState.Open）

{

Response.Write（"数据库连接成功"）;

}

else

{

Response.Write（"连接状态是关闭的"）;

}

}

catch（Exceptione）

{

Response.Write（"连接失败，错误原因：

"+e.Message）;//如果连接失败将错误显示出来

}

finally

{

conn.Close（）;//一定要及时关掉conn

}

}

}

}

当我们运行页面后发现“数据库连接成功”后，我们才开始下面的code编码。

●第三节

前面两个章节我们将需求分析和概要设计简单介绍了，接下来是重点的编代码的阶段了（实现无刷新分页）。

在编写代码之前，一定要有计划的去编写代码，不能一开始啥也不管就开始编代码，除非你特牛。

我们来看一下需求分析：

3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。

这里面有两个事件，都是js事件，我们用jquery代码来实现。

分页的话，我们采用jquery的分页插件pagination，官方地址为

先讲讲它的基本用法：

跟一般的jQuery插件一样，此插件使用也很简单便捷。

方法是pagination，例如$（"#page"）.pagination（100）;，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。

例如下面的使用代码：

$（"#Pagination"）.pagination（56,{

num_edge_entries:

2,

num_display_entries:

4,

callback:

pageselectCallback,

items_per_page:

1

}）;

这段代码表示的含义是：

总共有56（maxentries）个列表项，首尾两侧分页显示2（num_edge_entries）个，连续分页主体数目显示4（num_display_entries）个，回调函数为pageselectCallback（callback），每页显示的列表项为1（items_per_page）。

您可以对照参数表修改配置这里的参数。

具体的用法可以参考官方文档或是

然后讲讲如何将它整合到我们这边来。

在NewsList.aspx页面中添加相关的js文件和css文件（最下面附下载地址）：

jquery-1.4.1.js，pagination.js

然后，我们来看关键的js代码：

$（）.ready（function（）{

InitData（0）;

}）;

//处理翻页

functionpageselectCallback（page_id,jq）{

//alert（page_id）;

InitData（page_id）;

};

functionInitData（pageindx）

{

vartbody="";

varorderby="news_id";

$.ajax（{

type:

"POST",//用POST方式传输

dataType:

"json",//数据格式JSON

url:

'Ajax/NewsHandler.ashx',//目标地址

data:

"pageno="+（pageindx+1）+"&orderby="+orderby,

success:

function（json）{

$（"#productTabletr:

gt（0）"）.remove（）;

varproductData=json.News;

$.each（productData,function（i,n）{

vartrs="";

trs+="

center'>

news_id="+n.news_id+"\"class=\"info2\">"+n.news_title+"

center'>"+n.news_readtimes+"

center'>"+n.news_time+"";

tbody+=trs;

}）;

$（"#productTable"）.append（tbody）;

//奇偶行颜色不同

$（"#productTabletr:

gt（0）:

odd"）.attr（"class","odd"）;

$（"#productTabletr:

gt（0）:

even"）.attr（"class","enen"）;

}

}）;

$（"#pagination"）.pagination（<%=pagecount%>,{

callback:

pageselectCallback,

prev_text:

'<<上一页,

next_text:

'下一页>>',

items_per_page:

9,

num_display_entries:

6,

current_page:

pageindx,

num_edge_entries:

2

}）;

}

这里有必要说明下json数据格式，JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，它是类似于xml的数据交换格式，格式示例如下：

[

 {

 "term":

"BACCHUS",

 "part":

"n.",

 "definition":

"Aconvenientdeityinventedbytheancientsasanexcuseforgettingdrunk.",

 "quote":

[

 "Ispublicworship,then,asin.",

 "ThatfordevotionspaidtoBacchus",

 "Thelictorsdaretorunusin.",

 "Andresolutelythumpandwhackus?

"

 ],

 "author":

"Jorace"

 },

 {

 "term":

"BACKBITE",

 "part":

"v.t.",

 "definition":

"Tospeakofamanasyoufindhimwhenhecantfindyou."

 },

 {

 "term":

"BEARD",

 "part":

"n.",

 "definition":

"ThehairthatiscommonlycutoffbythosewhojustlyexecratetheabsurdChinesecustomofshavingthebead."

 }

]

有现成的josn处理的dll，名为Newtonsoft.Json.Net20（最下面附下载地址），用它处理json非常的方便，我们可以像处理对象一样处理json。

因为我们在读取列表的时候从数据库中读出来的是一张table（datatable格式），而要将它显示在前台，如果自己一个个拼凑字符串的话会非常麻烦，而且扩展性不好，所有我们采用json文件，这样就需要一个方法将datatable转为json，该方法如下：

publicstaticstringDataTableToJSON（DataTabledt,stringdtName）

{

StringBuildersb=newStringBuilder（）;

StringWritersw=newStringWriter（sb）;

using（JsonWriterjw=newJsonTextWriter（sw））

{

JsonSerializerser=newJsonSerializer（）;

jw.WriteStartObject（）;

jw.WritePropertyName（dtName）;

jw.WriteStartArray（）;

foreach（DataRowdrindt.Rows）

{

jw.WriteStartObject（）;

foreach（DataColumndcindt.Columns）

{

jw.WritePropertyName（dc.ColumnName）;

ser.Serialize（jw,dr[dc].ToString（））;

}

jw.WriteEndObject（）;

}

jw.WriteEndArray（）;

jw.WriteEndObject（）;

sw.Close（）;

jw.Close（）;

}

returnsb.ToString（）;

}

我们来看一下上面关键的js代码：

InitData（pageindx）是用来处理第pageindx页的显示数据的，我们着重来看一下这个ajax处理文件NewsHandler.ashx，当然也可以用aspx文件作为ajax后台处理文件。

在项目中添加ajax文件夹用来存放ajax处理文件，并且添加GenericHandler类型的文件（或是一般的webform），取名为NewsHandler.ashx，这个文件是用来处理ajax请求的。

主要代码如下：

intpageindex;//页数

int.TryParse（context.Request["pageno"],outpageindex）;//把赋值给pageindex

stringorderby=context.Request["orderby"].ToString（）;//以什么排序

DataTabledt=newDataTable（）;

dt=PageData（pageindex,10,"tb_news",orderby）;//获取数据

stringjsonData=DataTableToJSON（dt,"News"）;//创建json对象,将datatable对象转换为json对象

context.Response.Write（jsonData）;//返回json数据

上面的代码中有这样一个方法PageData（pageindex,10,"tb_news",orderby）;方法主要获取第几页的数据，详细代码如下：

#region返回特定页数的数据

///

///特定的页数

///页的大小

///哪张表

///

publicDataTablePageData（intpageindex,intpagesize,stringtable,stringorderby）

{

stringconnectionString=System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NewsConnection"].ToString（）;

OleDbConnectionconn;

if（pageindex<1）

pageindex=1;

conn=newOleDbConnection（connectionString）;

DataTabledt=newDataTable（）;

try

{

conn.Open（）;

OleDbCommandcmdTotal=newOleDbCommand（"selectcount（0）from"+table,conn）;

intrecordCount=Convert.ToInt32（cmdTotal.ExecuteScalar（））;//数据的总数

intpageCount;//总共的页数

if（recordCount%pagesize>0）

pageCount=recordCount/pagesize+1;

else

pageCount=recordCount/pagesize;

if（pageindex>pageCount）

pageindex=pageCount;

DataTabledataTemp=