用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支持

#pragma warning disable 1591

//------------------------------------------------------------------------------

// <auto-generated>

// 此代码由工具生成。

// 运行库版本:2.0.50727.1433

// 对此文件的更改可能会导致不正确的行为，并且如果

// 重新生成代码，这些更改将会丢失。

// </auto-generated>

//------------------------------------------------------------------------------

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Data.Linq;

using System.Data.Linq.Mapping;

using System.Linq;

using System.Linq.Expressions;

using System.Reflection;

[System.Data.Linq.Mapping.DatabaseAttribute(Name="sharelist")]

public partial class DataClassesDataContext : System.Data.Linq.DataContext

{

private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource();

Extensibility Method DefinitionsExtensibility Method Definitions#region Extensibility Method Definitions

partial void OnCreated();

#endregion

public DataClassesDataContext() :

base(global::System.Configuration.ConfigurationManager.ConnectionStrings["sharelistConnectionString"].ConnectionString, mappingSource)

{

OnCreated();

}

public DataClassesDataContext(string connection) :

base(connection, mappingSource)

{

OnCreated();

}

public DataClassesDataContext(System.Data.IDbConnection connection) :

base(connection, mappingSource)

{

OnCreated();

}

public DataClassesDataContext(string connection, System.Data.Linq.Mapping.MappingSource mappingSource) :

base(connection, mappingSource)

{

OnCreated();

}

public DataClassesDataContext(System.Data.IDbConnection connection, System.Data.Linq.Mapping.MappingSource mappingSource) :

base(connection, mappingSource)

{

OnCreated();

}

public System.Data.Linq.Table<Stock> Stock

{

get

{

return this.GetTable<Stock>();

}

[Table(Name="dbo.stocks")]

[DataContract]

public partial class Stock

{

private string _company;

private double _price;

private double _change;

private double _changepercent;

private System.DateTime _lastupdated;

public Stock()

{

}

[Column(Storage="_company", DbType="NVarChar(50) NOT NULL", CanBeNull=false)]

[DataMember]

public string company

{

get

{

return this._company;

}

set

{

if ((this._company != value))

{

this._company = value;

}

[Column(Storage="_price", DbType="Float NOT NULL")]

[DataMember]

public double price

{

get

{

return this._price;

}

set

{

if ((this._price != value))

{

this._price = value;

}

[Column(Storage="_change", DbType="Float NOT NULL")]

[DataMember]

public double change

{

get

{

return this._change;

}

set

{

if ((this._change != value))

{

this._change = value;

}

[Column(Storage="_changepercent", DbType="Float NOT NULL")]

[DataMember]

public double changepercent

{

get

{

return this._changepercent;

}

set

{

if ((this._changepercent != value))

{

this._changepercent = value;

}

[Column(Storage="_lastupdated", DbType="DateTime NOT NULL")]

[DataMember]

public System.DateTime lastupdated

{

get

{

return this._lastupdated;

}

set

{

if ((this._lastupdated != value))

{

this._lastupdated = value;

}

#pragma warning restore 1591

第四步：在网站项目中创建一个启用了Ajax的WCF服务：ArrayGridService.svc，然后将其中的类代码更改为：

using System;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.ServiceModel.Web;

using System.Collections.Generic;

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class ArrayGridService

{

// 添加 [WebGet] 属性以使用 HTTP GET

[OperationContract]

[WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "GET", UriTemplate = "GetStocks")]

public Stock[] GetStocks()

{

DataClassesDataContext dbContext = new DataClassesDataContext();

IQueryable<Stock> res = dbContext.Stock.Select(stock => stock);

return res.ToArray<Stock>();

}

// 在此处添加更多操作并使用 [OperationContract] 标记它们

}

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

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

BasicGrid.aspx页面文件

@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicGrid.aspx.cs" Inherits="BasicGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>extjs+wcf+linq 打造grid</title>

</head>

<body>

<div>

<h1>

extjs+wcf+linq 打造grid</h1>

</div>

</form>

</body>

</html>

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

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

/**//**//**//*

* Ext JS Library 2.1

* licensing@extjs.com

* http://extjs.com/license

Ext.onReady(function()

{

// example of custom renderer function

function change(val)

{

if(val > 0)

{

return '<span style="color:green;">' + val + '</span>';

}else if(val < 0)

{

return '<span style="color:red;">' + val + '</span>';

}

return val;

}

// example of custom renderer function

function pctChange(val)

{

if(val > 0)

{

return '<span style="color:green;">' + val + '%</span>';

}else if(val < 0)

{

return '<span style="color:red;">' + val + '%</span>';

}

return val;

}

var proxy=new Ext.data.HttpProxy(

{url:'ArrayGridService.svc/GetStocks'});

// create the data store

var store = new Ext.data.SimpleStore(

{

fields: [

{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

]

});

//定义reader

var reader=new Ext.data.JsonReader(

{

},[

{name: 'company'},

{name: 'price'},

{name: 'change'},

{name: 'pctChange',mapping:'changepercent'},

{name: 'lastChange',mapping:'lastupdated'}

]

)

//构建Store

var store=new Ext.data.Store(

{

proxy:proxy,

reader:reader

});

//载入

store.load();

// create the Grid

var grid = new Ext.grid.GridPanel(

{

store: store,

columns: [

{id:'company',header: "公司", width: 160, sortable: true, dataIndex: 'company'},

{header: "单价", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},

{header: "变动", width: 75, sortable: true, renderer: change, dataIndex: 'change'},

{header: "变动百分比", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},

{header: "最后更新", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('Y年m月d日'), dataIndex: 'lastChange'}

stripeRows: true,

autoExpandColumn: 'company',

height:350,

width:600,

title:'股市行情',

viewConfig:

{

columnsText:'列',

sortAscText:'升序',

sortDescText:'降序'

}

});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();

});

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

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

说明大功告成。

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

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

转载于:https://www.cnblogs.com/jillzhang/archive/2008/06/18/1225018.html

用ExtJs+Linq+Wcf打造简单grid相关推荐

ExtJs与WCF交互:生成树
上文做了下Ajax与WCF进行json交互的简单介绍,本文阐述一个具体的实际应用:ExtJs与WCF交互,生成树.也很简单.先看看最终的效果吧: 第一步: 创建一个.net framework 3.5 ...
【Expression 序列化】WCF的简单使用及其Expression Lambada的序列化问题初步解决方案（三）...
接上文[Expression 序列化]WCF的简单使用及其Expression Lambada的序列化问题初步解决方案(二) 上文最后留下了一个问题,引起这个问题的操作是把原来通过硬编码字符串来设置的 ...
SharePoint 2013 调用WCF服务简单示例
内容比较简单,主要记录自己使用SharePoint 2013WCF服务遇到的小问题和小经验,分享给大家,希望能够给需要的人有所帮助.好吧,进入正题! 第一部分 SharePoint 2013调用自带W ...
利用socket.io+nodejs打造简单聊天室
代码地址如下: http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
影刀RPA金礼剑：专注打造简单易用的RPA产品，构建差异化市场竞争力 | 数据猿专访...
数据智能产业创新服务媒体 --聚焦数智 · 改变商业所谓RPA,指使用机器人自动执行高度重复性的日常任务,以此节省时间和成本,从而解放员工,使之从事更高价值的工作.不同于大众印象中的实体类机器人,R ...
SpringSecurity+Mybatis实现用户自助注册登录(含角色)，打造简单安全的注册登录页面。
#项目架构.功能点架构: Springboot2.5.+ MySQL数据库8.0+(记录用户信息.角色清单.用户角色对照表) 持久层Mybatis 用户注册页面RegisterPage采用Thyme ...
LinQ,WCF,ExtJs之”初吻“
昨天花了一天的时间尝试了.net framework3.5的特性!用LinQ写数据访问层的代码,感觉很清爽,而且也非常灵活!WCF就比较有点"重量级"了,呵呵,昨晚闹了一个晚上,竟 ...
EXTJS学习系列提高篇:第二十五篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--右键菜单篇...
本文介绍如何在grid列表里在某行上面单击右键弹出菜单的功能先看看效果图: 如上图所示,具体菜单的功能没有去实现,这里和前几篇的后台都极为类似,有需要后台代码的朋友只需要浏览前几篇即可. 下面仅仅 ...
ext2.2打造全新功能grid系列--仅仅动态生成GridPanel
发现Ext中文官网论坛上一些Ext的好文章,真是相见恨晚啊,比自己看Document要快十倍,extit 简直是太伟大了.一点一点的学习,一点一点的摘抄到我的Blog,纯属收藏,急于看别的内容的朋友, ...

用ExtJs+Linq+Wcf打造简单grid

用ExtJs+Linq+Wcf打造简单grid相关推荐

最新文章

热门文章