列表而已，这时候XTemplate就显得很有用了。
本文将讲解如何用XTemplate结合WCF与服务端交互，生成数据列表，同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能) 1.先做一些准备工作，写一个通用的类，用于WCF向ExtJs返回分页数据
Code
using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
///
///PageData 的摘要说明
///
///
[DataContract]
public class PageData
{
[DataMember]
public int RecordCount { set; get; }
[DataMember]
public int PageSize { set; get; }
[DataMember]
public int PageCount { set; get; }
[DataMember]
public int CurrentPageIndex { set; get; }
[DataMember]
public T Data { set; get; }
}
复制
2.DateTime序列化问题，因为.net序列化DateTime时，不管你怎么努力，只要是DateTime类型，最终只能生成类似 "F_Date":"\/Date(1221023588109+0800)\/"这样的字符串，ExtJs并不能正确识别!为此我们需要一个第三方的用于序列化DateTime的小工具Newtonsoft.Json.dll,它是专门用于将对象序列化成Json字符串。重要的是，用这个序列化后的DateTime字符串，ExtJs能够识别（注:百度搜索一下"Newtonsoft.Json"很容易就能找到N多下载的，下载后直接添加到项目引用里即可) 3.编写具体的实体类T_GuestBook,直接在数据库里建好，拖到dbml里就可以了，主要代码如下(注意要设置dbml的序列化属性为"单向"，否则vs不会自动为class以及成员加上序列化标签):
Code
[Table(Name="dbo.T_GuestBook")]
[DataContract()]
public partial class T_GuestBook : INotifyPropertyChanging, INotifyPropertyChanged
{
[Column(Storage="_F_ID", AutoSync=AutoSync.OnInsert, DbType="Int NOT NULL IDENTITY", IsPrimaryKey=true, IsDbGenerated=true)]
[DataMember(Order=1)]
public int F_ID
{
}
[Column(Storage="_F_IP", DbType="NVarChar(15) NOT NULL", CanBeNull=false)]
[DataMember(Order=2)]
public string F_IP
{
}
[Column(Storage="_F_Date", DbType="DateTime NOT NULL")]
[DataMember(Order=3)]
public System.DateTime F_Date
{
}
[Column(Storage="_F_Content", DbType="NVarChar(1000) NOT NULL", CanBeNull=false)]
[DataMember(Order=4)]
public string F_Content
{
}
[Column(Storage="_F_Reply", DbType="NVarChar(1000) NOT NULL", CanBeNull=false)]
[DataMember(Order=5)]
public string F_Reply
{
}
}
复制
为阅读方便，去掉了一些自动生成的代码
4.建一个WCF服务，并添加一个方法:
Code
[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json,UriTemplate = "GetData2?PageSize={PageSize}&PageIndex={PageIndex}", Method = "*")]
public string GetData2(int PageSize, int PageIndex)
{
System.Threading.Thread.Sleep(1000);//为演示Ajax加载效果，停1秒
List _List = new List();
_List.Add(new T_GuestBook() { F_ID = 1, F_IP = "192.23.37.41", F_Date = DateTime.Now, F_Content = "这是第一条留言", F_Reply = "" });
_List.Add(new T_GuestBook() { F_ID = 2, F_IP = "192.168.0.1", F_Date = DateTime.Now, F_Content = "这是第二条留言", F_Reply = "" });
_List.Add(new T_GuestBook() { F_ID = 3, F_IP = "192.168.0.2", F_Date = DateTime.Now, F_Content = "这是第三条留言", F_Reply = "" });
_List.Add(new T_GuestBook() { F_ID = 4, F_IP = "172.168.235.1", F_Date = DateTime.Now, F_Content = "这是第四条留言", F_Reply = "" });
_List.Add(new T_GuestBook() { F_ID = 5, F_IP = "10.200.30.4", F_Date = DateTime.Now, F_Content = "这是第五条留言", F_Reply = "" });
_List.Add(new T_GuestBook() { F_ID = 6, F_IP = "10.200.30.5", F_Date = DateTime.Now, F_Content = "这是第六条留言", F_Reply = "" });
//以上操作也可以改为利用Linq直接从数据库读取
PageData> _PageData = new PageData>();
_PageData.RecordCount = _List.Count;
if (PageSize <= 0) { PageSize = 1; }
if (PageSize > _PageData.RecordCount) { PageSize = _PageData.RecordCount; }
_PageData.PageSize = PageSize;
//计算总页数
if (_PageData.RecordCount % _PageData.PageSize == 0)
{
_PageData.PageCount = (_PageData.RecordCount / _PageData.PageSize);
}
else
{
_PageData.PageCount = (_PageData.RecordCount / _PageData.PageSize) + 1;
}
if (PageIndex <= 0) { PageIndex = 1; }
if (PageIndex > _PageData.PageCount) { PageIndex = _PageData.PageCount; }
_PageData.CurrentPageIndex = PageIndex;
List _List2 = _List.Skip((PageIndex - 1) * PageSize).Take(PageSize).ToList();//取得当前页数据
_PageData.Data = _List2;
return JavaScriptConvert.SerializeObject(_PageData);
}
复制
注意，这里我们返回的是string类型，并且是用JavaScriptConvert.SerializeObject处理后的JSON字符串，至于WebInvoke(ResponseFormat = WebMessageFormat.Json这里为什么要加Json返回格式，原因很简单，不指定Json格式，默认就是以xml返回的，会无端在前后加上更多无用字符 5.ExtJs前端完整代码:
Code
ExtJs.XTemplate + WCF 打造无刷新数据分页
ExtJs.XTemplate + WCF 打造无刷新数据分页
复制
这里有几个要点: (1).datetime在xtemplate中的格式化写法:{F_Date:date("Y-m-d H:i:s")} (2).服务端返回字符格式的处理:
因为JavaScriptConvert.SerializeObject(_PageData)这里已经成功序列化了，但是wcf的服务在返回时，必须要有一种格式，要么xml，要么json，所以我们指定了wcf以json格式返回后，会对正常的结果再做一次序列化，最后的结果是使字符串前后都加上了双引号，同时把原来正常的双引号做了转义处理，参考下面的:
正常的Json字符串:
{"RecordCount":6,"PageSize":3,"PageCount":2,"CurrentPageIndex":1,"Data":[{"F_ID":1,"F_IP":"192.23.37.41","F_Date":new Date(1221052494578),"F_Content":"这是第一条留言","F_Reply":""},{"F_ID":2,"F_IP":"192.168.0.1","F_Date":new Date(1221052494578),"F_Content":"这是第二条留言","F_Reply":""},{"F_ID":3,"F_IP":"192.168.0.2","F_Date":new Date(1221052494578),"F_Content":"这是第三条留言","F_Reply":""}]}
服务器返回的Json字符串:
"{\"RecordCount\":6,\"PageSize\":3,\"PageCount\":2,\"CurrentPageIndex\":1,\"Data\":[{\"F_ID\":1,\"F_IP\":\"192.23.37.41\",\"F_Date\":new Date(1221052494578),\"F_Content\":\"这是第一条留言\",\"F_Reply\":\"\"},{\"F_ID\":2,\"F_IP\":\"192.168.0.1\",\"F_Date\":new Date(1221052494578),\"F_Content\":\"这是第二条留言\",\"F_Reply\":\"\"},{\"F_ID\":3,\"F_IP\":\"192.168.0.2\",\"F_Date\":new Date(1221052494578),\"F_Content\":\"这是第三条留言\",\"F_Reply\":\"\"}]}"
所以我们要处理一下，关键代码:
//转换服务器端返回字符串的格式
var data = request.responseText;
data = data.substr(1);
data = data.substr(0, data.length - 1);
data = data.replace(/\\\"/g, '"');
data = Ext.util.JSON.decode(data)
(3).为使分页按钮有效，我们需要在成功返回服务端数据后，为每个分页链接以及按钮加上onClick事件，即这一部分
//开始处理分页按钮/链接事件
var oBtnGo = Ext.get("btnGo");
var oGoPage = Ext.get("GoPage");
oBtnGo.on("click", function() {
loadData(iPageSize, oGoPage.dom.value);
});
var oBtnFirst = Ext.get("btnFirst"); //第一页
oBtnFirst.on("click", function() { loadData(iPageSize, 1); })
var oBtnPre = Ext.get("btnPre"); //上一页
oBtnPre.on("click", function() { loadData(iPageSize, iCurrentPageIndex - 1); })
var oBtnNext = Ext.get("btnNext"); //下一页
oBtnNext.on("click", function() { loadData(iPageSize, iCurrentPageIndex + 1); })
var oBtnLast = Ext.get("btnLast"); //最后一页
oBtnLast.on("click", function() { loadData(iPageSize, iPageCount); })
另外这一段代码的位置，也要留意一下，不能写在其它地方:比如Ajax请求之后，因为当Ajax还未成功返回数据/XTemplate未成功更新时，分页按钮以及链接还没有加载到页面中，这时如果用Ext.get()取对象，Js会报错
完成了，我们来看下一效果:
最后讲一点题外话:
做完这个后，我在想：单就这个示例而言，这跟直接用asp.net ajax的updatePannel有什么区别，有什么优势呢？相信也有不少人跟我有一样的疑问，后来我想了想，至少有二个好处:
a.updatepannel默认会引起大量的数据回发，虽然页面没刷新，但是客户端跟服务端之间的传输数据量很大，而用ExtJs+Wcf，除了wcf返回的字符串，就没其它东西了，性能上会提高
b.相对而言，ExtJs的Ajax请求方式，我觉得比aspx.net ajax的更容易操作.
粤公网安备 44010402000066号