上篇文章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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>extjs+wcf+linq 打造grid</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js" charset="gb2312"></script>
<script type="text/javascript" src="ext-all.js" charset="gb2312"></script>
<script type="text/javascript" src="array-grid.js" charset="gb2312"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<link rel="stylesheet" type="text/css" href="shared/examples.css" /></