ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的<li>或<table>列表而已,这时候XTemplate就显得很有用了。
本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能)
1.先做一些准备工作,写一个通用的类(改编自老张的PageData),用于WCF向ExtJs返回分页数据
Code
using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
/// <summary>
///PageData 的摘要说明
/// </summary>
///
[DataContract]
public class PageData<T>
{
[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
{
}
}