博客园_黑曜石

一句话评论设计模式六大原则【转】

2012-02-04T01:58:00Z

注：转自http://blog.csdn.net/jesse621/article/details/7216331

原则，故名思议则是本质的意思。所谓擒贼先擒王，研究设计模式自然要先了解设计原则，所有的模式都是在这些原则的基础之上发展起来的，有的是侧重一个，有的是多个都有所涉及。看完设计模式之后，我感觉到每个模式都有这些原则的影子，还渗透着面向对象的三大属性，也觉得这些原则也都有相通之处，，正是有了他们才使我们由代码工人转为艺术家。下面我来点评一下六大原则，望各位拍砖：

1、单一职责原则（Single Responsibility Principle，简称SRP）
单一职责原则，就一个类而言，应该仅有一个引起它变化的原因。如果一个类承担的职责过多，就等于把这些职责耦合在一起，一个职责的变化可能会消弱或者一直这个类完成其他职责的能力。这种耦合会导致脆弱的设计，当变化发生时，设计会遭受到意想不到的破坏。而软件设计真正要做的许多内容，就是发现职责，并把这些职责相互分离。

一句话点评：高内聚低耦合的绝佳体现，不要乱拉关系，独善其身挺好。

2、开放--封闭原则（The Open-Closed Principle,简称OCP）
开放--封闭原则，是说软件实体（类、模块、函数等等）应该可以扩展，但是不可以修改。即对于扩展是开放的，对于更改是封闭的。我们不可能做到未卜先知，在设计的时候尽可能让一个类足够好，设计好了就不要去修改了；不能完全封闭的情况下，当发生变化时，我们就创建抽象来隔离以后发生的同类变化。

一句话点评：开放扩展，封闭更改，开合有度是一门艺术。

3、依赖倒转原则（Dependence Inversion Principle ）
依赖倒转原则，指高层模块不应该依赖低层模块，两个都应该依赖抽象；抽象不应该依赖细节，细节应该依赖抽象。说白了就是要针对接口编程，不要对实现编程。举个例子：计算机硬件中，如果内存坏了，那么只需要换一个内存条就可以了，而不需要去换一个主板，在这里内存是一个接口类，只要符合他的规格要求就行，无论是那一根。

一句话点评：搞建筑时要做设计师，而不是砖瓦工，抽象的蓝图要靠具体的材料一点点实现。

4、里氏代换原则（Liskov Substitution Principle，简称LSP）
里氏代换原则，子类型必须能够替换掉他们的父类型。在软件里面，把父类都替换成其子类，程序的行为不会发生变化。正是由于子类型的可替换性才使得使用父类型的模块在无需修改的情况下就可以扩展。

一句话点评：长辈给了你继承的权利就一定要做赡养的义务，把长辈的职责都要承担起来。

5、迪米特法则（Law of Demeter）
迪米特法则，如果两个类不必彼此直接通信，那么这两个类就不应当发生直接的相互作用。如果其中一个类需要调用另一个类的某一个方法时，可以通过第三者转发这个调用。类之间的耦合越弱，就越有利于复用，一个处在弱耦合的类被修改，不会对有关系的类造成波及。主要是强调了类之间的松耦合。

一句话点评：不要和陌生人说话，若两国交战要尽量避免正面冲突，多派使者协商调度。

6、合成/聚合复用原则（Composition/Aggregation Principle]，简称CARP）
合成聚合复用原则，尽量使用合成/聚合，尽量不使用类继承。合成聚合是“has a”的关系，而继承是“is a”的关系。由于继承是一中强耦合的结构，父类变，子类必变。所以不是“is a”关系，我们一般不要用继承。优先使用合成聚合复用原则，有助于保持每个类的封装，降低继承的层次。
一句话点评：优生优育，不要盲目繁衍。

本文链接

电子商务B2C网站购物车设计

2011-11-17T03:16:00Z

宝宝这月8号的预产期，结果到今天都没出来，估计是怕冷不想出来。。。
为了陪产，把工作给辞了，离职已一月有余，难得的一段时间。
坚持天天看看博客园，就像公务员天天喝茶，是种习惯了，或许又是怕自己离开社会太久，没技术了到时候找不着工作~
很久没有更新自己的博客，怕再不写点什么就要生杂草了。
原来就职于戴维尼珠宝网，代码基本上是自己码出来的，用的MVC2.0+SPARK视图引擎。
我发现SPARK中文方面的文章就只有我自己写的那篇，国外用的人挺多，看stackoverflow上问相关问题的就挺多，是个很优秀的视图引擎
不过在VS2010没有智能提示是个不爽的地方，说实话，我当时写也是拿VS2010当记事本来用的。。。

闲话不多说，在本文中我想说的是在电子商务中购物车的设计与实现
购物车是网站的咽喉之地，订单是白花花的银子，所有银子都必然流经购物车，购物车不能有失。
优秀的购物车设计至少需要完成两项使命：一是方便用户多买货多掏银子；二是帮用户保管好待购的货品，方便下次接着掏银子。

一般来说，可以使用session,cookie和数据库来记录购物车数据
1，不过不提倡使用session，这货占用服务器资源，还有过期时间，客户关掉浏览器时session即消失，下次再上来，又得重新选产品。
2，cookie这东西不错，放在客户端的，给个一年的过期时间，只要客户不清掉，每次来都能记得上次的购物车信息。大家可以看看京东，
在购物车cookie中存了不少东西，有产品编码和购买的数量等信息，如京东：yCartOrderLogic={&TheSkus&:[{&Id&:437741$&Num&:2}]}，
原来凡客的cookie中也以JSON的形式存了很多信息。
所以，我以学习的心态，将产品编码，价格，名称，类型和数量等购物信息做成一个对象，然后对象序列化成JSON，存在客户端的COOKIE中，
在读取cookie时，在刚开始的时候很好用，反序列化cookie值成购物车条目对象就可以了，但是当产品类型多起来之后，而且有套装那种多件产品时，
甚至产品不是来自同一个数据表时，比如普通首饰和钻石，表的结构都不一样了，还得到不同的表格中去取，当然首先你得判断产品类型
这时候一个购物条目对象已经有多条子对象，往往一个查询中嵌套着两重以上的循环加上多个switch case，当购物车中有十个复杂的条目时，读取速度
将超过十秒，不管怎么优化，速度就摆在那里，不快不慢。。。而且你不能保证客户不下100个或更多的复杂购物车记录，最重要的是cookie是有
存储大小限制的，这种做法有产品很复杂时是不利的，果断放弃！
3，数据库这东西好啊，不会像cookie那种容易丢失，也没有客户端的限制，你想怎么存，存多少都行。

购物车数据存数据库好处有很多，可以分析购买行为，可以为客户保存购买信息（不会因为浏览器关闭而丢失）等。
还需要考虑的一个问题是用户是否登录，淘宝使用的就是cookie记录，你可以试试，未登录时可以加20个商品，登录后可以加50个，这就是因为
cookie客户端的限制。
我这里因为产品线的复杂性，所有购物车条目都保存在数据库中。

购物车数据库设计成两个关联表
1，Basket，购物车主表
基本字段有：BasketId,AddTime,UserId,AddressId,Payment,Status等，不解释了，看英文意思就行
2，BasketDetail，购物车条目表
基本字段有：BasketDetailId,BasketId,Type,Code,Qty,ParentId等，ParentId用作子行标识，其它不解释
两个表之间使用BasketId做为关联
当用户登录状态时，添加产品到购物时，查看Basket中是否有Status为True的购物车，没有则添加一条新的Basket记录，并将产品信息相关数据添加至BasketDetail表中
当用户未登录时，使用cookie记录一个BasketId值，不往Basket表中插入数据，只往BasketDetail插入数据，其中的BasketId值使用cookie中的BasketId值，当用户登录
后，查看Basket中是否有Status为True的购物车记录，有则合并（更新cookie和BasketDetail中的BasketId为查询出来的Basket表中的BasketId值），无则添加一条新的
Basket记录，并将BasketId值置为Cookie中记录的basketid值

购物车C#对象也设计两个（主要用于获取数据）
1，BasketModel，大体如下：
public class BasketModel:Basket
{
public decimal TotalPrice{get;set;}
public int TotalMP{get;set;}
public List<BasketDetailModel> BasketDetailModels{get;set;}
}
2，BasketDetailModel，大体如下：（这里的ViewBasketDetail是一个视图，上面BasketDetail设计中没有产品价格，用视图关联到相关的表，获取价格，为什么不设计价格字段，不解释。。。）
public class BasketDetailModel
{
public ViewBasketDetail Detail{get;set;}
public List<ViewBasketDetail> SubDetails{get;set;}
}

至此，基本上购物车的设计就完成了，剩下的就是编码了
个人觉得这样的设计还是比较健壮的，很好的完成了购物车的两项使命，大家如果有更好的设计可以拿出来分享一下

用以上设计思想，完成了以下两个网站的购物车设计
www.520.cn （mvc2.0,spark,entity）
www.tojik.cn （mvc3.0,razor,entity）
最后说一句，还是razor好用啊，有智能提示！~

本文链接

MongoDB搭建和简单操作（windows环境）

2011-06-28T08:18:00Z

昨天看到fish的MongoDB，但遇到不少问题，于是自己一步一步尝试，将遇到之问题和解决方法记录总结

首先感谢fish！昨天忘了放链接：http://www.cnblogs.com/fish-li/archive/2011/06/26/2090800.html

再有就是快一年没更新博客了，不过本人天天打开博客园看各位的博文，就像公务员每天上班喝茶看报纸一样，习惯了。。。

尽量以后每月出个两篇文章吧，本人这一年没写博客就干了一个活，www.520.cn，请大家赏析，前台使用mvc2.0，spark引擎，Entity Framework，当然还有jQuery

这篇写完，这周再出个简单用C#操作MongoDB的增删改查，Demo将会以MVC+SPARK的方式出现，哎，为什么没几个人用spark，这么好的东西，比什么razor好多了，只是没有智能提示而已~

您可以在这个地址下载到MongoDB: http://www.mongodb.org/downloads
本人环境32位win7旗舰片，因此下载到mongodb-win32-i386-1.8.2
在下载页的下方官方有提供各种开发语言的驱动，本人C#，直接移位https://github.com/samus/mongodb-csharp下载即可
一，安装mongoDB
1，解压mongodb-win32-i386-1.8.2至E:\MyProgram\mongodb-win32-i386-1.8.2（你可以按照自己的路径来，路径中最好不要有空格，要不然麻烦）
2，新建文件夹C:\DATA\DB，这是mongoDB的默认数据文件夹，你也可以在文件夹E:\MyProgram\mongodb-win32-i386-1.8.2新建一个文件夹data作为mongoDB的数据库文件存储目录
3，进入CMD，运行命令E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongod.exe -dbpath E:\MyProgram\mongodb-win32-i386-1.8.2\data，OK，mongoDB已经安装成功并已经在运行中了，你将会看到如下：

此时是mongoDB的运行状态，你可以按Ctrl+C结束运行状态或者直接关掉CMD结束运行。
二，运行mongoDB时的错误与处理
完成安装后，结束掉所有CMD窗口，然后进行如下操作：
1，运行E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongo，可能会报错误：couldn't connect to server 127.0.0.1 shell/mongo.js，原因是mongod.exe没有启动，
2，既然没启动，那咱就启动呗，运行E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongod，可能会报错误：dbpath (/data/db/) does not exist, terminating，看这样子，本人觉得还得在data文件夹下再建一个db文件夹啊，如此即新建一db文件夹，再运行mongod命令，结果提示一样，不知道怎么搞啦，咱google吧
找到文章http://www.mongodb.org/display/DOCS/Starting+and+Stopping+Mongo
说“To start Mongo in default mode, where data will be stored in the /data/db directory (or c:\data\db on Windows), and listening on port 27017”，哦，原来默认的文档路径在c:\data\db，啥也不说，直接按这个建文件夹，再次运行命令mongod，OK了，启动成功，这个命令窗口不能关闭，否则mongoDB就退出了

三，使用mongo命令
保持mongod命令窗口的运行状态，再新开一命令窗口
输入E:\MyProgram\mongodb-win32-i386-1.8.2\bin\mongo，出现
MongoDB shell version:1.8.2
connecting to:test
>
OK，连接成功。
1，show dbs 显示数据库列表
2，use Northwind 进入Northwind数据库,大小写敏感
3，show collections 显示数据库中的集合
4，db 用于查看当前所在的数据库
5，db.Customer.count() 查看集合Customer的记录总数
6，db.Customer.findOne({"_id":"1"}) 查看CustomerId=1的记录

新增数据
1，use MyTest，这个数据库不存在，无所谓，mongo会创建，
MongoDB在使用前，并不要求您事先创建好相应的数据库，设计数据表结构！
在MongoDB中，没有【表】的概念，取而代之的是【集合】，也没有【数据记录】的概念，取而代之的是【文档】，我们可以把【文档】理解成一个【对象】，任意的对象，甚至可以有复杂的嵌套层次。
因此，我们不用再写代码从【数据表字段】到C#类的【属性，字段】的转换了，现在直接就可以读写整个对象了。
而且MongoDB不支持Join操作，所以，如果有【关联】操作，就需要你自己来处理
2，item={"Key":"1","text":"wokao","number":3}
3，db.table1.insert(item)，mongo将建立集合table1，并将item插入，完成了新增加数据库的工作
4，db.table1.find()显示table1中的数据，MongoDB的文档使用的是一种称为BSON格式的对象，与Javascript中的JSON类似
5，额外的，输入item1={"Id":5,"str":"asdfasdf"}，再插入db.table1.insert(item1)，再用find()命令看，也插入成功了~，注意到结构和item不一样！但不建议这样做。
注意到：【每个文档有一个名为 "_id" 的成员】，我可没有定义啊。
其实，MongoDB会为每个文档都创建这样一个文档成员，我们指定的 "key", "id" 对于MongoDB来说：它们并不是【文档的主键】，MongoDB只认 "_id"，你可以指定，但如果不指定，MongoDB就自动添加。

修改数据
1，var t=db.table1.findOne({"Id":5})，获取一条记录
2，t.str="wokao"
3，db.table1.update({"Id":5},t)

删除数据
db.table1.remove({"Id":5})

查找数据
上面已经有find和findOne命令，即用于查询
db.table1.find()
MongoDB的查询条件中，并没有 >, <, >= , <= 这些运算符，而是使用 "$lt", "$lte", "$gt", "$gte"

新建表
db.MyTest.table2.save({})

删除表
db.table1.drop()或db.runCommand({"drop","table1"})

删除数据库
db.runCommand({"dropDatabase": 1})，此命令只能删除当前数据库

获取服务端状态信息
db.runCommand({"serverStatus" : 1})

更多介绍查看
http://www.mongodb.org/display/DOCS/Home

在https://github.com/samus/mongodb-csharp可以下到C#的示例

本文链接

ASP.NET MVC视图引擎SPARK文档中文版（一）

2010-10-26T02:11:00Z

一，前言

写个前言还是不错的，可以先让大家看看这个文章是个大体什么内容，然后打酱油的打酱油，路过的继续路过，但相信停下来总有些许收获。

很久没有写东西，一个最近挺忙，二个好像没有什么特别好的内容好写，三个没有什么很好的心得与大家分享。最近一个项目前台使用MVC，用到了SPARK引擎，感觉灰常好用，不敢私藏，拿出来给大家分享一下，而又因为关于SPARK的中文资料简直可以说是没有，所以这篇大家可以认为是翻译，只是翻译水平比较差点，大家凑合了，如果有高手指出不足最好了，抛砖引玉了。

ASP.NET MVC 现在已有四种主要的视图引擎：Spark、NHaml、Razor和传统的ASPX文件模板，Razor是新生事物，传统的ASPX文件模板做过MVC的大体都有了解和应用了，而Spark和NHaml似乎用得不是很多，很有可能是中文资料欠缺，导致连了解的都不多。本人是在搜索关键词ASP.NET MVC SPARK，百度和GOOGLE都是一篇：《ASP.NET MVC的四种视图引擎》，文章只是粗略的写了一下各个视图的特点，确实是让大家有了一点点的了解。

本文基本上算是Spark官方文档的翻译，其网址是：http://sparkviewengine.com/documentation，最近网络河蟹乱爬，如果打不开，请大家自行翻墙！

二，将Spark加载到Asp.Net MVC中
Spark引擎不被controller管理，最简单的方法是在Asp.Net MVC web应用程序中将SparkViewFactory在Global Application_Start中注册，如：
protected void Application_Start(object sender, EventArgs e)
{
ViewEngines.Engines.Add(new SparkViewFactory());
}
这也是注册其它非默认视图引擎的方法

三，Spark配置
1，web.config中的配置
所有的spark配置都包括在<spark>标签中，如：

<configSections>
<section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/>
</configSections>

<spark>
<compilation debug="true|false" defaultLanguage="Default|CSharp|VisualBasic">
    <assemblies>
      <add assembly="YourAssemblyName" />
      <add assembly="YourOtherStrongAssemblyName, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    </assemblies>
</compilation>
<pages automaticEncoding="true|false" pageBaseType="Your.NonDefault.BaseSparkView" prefix="{optional string}">
    <namespaces>
      <add namespace="System"/>
      <add namespace="System.Collections.Generic"/>
      <add namespace="System.Linq"/>
      <add namespace="System.Web.Mvc"/>
    </namespaces>
    <resources>
      <add match="/content/css" location="http://www.yourcdnprovider.com/youraccount/allstyles/css"/>
      <add match="/content/js" location="http://www.yourcdnprovider.com/youraccount/appname/js"/>
    </resources>
</pages>
</spark>
自动解码最好是true，这将会对每个使用${expr}的操作符都进行HTML encoding，而使用方法!{expr}将避免被解码
resources区域用于控制形如”~/“样式的链接，如：<script src="~/content/js/foo.js"/>，将会被解析成给定的location+"/foo.js"，对于使用静态文件或CDN来说是非常有意义的。

2，也可以在Application_Start中配置，如：
protected void Application_Start(object sender, EventArgs e)
{
    var settings = new SparkSettings()
        .SetDebug(true)
        .SetPageBaseType("Your.NonDefault.BaseSparkView")
        .AddAssembly("YourAssembly")
        .AddNamespace("System")
        .AddNamespace("System.Collections.Generic")
        .AddNamespace("System.Linq")
        .AddNamespace("System.Web.Mvc");

    ViewEngines.Engines.Add(new SparkViewFactory(settings));
}

四，常规语法

1，包含代码
可以使用包括C#代码，任何helper方法，对象属性或返回非空值的表达式，如：
<p>${"Hello world"}</p>
<p>${Guid.NewGuid().ToString("n")}</p>
代码可以表现为特殊的html标签或其属性，如"if","else"和"var"，在这些代码的区域中将不需要使用${}，如：
<var names="new [] {'alpha', 'beta', 'gamma'}"/>
<for each="var name in names">
<test if="name == 'beta'">
    <p>beta is my favorite.</p>
    <else/>
    <p>${name} is okay too I suppose.
</test>
</for>
但如果你想输出一个普通标签的属性时，标记符号还是需要加上的，如：
<viewdata currentProduct="Product"/>
<p>${currentProduct.Name} <a href="/Product/Edit/${currentProduct.Id}">Edit</a></p>

2，代码中的特殊字符
可以使用所有的C#代码，但是请小心使用，确保你的商业逻辑都写在你的controller或其它代码中
只有很少一部分的代码需要使用特殊的方法去避免被错误解析，如使用[[和]]代替<>，另外，在属性中如果使用了双引号，那么属性中如果使用了spark语法的字符型值时，则需要使用单引号；如果使用单个char常量，使用(char)'x'代替"x"，如：
<viewdata products="IList[[Products]]"/>
<var styles="new[] {'even', 'odd'}"/>

3，配置使用Spark前缀
默认情况下，Spark标签是不需要其它特殊标记的，但是当使用Spark生成xml或xhtml时，配置spark前缀就有必要了，方法如下：
<spark>
<pages prefix="s"/>
</spark>
Or
var settings = new SparkSettings()
.SetPrefix("s");
当配置了前缀时，每个spark标签或属性都需要以前缀开头，以被spark引擎识别，而spark内置的标签如macro:,content:,use:和section:不需要加前缀，如:
<div>
<s:viewdata user="UserInfo"/>
<p s:if="user != null">${user.Name}</p>
<s:LoginForm/>
</div>

4，引入xmlns namespaces至Spark标签中
这个不是太好理解，直接上例子：
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:s="http://sparkviewengine.com/"
      xmlns:fn="http://sparkviewengine.com/macro/">
<body>
<fn:ShowNames favorite="string">
    <s:var names="new [] {'alpha', 'beta', 'gamma'}"/>
    <s:for each="var name in names">
      <s:test if="name == favorite">
        <p>${favorite} is my favorite.</p>
        <s:else/>
        <p>${name} is okay too I suppose.
      </s:test>
    </s:for>
</fn:ShowNames>
${ShowNames("beta")}
${ShowNames("gamma")}
</body>
</html>

五，变量
1，声明局部变量
使用”var“标签可以简单快速的声明局部变量，默认的行为将会是生成一个有初始值的局部动态变量类型”var“，如：
<var styles="new [] {'odd', 'even'}" i="0"/>
将产生如下：
var styles = new [] {"odd", "even"};
var i = 0;
”var“标签有一个”type“属性，可以指明变量的类型，如：
<var foo="null" bar="null" type="string"/>
将产生如下：
string foo = null;
string bar = null;
最后，如果”var“标签没有在一个以”/>“结尾的标签内声明，变量将会有一个作用域，作用域以”</var>“结束，在作用域外不将不能对变量进行赋值，如：
<div>
<var styles="new [] {'even', 'odd'}" i="0">
<p>${i} is ${styles[i%2]}</p>
</var>
<set i="5"/> 
</div>
将产生如下：
Output.Write("<div>");
{
var styles=new[] {"even", "odd"};
var i = 0;
Output.Write("<p>");
Output.Write(i);
Output.Write(" is ");
Output.Write(styles[i%2]);
Output.Write("</p>");
}
Output.Write("</div>");
i = 5;

2，声明全局变量
局部变量有其作用域，而全局变量可以在view，master或局部模板文件中声明，其值可以在任何地方使用，如：
<h2>${Title}</h2>
<global Title="'My Default Title'"/>
注意到其值是以双引号包围，内部还有单引号（可以理解为双引号是因为HTML标签属性值要以双引号包含，而内部是string类型，用单引号避免外部双引号重复使用）
全局变量实际上将会以视图类中的一个字段成员执行，所以上面例子中将将产生一个object Title="My Default Title"的字段成员，任何方法都可以引用这个变量，spark仍然提供一个”type“属性声明具体类型以避免使用object类型，另外，多个变量可以声明要同一个标签中，如：
<global type="string" Foo="'Hello'" Bar="'World'" />

3，设置局部和全局变量的值
${expr}和其它语法只是用于输出值，局部或全局变量的赋值需要使用”set“标签，如：
<html>
<head>
    <global type='string' Title='"Site Name"'/>
    <title>${Title}</title>
</head>
<body>
    <div><use content="view"/></div>
</body>
</html>
在视图中设置Title的值
<set Title='product.Name + " - " + Title'/>

<set Title='string.Format("{0} - {1}", product.Name, Title)'/>

4，使用view data
ViewData作为一个对象字典可以使用形如${ViewData["blah"]}来使用，但是建议使用一个强类型的ViewData将会使操作更为简便，如：
<viewdata
Caption="string"
Products="System.Collections.Generic.IList[[MyApp.Models.Product]]"/>
<div>
<h3>${Caption}</h3>
<div each="var product in Products">
<h4>${product.Name}</h4>
<div>${product.Description}</div>
</div>
</div>
ViewData标签可以声明在view中或是master文件中，结果都是一样的，如：
string Caption
{get {return (string)ViewData["Caption"];}}

System.Collections.Generic.IList<MyApp.Models.Product> Products
{get {return (System.Collections.Generic.IList<MyApp.Models.Product>)ViewData["Products"];}}
在这种情况下，需要使用[[and]]来代替<and>

5，使用view data中的确定类型的model
在view或master文件中viewdata可能有一个model的属性
<viewdata model="MyApp.Models.Catalog"/>
<p>(${ViewData.Model.CatalogID}) ${ViewData.Model.Name} </p>
model的属性可以和其它viewdata中的变量声明共同使用，例如在master文件中使用了一个<viewdata Title="string"/>，在view中仍然可以使用含有一个Title属性的string字段的model，<viewdata model="typename"/>
<viewdata Title="string"/>
<title>${Html.Encode(Title ?? "My Sample MVC Application")}</title>
这一段不好理解，建议大家可以看看英文原文

六，表达式
1，简单的C#表达式
可以使用${expr}或<%=expr%>
例：
<div>
<p>The time is ${DateTime.Now}.</p>
<p>The time is <%=DateTime.Now%>.</p>
</div>

2，Nulls表达式
当使用简单的C#表达式时，如果值为null时，将会输出错误，此时可以使用$!{expr}来避免输出错误，只是输出空值
<div class="shipto">
<p>$!{currentInvoice.ShipTo.FullName}</p>
<p>$!{currentInvoice.ShipTo.Address.City}, $!{currentInvoice.ShipTo.Address.State} $!{currentInvoice.ShipTo.Address.Zip}</p>
</div>
如果是currentInvoice为null或ShipTo为null时，将会输出如下：
<div class="shipto">
<p></p>
<p>, </p>
</div>
这个主意不是太好，不过总比一个乱码错误页好许多，所以确定你的值100%不为空吧

3，使用MVC helpers
可以使用HtmlHelper,UrlHelper和AjaxHelper

<p>${Html.ActionLink("Click me", "Sort")}</p>

<p>${Html.Encode(stuff)}</p>

4，条件标签：if，test和else
使用例子说明：
例1：
<var x='5'/>

<if condition='x == 5'>
<p class='resultmessage'>Some value is five</p>
</if>
例2：
<viewdata user='UserInfo'/>

<if condition='!user.IsLoggedIn()'>
<p>Here's a login form</p>
</if>
<else if='user.HasRole(RoleType.Administrator)'>
<p>Hello - you're an admin</p>
</else>
<else if='user.HasRole(RoleType.Registered)'>
<p>Hello - you're a registered user</p>
</else>
<else>
<p>I have no idea what type of person you are</p>
</else>
例3：
可以使用<test if="">语法来代替<if condition="">语法，<else if=""/>和<else/>来代替分散标签
<viewdata user='UserInfo'/>

<test if='!user.IsLoggedIn()'>
<p>Here's a login form</p>
<else if='user.HasRole(RoleType.Administrator)'/>
<p>Hello - you're an admin</p>
<else if='user.HasRole(RoleType.Registered)'/>
<p>Hello - you're a registered user</p>
<else/>
<p>I have no idea what type of person you are</p>
</test>

5，使用if和elseif判断属性或标签显示
if和elseif可以使用在任何标签中
例1：
<var x='5'/>
<p if='x==5' class='resultmessage'>Some value is five</p>
例2：
<use namespace='SampleApp.Models'/>
<viewdata user='UserInfo'/>

<p if='!user.IsLoggedIn()'>Here's a login form</p>
<p elseif='user.HasRole(RoleType.Administrator)'>Hello - you're an admin</p>
<p elseif='user.HasRole(RoleType.Registered)'>Hello - you're a registered user</p>
<else>
<p>I have no idea what type of person you are</p>
</else>

6，一次判断
在页面中只需要调入一次某个资源，如css文件或jquery，可标签中使用once="flagname"还指明，你当然可以使用${expr}或其它语法来为flagname赋值，实际上在spark文件的任何地方都可以使用这样的表达式
<content name="head">

<script once="jquery" type="text/javascript" src="~/content/js/jquery-1.2.6.js"/>
<script once="jquery-countdown" type="text/javascript" src="~/content/js/jquery.countdown.js"/>
</content>
这里不是太明白

7，有条件的属性输出
使用?{boolean}表达式只能用在属性值中，例：
<ul>
<li each="var product in Products" class="first?{productIsFirst} last?{productIsLast}">
${H(product.Name)}
</li>
</ul>
将会输出
<ul>
<li class="first">Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li class=" last">Delta</li>
</ul>
or
<ul>
<li class="first last">just one product</li>
</ul>
如果属性值为空，那么将表现如下：
<input type="checkbox" name="chkhello" checked="?{isHelloChecked}"></input>
将会输出
<input type="checkbox" name="chkhello" checked=""></input>
or
<input type="checkbox" name="chkhello"></input>

8，循环
一个foreach循环包含标签for和each属性，each属性值必须包含类型，变量名，关键字"in"和循环体（collection），如：
<viewdata Posts="IList[[MyApp.Models.Post]"/>
<for each="var post in Posts">
<p>${post.Title}</p>
</for>
任何一个循环都有Index，Count，IsFirst和IsLast属性，在循环作用域内有效，而且只有被使用了才会生成，如：
<viewdata Posts="IList[[MyApp.Models.Post]"/>
<var styles="new[] {'even','odd'}"/>
<for each="var post in Posts">
<p class="${styles[postIndex%2]}">${postIndex}. ${post.Title}</p>
</for>
在循环时，如果使用了Count或IsLast变量，spark将会使用IEnumerable<T>的Linq方法后，使用Count()取得，而旧的spark引擎会先循环一次以取得count，所以使用Count和IsLast时，请注意性能问题
以下是局部变量和循环的复杂使用
<viewdata currentProductId="int"/>
<var styles="new [] {'even', 'odd'}" isCurrent="false">
<for each="var product in Products" isCurrent="product.Id==currentProductId">
<p class="highlighted?{isCurrent} ${styles[productIndex%2]}">${Html.Encode(product.Name)}</p>
</for>
</var>

9，在标签属性中使用循环
例1：
<table>
<tr>
    <td>Name</td>
    <td>Type</td>
</tr>
<tr each='var user in users'>
    <td>${user.Name}</td>
    <td>${user.UserType}</td>
</tr>
</table>
例2：
<table>
<tr>
    <td>Name</td>
    <td>Type</td>
</tr>
<var classes="new [] {'even','odd'}">
    <tr each="var user in users" class="${classes[userIndex%2]}">
      <td>${userIndex}) ${user.Name}</td>
      <td>${user.UserType}</td>
    </tr>
</var>
</table>

10，使用命名空间
<use namespace="System.Collections.Generic"/>
<use namespace="System.Web.Mvc"/>
<viewdata Names="IList[[string]]"/>
不好说明

11，内置代码
使用”#“符号声明当前行为C#代码，如：
<test if="user.IsLoggedIn()">
<p>Hello, ${user.Name}.</p>
<else if="user.HasValidTrialSession()"/>
<p>Hello, Valued Future Customer.</p>
<else/>
<p>Hello, er... you.</p>
# System.Diagnostic.Trace.WriteLine("Unexpected anon user.");
# if (System.Diagnostic.Debugger.IsAttached)
# System.Diagnostic.Debugger.Break();
</test>
这里需要说明的是spark变量和C#变量是可以通用的！

12，声明宏
当需要一个helper方法时，如需要输入一些参数和返回一个字符串时，<macro>就可以做这些事情了，声明时使用形如<macro name="foot">，然后使用时用${foo()}或<%=foo()%>，例：
<viewdata errorMessage="string" />

<macro name="ShowError" caption="string" message="string">
<div class="message error">
<h3>${H(caption)}</h3>
<div>${message}</div>
<% Logger.Warn(caption); %> 
</div>
</macro>

<h2>Place Order</h2>
<test if="!string.IsNullOrEmpty(errorMessage)">
${ShowError("Failed to place order", errorMessage)}
</test>
将会产生如下：
string ShowError(string caption, string message)
{
using(OutputScope(new System.IO.StringWriter()))
{
    Output.Write("\r\n <div class=\"message error\">\r\n    <h3>");
    Output.Write(H(caption));
    Output.Write("</h3>\r\n    <div>");
    Output.Write(message);
    Output.Write("</div>\r\n    ");
    Logger.Warn(caption);
    Output.Write(" </div>\r\n");
    return Output.ToString();
}
}

//... and in the RenderViewContent method
Output.Write("\r\n<h2>Place Order</h2>\r\n");
if (!string.IsNullOrEmpty(errorMessage))
{
Output.Write(ShowError("Failed to place order", errorMessage));
} // if (!string.IsNullOrEmpty(errorMessage))
Output.Write("\r\n\r\n\r\n\r\n");

太多了，今天先写到这，觉得不错，麻烦推荐一个

本文链接

JS面向对象、prototype、call()、apply()和实例

2010-10-14T03:18:00Z

文章排版有问题，首先是转载，地址：http://jaychaoqun.javaeye.com/blog/392110

接下来是理解之后的实例

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易拖放效果</title>
</head>
<body>
<script>
//参考：http://www.javaeye.com/topic/57760
//http://jaychaoqun.javaeye.com/blog/392110

//简化id选择器
var isIE = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

//初始化一个 Class 对象，它有一个成员，是一个方法，这个方法返因另一个方法（方法是对象，所以可以作为参数或者返回值）
var Class = {
create: function() {
return function() {//使用new操作符时，就会在新产生的对象上调用这个方法
this.initialize.apply(this, arguments); //这里就是调用 this 对象上的 initialize方法，并传递 arguments，这里的this是new之后构造出来的对象
}
}
}

//继承，这里没有用到
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}

//参数传递
//object参数，fun方法
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}

//事件传递
//object参数，fun方法
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
}

//事件绑定
//oTarget绑定目标，sEventType事件类型，fnHandler事件方法
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {//FF
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {//IE
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};

//移除事件绑定
//oTarget绑定目标，sEventType事件类型，fnHandler事件方法
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {//FF
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {//IE
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};

//SimpleDrag是一个方法，方法体，这里相当于一个类
var SimpleDrag = Class.create();
SimpleDrag.prototype = {
//对象初始化，实现Class中的this.initialize
initialize: function(drag) {
this.Drag = $(drag);//绑定目标
this._x = this._y = 0;//初始值
this._fnMove = BindAsEventListener(this, this.Move);
this._fnStop = Bind(this, this.Stop);
this.Drag.style.position = "absolute";
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));//监听鼠标按下事件
},
//准备拖动
Start: function(oEvent) {
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
addEventHandler(document, "mousemove", this._fnMove);//对象开始拖动后，监听鼠标移动事件
addEventHandler(document, "mouseup", this._fnStop);//同时监听鼠标放开事件
},
//拖动
Move: function(oEvent) {
this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";
},
//停止拖动
Stop: function() {
removeEventHandler(document, "mousemove", this._fnMove);
removeEventHandler(document, "mouseup", this._fnStop);
}
};
</script>
<div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div>
<script>
new SimpleDrag("idDrag");
</script>
</body>
</html>

本文链接

javascript没那么简单

2010-08-02T01:07:00Z

写在前面：
似乎园子里最近少了些人，各个文章的阅读量少了许多
废话不说，写此文目的是为了让更多的程序员理解javascript的一些概念，对是理解不是了解
我们已经了解得够多了，该是向深入理解的方向靠拢的时候了
为什么这么说，前些日子收到面试邀请，那就去试试呗，有几年没有面试过了吧
和面试官坐在沙发上，聊天式的他问我答，以下就是几个javascript方面的问题
>请创建一个对象，包括几个公有属性，接下来是为对象创建一个公有方法，然后为对象创建几个私有属性，一个私有方法
说实话，这几个问题我默名其妙，要是他让我用jquery写个拖动插件什么的，我估计我能写挺好，原生的javascript，晕，虽然我看过jquery源码解读，但这些基本概念要命
稍后，我会在正文中将答案写出来
如果面试官在看，说声谢谢，面试完之后我就去深圳购书中心买javascript去了，好贵，呵呵，看中之后，到卓越定了一个《javascript王者归来》
然后基本上啥也没干，仔细的看了一个多星期，看不明白的就到园子里来找，园子里的宝贝真不少！（还压了个韵。。。）
本文的例子输出使用如下方法，便于查看
function dwn(s){
document.write(s+"<br/>");
}
以下内容有些是原创，有些来自于网络，或者可以看成是读书笔记，如果有哪里不对的，请各位不吝赐教，在下感激不尽

正文开始：
一，function
从一开始接触到js就感觉好灵活，每个人的写法都不一样，比如一个function就有N种写法
如：function showMsg(){}，var showMsg=function(){}，showMsg=function(){}
似乎没有什么区别，都是一样的嘛，真的是一样的吗，大家看看下面的例子
///------------------------------------------------------------------------------------------------
//函数定义：命名函数（声明式），匿名函数（引用式）
//声明式，定义代码先于函数执行代码被解析
function t1(){
dwn("t1");
}
t1();
function t1(){
dwn("new t1");
}
t1();
//引用式，在函数运行中进行动态解析
var t1=function(){
dwn("new new t1");
}
t1();
var t1=function(){
dwn("new new new t1");
}
t1();
//以上输出：new t1,new t1,new new t1,new new new t1
可能想着应该是输出t1,new t1,new newt1,new new new t1，结果却并不是这样，应该理解这句话：声明式，定义代码先于函数执行代码被解析
如果深入一步，应该说是scope链问题，实际上前面两个方法等价于window.t1，可以理解为t1是window的一个公有属性，被赋了两次值，以最后一次赋值为最终值
而后面两个方法，可以理解为是t1是个变量，第四个方法的var去掉之后的结果仍然不会改变
然而，当第四个方法改成function t1(){}这样的声明式时，结果变成了new new new t1,new new new t1,new new t1,new new t1
前面两个按照我的理解可以很好的理解为什么是这个答案，第三个也可以理解，但是最后一个输出让我比较纠结，希望有高手出现解答一下
另外匿名函数还有(function(){...})()这样的写法，最后一个括号用于参数输入
还有var t1=new function(){..}这样的声明，实际上t1已经是一个对象了
例：
var t2 = new function()
{
     var temp = 100; //私有成员
     this.temp = 200; //公有成员，这两个概念会在第三点以后展开说明
     return temp + this.temp;
}

alert(typeof(t2));   //object
alert(t2.constructor());  //300
除此之外，还有使用系统内置函数对象来构建一个函数，例：
var t3 = new Function('var temp = 100; this.temp = 200; return temp + this.temp;'); //这个位置加不加new结果都一样，WHY
alert(typeof(t3)); //function
alert(t3());  //300

二，创建对象
首先我们理解一下面向对象编程（Object-Oriented Programming,OOP），使用OOP技术，常常要使用许多代码模块，每个模块都提供特定的功能，每个模块都是孤立的，甚至与其它模块完全独立
。这种模块化编程方法提供了非常大的多样性，大大增加了代码的重用机会。可以举例进一步说明这个问题，假定计算机上的一个高性能应用程序是一辆一流赛车。如果使用传统的编程技巧，这辆赛车就是
一个单元。如果要改进该车，就必须替换整个单元，把它送回厂商，让汽车专家升级它，或者购买一个新车。如果使用OOP技术，就只需从厂商处购买新的引擎，自己按照说明替换它，而不必用钢锯切割车体。
不过大部分的论点是，javascript并不是直接的面向对象的语言，但是通过模拟可以做到很多面向对象语言才能做到的事，如继承，多态，封装，javascript都能干（没有做不到，只是想不到）
///------------------------------------------------------------------------------------------------
//以下三种构造对象的方法
//new Object，实例化一个Object
var a=new Object();
a.x=1,a.y=2;
//对象直接量
var b={x:1,y:2};
//定义类型
function Point(x,y){ //类似于C#中的类
this.x=x;
this.y=y;
}
var p=new Point(1,2); //实例化类
第一种方法通过构造基本对象直接添加属性的方法来实现，第二种和第一种差不多，可以看成是第一种方法的快捷表示法
第三种方法中，可以以”类“为基础，创造多个类型相同的对象

三，对象属性的封装（公有和私有）
以例子来说明
function List(){
var m_elements=[]; //私有成员，在对象外无法访问，如果此处无var声明，则m_elements将变成全局变量，这样外部是可以直接访问到的，如alert(m_elements[0])
m_elements=Array.apply(m_elements,arguments);
//此处模拟getter，使用时alist.length;
//等价于getName()方式：this.length=function(){return m_elements.length;}，使用时alist.length();
//公有属性，可以通过"."运算符或下标来访问
this.length={
  valueOf:function(){
   return m_elements.length;
  },
  toString:function(){
   return m_elements.length;
  }
}
//公有方法，此方法使用得alert(alist)相当于alert(alist.toString())
this.toString=function(){
  return m_elements.toString();
}
//公有方法
this.add=function(){
  m_elements.push.apply(m_elements,arguments);
}
//私有方法如下形式，这里涉及到了闭包的概念，接下来继续说明
//var add=function()或function add()
//{
//m_elements.push.apply(m_elements,arguments);
//}
}
var alist=new List(1,2,3);
dwn(alist); //=alert(alist.toString())，输出1,2,3
dwn(alist.length); //输出3
alist.add(4,5,6);
dwn(alist); //输出1,2,3,4,5,6
dwn(alist.length); //输出6

四，属性和方法的类型
javascript里，对象的属性和方法支持4种不同的类型：private property(私有属性)，dynamic public property(动态公有属性)，static public property/prototype property(静态公有属性或原型属性)，
static property(静态属性或类属性)。私有属性对外界完全不具备访问性，可以通过内部的getter和setter（都是模拟）；动态公有属性外界可以访问，每个对象实例持有一个副本，不会相互影响；原型
属性每个对象实例共享唯一副本；类属性不作为实例的属性，只作为类的属性。
以下是例子：
///------------------------------------------------------------------------------------------------
//动态公有类型，静态公有类型（原型属性）
function myClass(){
var p=100; //private property
this.x=10; //dynamic public property
}
myClass.prototype.y=20; //static public property or prototype property，动态为myClass的原型添加了属性，将作用于所有实例化了的对象，注意这里用到了prototype，这是一个非常有用的东东
//要想成为高级javascript阶段，prototype和闭包必须得理解和适当应用
myClass.z=30; //static property

var a=new myClass();
dwn(a.p) //undefined
dwn(a.x) //10
dwn(a.y) //20
a.x=20;
a.y=40;
dwn(a.x); //20
dwn(a.y); //40
delete(a.x); //删除对象a的属性x
delete(a.y); //删除对象a的属性y
dwn(a.x); //undefined
dwn(a.y); //20 静态公有属性y被删除后还原为原型属性y
dwn(a.z); //undefined 类属性无法通过对象访问
dwn(myClass.z);

五，原型（prototype）
这里只讲部分，prototype和闭包都不是几句话都能讲清楚的，如果这里可以给你一些启蒙，则万幸矣
习语”照猫画虎“，这里的猫就是原型，虎是类型，可以表示成：虎.prototype=某只猫 or 虎.prototype=new 猫()
因为原型属性每个对象实例共享唯一副本，所以当实例中的一个调整了一个原型属性的值时，所有实例调用这个属性时都将发生变化，这点需要注意
以下是原型关系的类型链：
function ClassA(){
}
ClassA.prototype=new Object();
function ClassB(){
}
ClassB.prototype=new ClassA();
function ClassC(){
}
ClassC.prototype=new ClassB();
var obj=new ClassC();
dwn(obj instanceof ClassC); //true
dwn(obj instanceof ClassB); //true
dwn(obj instanceof ClassA); //true
dwn(obj instanceof Object); //true
带默认值的Point对象：
function Point2(x,y){
if (x) this.x=x;
if (y) this.y=y;
}
//设定Point2对象的x,y默认值为0
Point2.prototype.x=0;
Point2.prototype.y=0;
//p1是一个默认(0,0)的对象
var p1=new Point2(); //可以写成var p1=new Point2也不会出错，WHY
//p2赋值
var p2=new Point2(1,2);
dwn(p1.x+","+p1.y); //0,0
dwn(p2.x+","+p2.y); //1,2
delete对象的属性后，原型属性将回到初始化的状态：
function ClassD(){
this.a=100;
this.b=200;
this.c=300
}
ClassD.prototype=new ClassD(); //将ClassD原有的属性设为原型，包括其值
ClassD.prototype.reset=function(){ //将非原型属性删除
for (var each in this) {
delete this[each];
}
}
var d=new ClassD();
dwn(d.a); //100
d.a*=2;
d.b*=2;
d.c*=2;
dwn(d.a); //200
dwn(d.b); //400
dwn(d.c); //600
d.reset(); //删掉非原型属性，所有回来原型
dwn(d.a); //100
dwn(d.b); //200
dwn(d.c); //300

六，继承
如果两个类都是同一个实例的类型，那么它们之间存在着某种关系，我们把同一个实例的类型之间的泛化关系称为继承。C#和JAVA中都有这个，具体的理解就不说了。
在javascript中，并不直接从方法上支持继承，但是就像前面说的，可以模拟啊
方法可以归纳为四种：构造继承法，原型继承法，实例继承法和拷贝继承法。融会贯通之后，还有混合继续法，这是什么法，就是前面四种挑几种混着来~
以下例子来源于王者归来，其中涉及到了apply,call和一些Array的用法，有兴趣的可以自己在园子里搜索一下
1，构造继续法例子：
//定义一个Collection类型
function Collection(size)
{
  this.size = function(){return size}; //公有方法，可以被继承
}

Collection.prototype.isEmpty = function(){   //静态方法，不能被继承
  return this.size() == 0;
}

//定义一个ArrayList类型，它"继承"Collection类型
function ArrayList()
{
  var m_elements = []; //私有成员，不能被继承
  m_elements = Array.apply(m_elements, arguments);

  //ArrayList类型继承Collection
  this.base = Collection;
  this.base.call(this, m_elements.length);

  this.add = function()
  {
   return m_elements.push.apply(m_elements, arguments);
  }
  this.toArray = function()
  {
   return m_elements;
  }
}

ArrayList.prototype.toString = function()
{
  return this.toArray().toString();
}
//定义一个SortedList类型，它继承ArrayList类型
function SortedList()
{
  //SortedList类型继承ArrayList
  this.base = ArrayList;
  this.base.apply(this, arguments);

  this.sort = function()
  {
   var arr = this.toArray();
   arr.sort.apply(arr, arguments);
  }
}

//构造一个ArrayList
var a = new ArrayList(1,2,3);
dwn(a);
dwn(a.size()); //a从Collection继承了size()方法
dwn(a.isEmpty); //但是a没有继承到isEmpty()方法

//构造一个SortedList
var b = new SortedList(3,1,2);
b.add(4,0); //b 从ArrayList继承了add()方法
dwn(b.toArray()); //b 从ArrayList继承了toArray()方法
b.sort(); //b 自己实现的sort()方法
dwn(b.toArray());
dwn(b);
dwn(b.size()); //b从Collection继承了size()方法
2，原型继承法例子：
//定义一个Point类型
function Point(dimension)
{

this.dimension = dimension;
}

//定义一个Point2D类型，"继承"Point类型
function Point2D(x, y)
{
  this.x = x;
  this.y = y;
}
Point2D.prototype.distance = function()
{
  return Math.sqrt(this.x * this.x + this.y * this.y);
}
Point2D.prototype = new Point(2);  //Point2D继承了Point

//定义一个Point3D类型，也继承Point类型
function Point3D(x, y, z)
{
  this.x = x;
  this.y = y;
  this.z = z;
}
Point3D.prototype = new Point(3);  //Point3D也继承了Point

//构造一个Point2D对象
var p1 = new Point2D(0,0);
//构造一个Point3D对象
var p2 = new Point3D(0,1,2);

dwn(p1.dimension);
dwn(p2.dimension);
dwn(p1 instanceof Point2D); //p1 是一个 Point2D
dwn(p1 instanceof Point); //p1 也是一个 Point
dwn(p2 instanceof Point); //p2 是一个Point
以上两种方法是最常用的
3，实例继承法例子：
在说此法例子之前，说说构造继承法的局限，如下：
function MyDate()
{
this.base = Date;
this.base.apply(this, arguments);
}
var date = new MyDate();
alert(date.toGMTString); //undefined，date并没有继承到Date类型，所以没有toGMTString方法
核心对象的某些方法不能被构造继承，原因是核心对象并不像我们自定义的一般对象那样在构造函数里进行赋值或初始化操作
换成原型继承法呢？，如下：
function MyDate(){}
MyDate.prototype=new Date();
var date=new MyDate();
alert(date.toGMTString); //'[object]'不是日期对象，仍然没有继承到Date类型！
现在，换成实例继承法：
function MyDate()
{
  var instance = new Date(); //instance是一个新创建的日期对象
  instance.printDate = function(){
   document.write("<p> "+instance.toLocaleString()+"</p> ");
  } //对instance扩展printDate()方法
  return instance; //将instance作为构造函数的返回值返回
}
var myDate = new MyDate();
dwn(myDate.toGMTString()); //这回成功输出了正确的时间字符串，看来myDate已经是一个Date的实例了，继承成功
myDate.printDate(); //如果没有return instance，将不能以下标访问，因为是私有对象的方法
4，拷贝继承法例子：
Function.prototype.extends = function(obj)
{
for(var each in obj)
{
  this.prototype[each] = obj[each];
  //对对象的属性进行一对一的复制，但是它又慢又容易引起问题
  //所以这种“继承”方式一般不推荐使用
}
}
var Point2D = function(){
//……
}
Point2D.extends(new Point())
{
//……
}
这种继承法似乎是用得很少的。
5，混合继承例子：
function Point2D(x, y)
{
this.x = x;
this.y = y;
}
function ColorPoint2D(x, y, c)
{
Point2D.call(this, x, y); //这里是构造继承，调用了父类的构造函数
//从前面的例子看过来，这里等价于
//this.base=Point2D;
//this.base.call(this,x,y);
this.color = c;
}
ColorPoint2D.prototype = new Point2D();  //这里用了原型继承，让ColorPoint2D以Point2D对象为原型

本来还想继续写闭包，不过写这个还真是很难，我也是废了好几个小时的力气才算勉强弄明白，推荐以下博文：
http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530074.html#1884486

希望以上文章对读者有启发，如果有错误，请留言，如果觉得还不错，可以点击右下的推荐给更多的人

本文链接

一步一步制作jquery插件Tabs（ajax只请求一次效果，78行完成）

2010-07-06T02:43:00Z

tabs是现在网页应用最广的一种效果，jquery插件和非jquery插件也有不少，有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次

原来我想其实很简单，看看官方的API就了解，不过我在回复这些朋友之前，用firebug查看了官方的ui.tabs发现，声明了ajax缓存，每点一个tabs时，仍然会有服务器请求

这应该是服务器缓存，而不是实际上我们要求的只ajax一次，不再请求服务器了

接下来我找了一下其它的tabs插件，基本上没有符合要求的，不是太庞大就是太简单，太过庞大的话不如用ui.tabs，文档和代码规范上都是可靠的

因此，自制一个简洁的tabs插件还是有必要的

在设计之前，先整理好思路，实现tabs，自动轮换，ajax等主要功能，然后是dom的排列形式，这里采用传统的

<ul>

</ul>

<div id="tabs1">Hello World!</div>

</div>

一个li对应一个div的方式，当ajax时，添加一个a的rel属性，并将内容写入对应的div中，再去掉rel属性，这样就只请求服务器一次，接下来都是div已经写入的内容了

我这里没有使用cookie，可以结合jquery.cookie插件，这样即使用户关闭网页下次再打开，也不用请求服务器了

一，首先写个jquery插件的闭包，园子里这两天有个朋友写了javascript的闭包概念，挺好的，有兴趣的朋友去看看

(function ($) {
//code here
})(jQuery);

二，插件命名，这里命名为aTabs，这样绑定的时候可以用$(...).aTabs()，本人英文名Allen，所以用a字头命名了~

$.fn.aTabs = function (options) {
//api
//main function
}

三，把想好的功能写成API，供外部修改

$.fn.aTabs.defaults = {
firstOn: 0,
className: 'selected',
eventName: 'all', //click,mouserover,all
loadName: '加载中...', //ajax等待字符串
fadeIn: 'normal',
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({}, $.fn.aTabs.defaults, options); //这里可以将外部输入的代替掉默认的值，$.extend作用详见 http://api.jquery.com/jQuery.extend/，看不懂英文的直接看其中的例子就行

四，编写主体功能，说明在代码中看注释

return this.each(function () { //这里为每个绑定dom插件
var target = $(this);
var div = target.children().not("ul,span"); //所有的tabs显示体div
var tabs = target.find('ul:eq(0) li'); //所有的tabs头部索引
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}

function tabsShow(div, li, index) {
div.stop(true, true).hide();
//自动轮换用
if (typeof (index) == "number") {
if (li.find("a").attr("rel")) ajax(div, li);
$(div[index]).stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
$(tabs[index]).stop(true, true).addClass(opts.className);
}
//非自动轮换
else {
var tabBody = div.filter(li.find("a").attr("href"));
if (li.find("a").attr("rel")) ajax(div, li);
tabBody.stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
li.stop(true, true).addClass(opts.className);
}
}

function ajax(div, li) {//这里是关键ajax，通过操作rel的方式实现只请求服务器一次
var href = li.find("a").attr("href");
var rel = li.find("a").attr("rel"); //ajax请求url
var i = div.filter(href); //当前div
if (rel) { //如果ajax请求url不为空，只ajax一次
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('加载错误，请重试！');
}
});
li.find("a").removeAttr("rel"); //只ajax一次
}
}
if (opts.autoFade) {
var index = opts.firstOn + 1;
setInterval(function () {
if (index >= div.length) {
index = 0;
}
tabsShow(div, $(this), index++);
}, opts.autoFadeTime * 1000);
}

tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件
});

最后，将以上整合，tabs插件就诞生了，下面是全部源码：

/*
* 作者：黑曜石
*/
(function ($) {
$.fn.aTabs = function (options) {
$.fn.aTabs.defaults = {
firstOn: 0,
className: 'selected',
eventName: 'all', //click,mouserover,all
loadName: '加载中...', //ajax等待字符串
fadeIn: 'normal',
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({}, $.fn.aTabs.defaults, options);

return this.each(function () {
var target = $(this);
var div = target.children().not("ul,span"); //所有的tabs显示体div
var tabs = target.find('ul:eq(0) li'); //所有的tabs头部索引
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}

function tabsShow(div, li, index) {
div.stop(true, true).hide();
//自动轮换用
if (typeof (index) == "number") {
if (li.find("a").attr("rel")) ajax(div, li);
$(div[index]).stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
$(tabs[index]).stop(true, true).addClass(opts.className);
}
//非自动轮换
else {
var tabBody = div.filter(li.find("a").attr("href"));
if (li.find("a").attr("rel")) ajax(div, li);
tabBody.stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
li.stop(true, true).addClass(opts.className);
}
}

function ajax(div, li) {
var href = li.find("a").attr("href");
var rel = li.find("a").attr("rel"); //ajax请求url
var i = div.filter(href); //当前div
if (rel) { //如果ajax请求url不为空，只ajax一次
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('加载错误，请重试！');
}
});
li.find("a").removeAttr("rel"); //只ajax一次
}
}
if (opts.autoFade) {
var index = opts.firstOn + 1;
setInterval(function () {
if (index >= div.length) {
index = 0;
}
tabsShow(div, $(this), index++);
}, opts.autoFadeTime * 1000);
}

tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件
});
};
})(jQuery);

本文链接

封装jQuery表格插件jqGrid，控件化jqGrid(三）：查询，编辑，修改，删除

2010-06-09T04:43:00Z

上两篇：

封装jQuery表格插件jqGrid，控件化jqGrid（一）：显示

封装jQuery表格插件jqGrid，控件化jqGrid（二）：显示

本文将编码表格的动作功能，查询，编辑，修改和删除，并在文末附上源码，供大家参考，一起讨论，希望可以抛砖引玉！

一，在jqGrid.cs控件主体类中加入属性，用于控制这些功能的开关

#region 动作按钮
private bool _search = false;
private bool _add = false;
private bool _edit = false;
private bool _del = false;
[Description("是否可查询，默认否")]
public bool Search
{
get { return _search; }
set { _search = value; }
}
[Description("是否可添加，默认否")]
public bool Add
{
get { return _add; }
set { _add = value; }
}
[Description("是否可编辑，默认否")]
public bool Edit
{
get { return _edit; }
set { _edit = value; }
}
[Description("是否可删除，默认否")]
public bool Del
{
get { return _del; }
set { _del = value; }
}
#endregion

相应的，需要在构造jqGrid页面JS时，构造相应的JS脚本，代码大家自己下源码可以看到。

二，做完了控件类，现在开始数据提供类的编码，这也是最核心的。

1）查询

可以用firebug看到jqGrid查询时，使用的是get方式，所以用Request.QueryString的方式取得控件传过来的值

看到传来的的_search参数控件查询的开关，当值为true时，查询打开

本控件仅使用复合查询的方式，并且默认使用“包含”，“大于等于”和“小于等于”，前者符合大部分的通用查询的要求，后者使得查询处理更简单些

其形式如：{"groupOp":"AND","rules":[{"field":"email","op":"cn","data":"1"},{"field":"orderno","op":"ge","data":"2"}]}

使用复合查询时，传过来的查询值是以json的方式包含在filters参数中的，因此，要使用其值，需要对其值进行JSON的反序列化，这里使用DataContractJsonSerializer，需要在类中using System.Runtime.Serialization.Json，工程中也要加入其引用，其核心代码如下：

//反序列化json
string conditions = HttpUtility.UrlDecode(context.Request.QueryString["filters"].ToString());
var mStream = new MemoryStream(Encoding.UTF8.GetBytes(conditions)); //解决中文乱码问题
//var mStream = new MemoryStream(Encoding.Unicode.GetBytes(conditions));
DataContractJsonSerializer dcjson = new DataContractJsonSerializer(typeof(jqGridFilter));
jqGridFilter filters = (jqGridFilter)dcjson.ReadObject(mStream);
//jqGridFilter filters = (jqGridFilter)dcjson.ReadObject(mStream);

另外，还需要新建一个类，用于对应反序列化

[DataContract]
class jqGridFilter
{
//{"groupOp":"AND","rules":[{"field":"email","op":"cn","data":"1"},{"field":"orderno","op":"ge","data":"2"}]}
private string groupOp = "AND";
private List<jqGridFilterRules> jqGridFilterRulesList;
[DataMember(Name="groupOp")]
public string GroupOp
{
get { return groupOp; }
set { groupOp = value; }
}
[DataMember(Name = "rules")]
public List<jqGridFilterRules> JqGridFilterRulesList
{
get { return jqGridFilterRulesList; }
set { jqGridFilterRulesList = value; }
}
}

[DataContract]
class jqGridFilterRules
{
private string field;
private string op;
private string data;
[DataMember(Name = "field")]
public string Field
{
get { return field; }
set { field = value; }
}
[DataMember(Name = "op")]
public string Op
{
get { return op; }
set { op = value; }
}
[DataMember(Name = "data")]
public string Data
{
get { return data; }
set { data = value; }
}
}

注意类名上的DataContract声明和参数中的形如[DataMember(Name="groupOp")]的声明，这是反序列化所必须的，具体的大家可以搜索一下，这里就不做详细说明了

以上就完成了查询条件方面的参数分析和清理，现在对这些东东进行数据库交互

if (filters.GroupOp == "AND")
{
foreach(jqGridFilterRules rules in filters.JqGridFilterRulesList)
{
switch (rules.Op)
{
case "cn":
searchCase += " and " + rules.Field + " like '%" + rules.Data + "%'";
break;
case "ge":
searchCase += " and " + rules.Field + ">='" + rules.Data + "'";
break;
case "le":
searchCase += " and " + rules.Field + "<='" + rules.Data + "'";
break;
default:
break;
}
}
}
else
{
searchCase += " and (1<>1";
foreach (jqGridFilterRules rules in filters.JqGridFilterRulesList)
{
switch (rules.Op)
{
case "cn":
searchCase += " or " + rules.Field + " like '%" + rules.Data + "%'";
break;
case "ge":
searchCase += " or " + rules.Field + ">='" + rules.Data + "'";
break;
case "le":
searchCase += " or " + rules.Field + "<='" + rules.Data + "'";
break;
default:
break;
}
}
searchCase += ")";
}

注意到or条件时，searchCase += " and (1<>1"这样的形式，这个小技巧，大家可以在sql中自己试试看，这样可以解决拼接SQL条件时or开头的问题，在第一篇中还有1=1的形式，同样的，也是可以解决and开头的问题。这个是我师傅教的，自认为是一个很牛比的小技巧。

查询至些就OVER了。

2）编辑，删除，添加

在设计控件之初，就为这个编辑伤脑筋，每个表的字段都不一样，类型也不一样，用反射吗，不灵活，也好麻烦，不能控件到细部

用entity framework吧，这个好，自动取到post过来的值，自动更新model，不过要依赖entity，更不通用。

后来想到配置用XML，问题一通百通，不管是表体的呈现灵活还是数据提供类的方面，都可以解决掉。

此三个功能都是使用post方式传递各项值，了解这点以后就很方便了，直接拼接SQL就可以完成这三个功能，很简单

#region 添?加ó，?修T改?，?删?除y
case "edit":
string tableName = context.Request.QueryString["tablename"].ToString();
string idKey = string.Empty;
string oper = context.Request.Form["oper"].ToString();
string xmlPath = System.AppDomain.CurrentDomain.BaseDirectory + tableName + ".xml";
StringBuilder sb;
XmlDocument xmlDoc = new XmlDocument();
XmlNodeList xnList = xmlDoc.SelectNodes("root//columns");
xmlDoc.Load(xmlPath);
foreach (XmlNode xn in xnList)
{
if (xn.Attributes["IsIdentity"] != null)
{
idKey = xn.Attributes["name"].Value;
}
}

switch (oper)
{
case "edit":
sb = new StringBuilder();
sb.Append("update " + tableName + " set ");
foreach (XmlNode xn in xnList)
{
if (xn.Attributes["IsIdentity"] == null || xn.Attributes["IsIdentity"].Value == "False")
{
if (context.Request.Form[xn.Attributes["name"].Value].ToString() != string.Empty)
{
if (xn.Attributes["sorttype"].Value == "int" || xn.Attributes["sorttype"].Value == "float")
{
sb.Append(xn.Attributes["name"].Value + "=" + HttpUtility.UrlDecode(context.Request.Form[xn.Attributes["name"].Value].ToString()) + ",");
}
else
{
sb.Append(xn.Attributes["name"].Value + "='" + HttpUtility.UrlDecode(context.Request.Form[xn.Attributes["name"].Value].ToString()) + "',");
}
}
}
}
sb.Remove(sb.Length - 1, 1);
sb.Append(" where id=" + context.Request.Form[idKey].ToString());
SqlHelper.ExecuteNonQuery(sb.ToString());
break;
case "add":
sb = new StringBuilder();
StringBuilder fieldstr = new StringBuilder();
StringBuilder valuestr = new StringBuilder();
foreach (XmlNode xn in xnList)
{
if (xn.Attributes["IsIdentity"] == null || xn.Attributes["IsIdentity"].Value == "False")
{
if (context.Request.Form[xn.Attributes["name"].Value].ToString() != string.Empty)
{
fieldstr.Append(xn.Attributes["name"].Value + ",");
if (xn.Attributes["sorttype"].Value == "int" || xn.Attributes["sorttype"].Value == "float")
{
valuestr.Append(HttpUtility.UrlDecode(context.Request.Form[xn.Attributes["name"].Value].ToString()) + ",");
}
else
{
valuestr.Append("'" + HttpUtility.UrlDecode(context.Request.Form[xn.Attributes["name"].Value].ToString()) + "',");
}
}
}
}
fieldstr.Remove(fieldstr.Length - 1, 1);
valuestr.Remove(valuestr.Length - 1, 1);
sb.Append("insert into " + tableName + " (");
sb.Append(fieldstr.ToString());
sb.Append(") values (");
sb.Append(valuestr.ToString());
sb.Append(")");
SqlHelper.ExecuteNonQuery(sb.ToString());
break;
case "del":
string sql="delete from "+tableName+" where id="+context.Request.Form[idKey].ToString();
SqlHelper.ExecuteNonQuery(sql);
break;
default:
break;
}
#endregion

文章有点长了，本来再慢慢写的，不过这几天很忙，一次写完吧，还是那句话，希望可以抛砖引玉。

这里是源码下载：http://files.cnblogs.com/bestfc/AspJqGrid.rar

使用方法：

web.config中加入

页面中加入jquery.js和jquery.ui.css后，写入

<AllenJqGrid:JqGrid ID="MyJqGrid" runat="server" TableName="orders" Search="true" Scroll="true" Add="true" Edit="true" Del="true" />，就OK了。

配置文件自动生成在页面文件所在目录，生成会判断是否有配置文件，有则读，无则生成后再读。

本文链接

封装jQuery表格插件jqGrid，控件化jqGrid（二）：显示

2010-06-08T01:09:00Z

接上一篇http://www.cnblogs.com/bestfc/archive/2010/06/07/1753216.html

本文编码数据提供类

1，创建AjaxData类，继承接口IHttpHandler，实现其方法public void ProcessRequest(HttpContext context)和参数public bool IsReusable

2，使用SqlHelper类与数据库进行交互（在MVC中可以使用entity framework提供数据，当然在MVC中，最好就不要使用服务器控件了，可以直接输出字符串）

3，在AjaxData类中，创建两个方法

public string jsonString(HttpContext context)用于处理接收到的基本数据，最后经过以下方法返回数据的json字符串

其代码如下：

其中使用到了SqlHelper.cs提供的SQL2005存储过程。

public string DataTableToJson(DataTable dt, int page, int total, int records, XmlDocument xmlDoc)用于DataTable转化为jqGrid格式的字符串，其代码如下：

从以上两个方法可以看到，传过来的值中，自定义了一个QueryString，tablename用于取得对应的配置文件，也可以使用反射的方法去提供数据，但是相对于来说，很不灵活。

4，在ProcessRequest方法中编码对于前台的动作反馈相应的数据，以下是部分代码：

if (context.Request.QueryString["action"] != null)
            {
                string actions = context.Request.QueryString["action"].ToString();
                switch (actions)
                {
                    case "view":
                            context.Response.Write(jsonString(context));

传过来的值中，自定义了一个QueryString，action用于判别前台传过来的动作，用于后面还有的查询，编辑，修改，删除等功能。

这里只反馈数据用于前台的显示。

这样，AjaxData完成。

接下来可以建立一个前台项目，为中上面的方法中获取数据，在web.config声明httpHandlers：

位于system.web节点下，这样，就将页面请求定位到了AspJqGrid的AjaxData类

另外，在控件代码中加入了[assembly:TagPrefix("AspJqGrid","AllenJqGrid")]，在web.config中声明全局

<pages>
        <controls>
          <add tagPrefix="AllenJqGrid" assembly="AspJqGrid" namespace="AspJqGrid" />
        </controls>
      </pages>
第一步的Hello World显示方面的工作就完成了，下一篇开始编码查询功能

这样，在页面中添加<AllenJqGrid:JqGrid ID="MyJqGrid" runat="server" TableName="diamond" />

本文链接

封装jQuery表格插件jqGrid，控件化jqGrid（一）：显示

2010-06-07T06:48:00Z

先上完结后效果图（点击放大）:

功能：排序，列宽拖拉，自动行号，添加，编辑，删除，查询等

只要在页面中引入：jquery.js及

<AllenJqGrid:JqGrid ID="MyJqGrid" runat="server" TableName="diamond" Search="true" Add="true" Edit="true" Del="true" />

这么一段，上图就将呈现在浏览器中。

注：本控件数据提供仅使用json。

写在前面的，为何要控件化

这里http://www.trirand.com/jqgrid/jqgrid.html是官方的jqGrid Demo页。

其基本的页面JS如下：

jQuery("#list2").jqGrid({ url:'server.php?q=2',datatype: "json", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name asc, invdate', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, rowList:[10,20,30], pager: '#pager2', sortname: 'id', viewrecords: true, sortorder: "desc", caption:"JSON Example"});jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

这只是基本的配置就有这么多，用过的人应该会知道jqGrid有很丰富的API，但常用的其实也就那么几个，值也差不多。

我在一个项目中的表格大部分都是使用jqGrid实现，大部分时候都是Ctrl+C，然后Ctrl+V，最后改改。

改改的时候经常就会发生默名的错误，基本上找了半天，发现就是少了个逗号或JSON出问题之类。

所以为了不复制粘贴，不重复的设置各项功能及其服务器对应的功能代码，控件化有必要。

控件制作正式开始

一，文件准备：

开个项目，asp.net服务器控件，这里命名为AspJqGrid，VS2010会自动生成一个cs控件文件，留下

protected override void RenderContents(HtmlTextWriter output)，用于输出控件

接下来，将jqGrid需要的文件接入项目

新建文件夹Css，将ui.jqgrid.css复制进去

新建文件夹Script，将grid.locale-cn.js和jquery.jqGrid.min.js复制进去，前一个文件用于本地化，也是不可缺的

为使用系统资源，调整复制进来的三个文件的属性，如图：

另外在Properties中的AssemblyInfo.cs中声明如下：

[assembly: WebResource("AspJqGrid.Css.ui.jqgrid.css", "text/css")]
[assembly: WebResource("AspJqGrid.Scripts.grid.locale-cn.js", "application/x-javascript", PerformSubstitution = true)]
[assembly: WebResource("AspJqGrid.Scripts.jquery.jqGrid.min.js", "application/x-javascript", PerformSubstitution = true)]

这样，文件类的资源准备完毕。

二，编码控件主体：

1）根据jqGrid表体的各项参数，设置参数

如：参数_rowNum声明，其它的_sortname,_sortorder,_rowList等都一样

//每页显示行数默认50 private int _rowNum = 50; [Description("每页显示行数")] public int RowNum { get { return _rowNum; } set { _rowNum = value; } }

2）在控件输出之前，需要向页面输出一些必要的文件资源

protected override void OnPreRender(EventArgs e) { this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete); base.OnPreRender(e); } //向页面注册css和js void Page_PreRenderComplete(object sender, EventArgs e) { HtmlLink jqGridStyle = new HtmlLink(); jqGridStyle.Attributes["type"] = "text/css"; jqGridStyle.Attributes["rel"] = "stylesheet"; jqGridStyle.Attributes["href"] = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "AspJqGrid.Css.ui.jqgrid.css"); this.Page.Header.Controls.Add(jqGridStyle); this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "AspJqGrid.Scripts.grid.locale-cn.js"); this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "AspJqGrid.Scripts.jquery.jqGrid.min.js"); }

3）构造控件输出到页面的JS，使用StringBuilder，将第一步的各参数融入，以下是部分

StringBuilder sb = new StringBuilder(); sb.Append("\n<script type=\"text/javascript\">\n"); sb.Append("$(function(){\n"); //-----------------------------------------------jqGrid js构1造ì开a始? sb.Append("$(\"#" + this.ID + "Table\").jqGrid({\n"); sb.Append("url:\"data.ashx?tablename=" + TableName + "&action=view\",\n"); sb.Append("datatype: 'json',\n"); //此?处鋦原-为adataType，?则ò无T法ぁ?处鋦理え?数簓据Y状痢?态?，?大洙?小?写′敏?感D sb.Append("rowNum: " + RowNum + ",\n"); sb.Append("pager: '#" + this.ID + "Pager',\n"); sb.Append("sortname: '" + Sortname + "',\n"); sb.Append("sortorder: '" + Sortorder + "',\n");

其中页面构造最复杂的是colModel，这里使用XML文件配置colModel，为此需要新建类，用于自动生成基本的XML配置文件。

新建一个表体列属性的model类，命名为jqGridColumns

包含属性：

private string columnName;

private int columnSize;

private string dataType;

private bool isIdentity = false;

private List<jqGridColumns> jqGridColumnsList = new List<jqGridColumns>();

新建一个配置文件生成类，命名为jqGridColumnsConfig

包含两个方法：

public List<jqGridColumns> GetColumnsList(string fields, string tableName)

其核心为使用SqlDataReader的GetSchemaTable方法，获得表体的列属性

public void BuildColModelXML(string xmlDocPath,string fields,string tableName)

使用第一个方法后得到表体的列属性，生成colModel的XML配置文件，包含基本的colModel API，完成colModel配置文件的自动生成。

接下来继续主体控件输入JS编程，决断是否存在配置文件，否则使用上述提供的方法，自动生成colModel的配置文件

然后读取XML配置文件，以colModel格式输出JS。

4）最后输出控件，包含页面JS和表体框架

protected override void RenderContents(HtmlTextWriter output) { string jqGridTag = "\n<table id=\"" + this.ID + "Table\"></table>\n<div id=\"" + this.ID + "Pager\"></div>"; output.Write(BuildJqGridHtml() + jqGridTag); }

至些，完成控件主体编码工作，下一篇完成为jqGrid提供数据的类

本文链接