ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页 - 面向对象网,web开发,Extjs,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Extjs > 正文

ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页

来源: www.bianceng.cn 阅读:

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
  {

  }

}

Tags:
相关文章列表: