ExtJs+WCF+LINQ实现分页Grid

上篇文章《用ExtJs+Linq+Wcf打造简单grid 》,这个网格控件不带分页,本文在上文的基础上添加分页功能,文中会着重介绍如何在用LINQ返回分页数据,如何使ExtJs与WCF进行Restful交互,如何在页面中添加一个带有分页功能的ExtJS的Grid控件。

废话也不多说了,本文仍然是实战学习系列,没有太多理论讲解,只是作者学习中的操作流程记录而已,如果日后有机会,会逐渐的深入一些。

第一步:在vs2008中创建一个支持.Net Framework 3.5,名称为:ExtJs_Wcf_Linq_PageGrid的Asp.Net网站,

完成后删除项目模板中的default.aspx页面。此步骤完成之后的效果图如下:

第二步:创建网站之后,将ExtJs相关资源文件添加到项目中,这些文件主要来源是extjs的官方示例项目,完成后项目效果图为:

 

第三步:在本文的示例中,我们使用SQL2005自带的示例数据库AdventureWorks中的数据表Product,默认情况下该示例数据库可能未安装,要安装此数据库,可以查阅SQL2005中文档与教程中的SQL2005联机文档。在这个步骤中,主要目的是在项目创建一个Lint to Xml类,这个类用于Linq与数据表Product进行交互。使用Linq To Sql可以产生一个实体类和一个数据访问类。添加该类的操作如下:

创建好Products.dbml之后,打开vs2008的服务器资源管理器,在服务器资源管理器中添加对数据库AdventureWorks的数据连接,然后将该库中数据表Product拖到Products.dbml设计器的左面的对象关系设计器面板中,操作如下图所示:

拖动成功之后,便有vs2008的IDE自动生成了有关Product的实体类和linq操作数据表Product的操作类:ProductsDataContext,在可视化界面中也能有如下的显示:

自动生成的实体类Product并不支持作为WCF的数据类,必须手动对其添加DataContract和DataMember,添加后的代码如下: 

linq to sql类生成的代码并添加了wcf支持

第四步:创建一个启动了Ajax支持的WCF服务:PageGridService.svc

设计一个用于与ExtJs进行分页交互的PageData泛型类:

WCF与ExtJs分页Grid交互的泛型类

这个泛型类用于WCF与ExtJS的Grid控件交互,T是返回的具体数据类型的集合,TotalRecord是总记录数。

修改PageGridService.svc的页面代码,添加Factory="System.ServiceModel.Activation.WebServiceHostFactory",添加后代码如下:

在后台代码中设计一个WCF服务操作,用于与ExtJS交互:

public PageData<Product[]> GetProductsByPage(int start,int limit)

具体代码为:

WCF服务操作

注意在linq中用Skip和Take实现分页

第五步:创建htm页面PageGridDemo.htm,添加如下的代码:

html页面

第六步: 创建javascript脚本文件,用于实现ExtJs grid控件,代码为:

extjs创建分页grid脚本文件

好,到此,一个ExtJs+Wcf+LINQ分页Grid实现完毕,下面浏览PageGridDemo.htm,查看运行效果:

国际惯例,上示例项目文件: /Files/jillzhang/ExtJs_Wcf_Linq_PageGrid.rar

posted @ 2008-06-29 19:11 Robin Zhang 阅读(...) 评论(...) 编辑 收藏