用ExtJs+Linq+Wcf打造简单grid

 

本系列文章列表

1)Ajax访问Xml Web Service的安全问题以及解决方案

2)Ajax与WCF交互-WCF之美

3) Ajax与Wcf交互-JSON

4) ExtJs与WCF交互:生成树

5) 用ExtJs+Linq+Wcf打造简单grid

6) ExtJs+WCF+LINQ实现分页Grid

7) ExtJs与WCF之间的跨域访问

8) 异步调用Restful的WCF服务

9) 用Restful方式调用WCF进行上传下载

10) 再说ExtJs与WCF之间的跨域访问

11) [添砖加瓦]:ExtJS+WCF+LINQ打造全功能Grid

12) 【封装】WCF+LINQ+ExtJS做更简单的Grid

  

    上篇文章ExtJs与WCF交互:生成树中阐述了用wcf产生json数据给extjs产生树控件的用法,本文将着重讲述如何用wcf+extjs+linq打造一个支持排序和列刷选的grid。闲话少叙 ,下面是操作步骤和实现效果图

第一步:在vs2008中创建一个支持.net framework 3.5的网站,此处之所以强调支持.net framework 3.5是为了使用linq

第二步:将运行时需要的Extjs的资源文件拷贝到项目目录,具体可见示例项目

第三步:假设在本机sql2005中存在数据库sharelist,里面有一个数据表stocks,效果如下:

数据库文件sharelist.mdf在示例项目db文件夹中。如果需要测试,可以将其附加到自己的sql2005数据库服务器中。

在网站项目中创建一个Linq To Sql类:DataClasses.dbml,方法如下如所示:

点击添加之后,出现下面的Linq To Sql向导

在本文只使用左面面板,在服务器资源管理器中添加对数据库sharelist的连接,效果如下:

点击数据表stocks,然后拖动stocks数据表到左面面板,拖动后效果如下:

点击stocks,然后更改类名称为Stock:

更改后效果为:

好,到此我们基本完成了linq to sql类的设计,我们在解决方案管理器中打开生成的类代码文件中,其中包括类:Stock ,为了使其能够被WCF使用

,对类添加DataContractAttribute,对属性添加DataMemberAttribute,添加好之后的代码为: 

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

在页面文件中,在<%@ ServiceHost中添加Factory="System.ServiceModel.Activation.WebServiceHostFactory",然后在web.config中将<enableWebScript/>替换成为<webHttp/>,注意这两个操作是必须的。到此wcf服务也准备齐备。

第五步:创建一个BasicGrid.aspx,然后在页面中添加extjs必要的链接和脚本支持,并添加页面元素,完成后的代码为:

BasicGrid.aspx页面文件

页面中有对<script type="text/javascript" src="array-grid.js" charset="gb2312"></script>,其中的array-grid.js便是产生grid所需要的脚本,它访问上一步中开发好的wcf服务,将服务方法GetStocks返回的json数据与extjs的grid进行绑定,具体代码如下:

ExtJs与Wcf交互生成grid的脚本代码

到此,linq部分,wcf部分,extjs部分均开发完成。  

第五步:在浏览器中浏览BasicGrid.aspx,效果图如下:  

说明大功告成。

说明:这几篇都是简单的实践,有关extjs部分绝大部分参考extjs中的示例,但也做了稍稍的修改,后面的文章会逐渐深入一些。

示例项目:
/Files/jillzhang/ExtJsWcfLinqGrid.part1.RAR
/Files/jillzhang/ExtJsWcfLinqGrid.part2.RAR

posted @ 2008-06-18 22:16 Robin Zhang 阅读(...) 评论(...) 编辑 收藏