在ASP.NET&MVC&4中使用Kendo&UI&Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework，提供了很多控件(Menu
、Grid 、Combox等...)， 底层以Html5 + jQuery
来打造，并且兼容于各大浏览器，包含IE7、IE8。相关介绍可以参考。
以下内容参考台湾的黑老大的文章：
建立一个ASP.NET MVC 4专案
使用NuGet安装KendoUIWeb及KendoGridBinder
创建SimMemberInfo Model类，放到Model目录下
using System.Collections.G
using System.L
using System.W
using System.D
using System.R
namespace MvcApplication2.Models
&&& public class
SimMemberInfo
public string UserNo; //会员编号
public string UserN //会员名称
public DateTime RegD //注册日期
public int P //累积点数
//模拟数据源
public static List SimuDataStore =
static SimMemberInfo()
&&&&&&&&&&&
Random rnd = new Random();
&&&&&&&&&&&
//借用具名颜色名称来产生随机数据
&&&&&&&&&&&
string[] colorNames = typeof(Color)
&&&&&&&&&&&&&&&
.GetProperties(BindingFlags.Static | BindingFlags.Public)
&&&&&&&&&&&&&&&
.Select(o =& o.Name).ToArray();
&&&&&&&&&&&
SimuDataStore =
&&&&&&&&&&&&&&&
colorNames
&&&&&&&&&&&&&&&
.Select(cn =& new SimMemberInfo()
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&
UserNo = string.Format("C{0:00000}", rnd.Next(99999)),
&&&&&&&&&&&&&&&&&&&
UserName = cn,
&&&&&&&&&&&&&&&&&&&
RegDate = DateTime.Today.AddDays(-rnd.Next(1000)),
&&&&&&&&&&&&&&&&&&&
Points = rnd.Next(9999)
&&&&&&&&&&&&&&&
}).ToList();
要引用Kendo
UI，需要载入必要的JS及CSS，编辑App_Start/BundleConfig.cs，加入以下程序:
bundles.Add(new
ScriptBundle("~/bundles/kendoUI").Include("~/Scripts/kendo//kendo.web.min.js"));
//经实测，SytleBundle virtualPath参数使用""会有问题，故向上搬移一层
//将/Content/kendo/的内容搬至Content/kendo下&&&&&&&
bundles.Add(new
StyleBundle("~/Content/kendo/css").Include("~/Content/mon.min.css",&&&&&
&&&&&&&&&&&&
"~/Content/kendo/kendo.blueopal.min.css"
&&&&&&&&&&&&
& 由于CSS文件路径会被当成图片文件的基准，原本Kendo
UI的.css及图图片被放在~/Content/kendo//下，理论上StyleBundle应设成"~/Content/kendo//css”，才能引导浏览器到该目录下取用图文件。不幸地，我发现StyleBundle的virtualPath参数出现时，会导致Styles.Render("~/Content/kendo//css”)时传回HTTP
为克服问题，我决定将目录的内容向上搬一层，直接放在~/Content/keno目录下，并将virtualPath设成"~/Content/kendo/css"，这样就能避开问题。
在~/Views/Shared/_Layout.cshtml中:
@Styles.Render("~/Content/themes/base/css", "~/Content/css",
"~/Content/kendo/css")&
@Scripts.Render("~/bundles/modernizr")&&
@RenderBody()
@Scripts.Render("~/bundles/jquery", "~/bundles/kendoUI")
@RenderSection("scripts", required: false)
在Index.cshtml的代码如下：
@section Scripts
&&& 关键词:
HomeController.cs的Grid() Action ：
public JsonResult Grid(KendoGridRequest request, string
var result = SimMemberInfo.SimuDataStore.Where(o =&
o.UserName.Contains(keywd));
return Json(new KendoGrid(request, result));
只要return Json(new KendoGrid(KendoGridRequest,
IEnumerable))，余下的换页、排序，甚至字段过滤功能，就都交给KendoGridBinder全权处理啰!
版权：本文版权归作者和博客园共有
转载：欢迎转载，为了保存作者的创作热情，请按要求【转载】，谢谢
要求：未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。使用远程绑定的问题
[问题点数：40分]
使用远程绑定的问题
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。【问题】基于DOM指令的数据绑定和基于DOM属性的UI渲染能否结合？ - CNode技术社区
积分: 2295
这家伙很懒，什么个性签名都没有留下。
众所周知，JS的发展迅速，出现了很多前端优秀框架。这类的框架（不是类库）大致可以分为两类，一类是程序架构类型的框架，一种是UI设计类的框架。这两种框架有什么区别，我按照我自己学习的成果给大家讲一讲，并且引出我后面的问题，相信也是很多人遇到的问题。
###一、程序架构类型的框架###
在前端，我们比较常用的就是三大语言，HTML、CSS、JavaScript，HTML负责做前端视图的结构，CSS负责视图的样式，JavaScript的功能就很多了，更抽象的说是通过改变视图结构、样式等进行良好的交互。且不说JS能操作DOM和BOM，但就一个大型的项目，JS写多了就会显的累赘，书写麻烦，维护坑爹。一类用于程序架构的框架由此诞生，例如Angular.js，他没有提供所谓的UI，仅仅只是通过标记的形式来扩展HTML的能力。书写的格式是MVC，但支持双向绑定的特定又更像MVVM，他代码可以表现的很清晰明了，同时又能实现以往需要大量代码才能实现的功能。同样，Knockout.js也是如此优秀的框架。
###二、UI设计类的框架###
当然会有人提出基于CSS的设计框架bootstrap，不错，他简简单单只是从CSS入手，与JS解耦分离，能展示比较基本的界面美观。可是作为程序员，更多的希望他们的操作都是面向对象的，因此，用JS来操作UI组件，变的是如此的需要。早期的DOJO，后来的ExtJS，都从一定程度上简化了程序员对界面的美化操作，更直观的以对象形式去构造界面。包括如今的Kendo-UI，也是优秀的UI框架。
###三、他们的优势和劣势###
架构框架，典型的抛弃了设计的角度，更多的为今后程序的修改、扩展做铺垫，让应用更加的平滑、持久，有良好架构的框架，还能有效的帮助测试。但做的再好，人们依然感到美中不足，对的，他没有美观的UI。
UI框架，典型的照顾程序员，将设计好的组件以对象呈现，拥有更好的开发速度。即便默认的UI风格不满足需求，还对应有UI的重写以及扩展。但再美观，功能再强，DOM上的渲染始终是耗时，他会重写很多DOM元素，以及在原有的DOM内外扩展N多的DOM。
###四、他们能结合吗？###
至少我尝试过，挺困难的。以下几点很难平衡：
1.代码简洁、架构清晰，层次分明
2.业务和逻辑分离，模型和数据分离，视图和模板分离
3.不破坏原有结构，实现开发分离独立
###五、为什么无法结合？###
个人觉得无法结合原因是开发模式的问题。前端的开发模式有2种，一种结构化，一种组件化。
结构化的开发模式往往是先写HTML标记语言，通过一些可视化工具，HTML写完的时候，对应的视图其实就已经出现了，然后就需要进行修整理、填色、实现动态功能。组件化的开发模式对应的基本没有HTML文件，全部交由JS去在DOM层上渲染修改，JS的代码完成并不能很直观的表现出来，而且UI和动画写死，扩展并不容易。
我起初做过这样的例子，试图将Angular和Kendo-UI结合，但是失败了。我始终认为，Kendo-UI就是帮我进行页面渲染的， 他甚至连我的数据都不应该碰到，而结果是他的没碰我的数据。我先用Angular设计前端模板页面，然后编写JS交由$http去帮我取出数据，由于页面上绑定了数据，我不需要手工处理，取出来的数据就自然的渲染到了HTML模板上，还是双向绑定。HTML代码写的非常简洁，明了，运行后数据都出现在了前端，虽然样式不好看。第二步我就开始添加Kendo-UI了，按照官网给出的例子，只需要一句代码就能实现。结果意想不到，美观度样式是有了，但是所有的数据都没有了。后来又尝试了ExtJS来进行UI渲染，结果也是UI出来了，数据没有了。原因是什么呢？经过几番周折，原因找到了：
Angular的数据绑定不是复制，而是真正的映射，相信大家对这两个概念都不陌生。大多数UI框架将后台取出的框架渲染到组件中，都是采用的复制方式，取出的数据不会缓存到内存中，除非他提供这样的机制并且你也这么做了。复制的方式我们可以做实验，你在前端视图对值进行了修改，后端的值是无法动态发生改变，除非你调用getValue类似的操作。而你把JS获取的数据作为全局对象进行操作时，视图的值也不会因为原始数据的变化而变化。映射的方式都大不一样了，双向的绑定使得他们任意的改变都会影响彼此。Angular做的是映射，他是通过HTML结构化标记来做映射的，关键就是这个标记，标记是写在HTML标签上的，只要标签发生了改变，就相当于断开或改变原有映射关系。Kendo-UI在做视图渲染的时候，就会将原有的HTML标签进行重绘、改写，在原有DOM内外添加新的DOM。标签的变化使得Angular无法找到作为数据映射的标记，因此数据只会在缓存中存在，却无法再Kendo-UI渲染过的视图上存在。
###六、就不能有一个JS框架是能整合这两个特性的吗？###
有，真的有，Kendo-UI就具备UI和架构（MVVM），但是经过反复的使用，依然会遇到之前的问题。grid-table-row-template和mvvm-binding-tempate这两个案例，前者是将table（原生的HTML标签）渲染成为Grid控件，同时可以指定”行模板“，后者是将数据通过MVVM的模式绑定到模板中，他们就是不能中和在一起，搞的我痛苦不已。最后，虽然实现了一种能结合的方法，但是代码怎么看怎么恶心，又根本不像MVVM的写法或者MVC的架构。
###七、结论###
其实不难发现，要想整合这两种特性，就是要避开他们操作的数据，UI框架和架构框架都是试图在DOM上做额外的渲染来实现想要的功能的。除非，有一个框架做到了，那就不必要大费周章的去把两个框架弄到一起。
（新出的几个框架api都很详细，例子也很详尽，但最大的问题就是2个demo似乎很难整合到一起，过于单调。）
###八、问题###
关于以上，大家看过后不知道有什么看法，有没有能提供帮助或者线索的，以及你们现在用一些新的框架时是如何同其他框架做整合的。
写那么多，哪像是在发表问题，倒好像是在发表论文。
每个框架都有自己不同的设计风格的吧，强行糅合两个框架肯定是不可取的。还有，没有明白你要说的意思，ExtJS貌似有jquery的整合插件，如果要使用两个或以上的框架，建议自己写适配器吧
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的}