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

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
  {

  }

}

时间: 2024-09-29 15:58:59

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

php+ajax实现无刷新数据分页的办法_php技巧

本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: index.php 文件,代码如下: <?php header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 ?> <html> <head> <title>ajax分页演示</title> <script language="javascript"

php+ajax实现无刷新数据分页例子

index.php 文件如下图所示  代码如下 复制代码 <?php header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 ?> <html> <head> <title>ajax分页演示</title> <script language="javascript" src="ajaxpg.js"></sc

利用AJAX实现无刷新数据分页_AJAX相关

以前在使用Asp.Net的时候用过GridView这个控件,这个控件自带分页的功能,虽然很丑,但是功能还是很强大的.这里呢,给大家展示一下更加给力的方式--利用AJAX无刷新直接从服务器获取数据分页. 一.实现过程 注意:一下的内容都是在服务器内使用的. 首先要在服务器的路径下建立几个文件,比如,page1.txt,page2.txt,page3.txt. 每个文件中放入数组,如下: 复制代码 代码如下: [{user:'blue',pass:'123'},{user:'aaa',pass:'d

利用AJAX实现无刷新数据分页

以前在使用Asp.Net的时候用过GridView这个控件,这个控件自带分页的功能,虽然很丑,但是功能还是很强大的.这里呢,给大家展示一下更加给力的方式--利用AJAX无刷新直接从服务器获取数据分页. 一.实现过程 注意:一下的内容都是在服务器内使用的. 首先要在服务器的路径下建立几个文件,比如,page1.txt,page2.txt,page3.txt. 每个文件中放入数组,如下: 复制代码 代码如下:[{user:'blue',pass:'123'},{user:'aaa',pass:'ds

ExtJs学习笔记

ExtJS学习笔记 - onReady Extjs学习笔记 - 实战 Extjs学习笔记 - 初篇 ExtJs学习笔记(24)-Drag/Drop拖动功能 ExtJs学习笔记(23)-ScriptTagProxy+XTemplate+WCF跨域取数据 ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页 ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据 ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互 ExtJs学习笔记(19)

JS+ASP打造无刷新新闻列表

新闻列表在各大网站中并不少见,有了新闻列表就少不了分页,今天我们要谈的就是各分页间的切换方式. 传统的方法是将页码以URL参数的形式传到列表页,列表页内程序根据传入的参数来显示不同的内容,这之间就有了一次刷新.然而很多时候页面中的新闻列表只占该页布局的一小部分,分了更新这小部分的内容却得刷新整个页面的内容,有人抗议了,于是之后就有人采用XMLHTTP.AJAX等技术来实现无刷新更新列表.今天我们也要实现无刷新更新列表,但不使用XMLHTTP.AJAX等新技术,只使用传统的JavaScript和A

Javascript+ASP打造无刷新新闻列表

javascript|刷新|无刷新 如上图所示的新闻列表在各大网站中并不少见,有了新闻列表就少不了分页,今天我们要谈的就是各分页间的切换方式.传统的方法是将页码以URL参数的形式传到列表页,列表页内程序根据传入的参数来显示不同的内容,这之间就有了一次刷新.然而很多时候页面中的新闻列表只占该页布局的一小部分,分了更新这小部分的内容却得刷新整个页面的内容,有人抗议了,于是之后就有人采用XMLHTTP.AJAX等技术来实现无刷新更新列表.今天我们也要实现无刷新更新列表,但不使用XMLHTTP.AJAX

pagination插件无刷新的分页实例

pagination插件无刷新的分页实例 我们要准备的文件有:jquery.js,jquery.pagination.js,pagination.css教程,还有一个就是经常用的table布局的css文件.这些文件都会在后面的文件中包含. 先把要用到的文件依次进入进来: <script src="common/jquery.js" type="text/网页特效"></script> <script src="common/j

jquery插件pagination实现无刷新ajax分页_jquery

1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version