如果想要一个基于jQuery的整体解决方案 真的很难 jQuery本身的功能是相当有限的 它丰富的功能依赖于大量的插件 几乎每个插件都需要包装后才能在ASP.NET MVC中使用 幸运的是 jQuery插件有一些约定 所以打包起来相对简单 在封装中经常被忽略的一点是 作为一个应用无关的封装模块 你可以自带控制器 比如你封装了一个jQuery UI的主题管理器 那么主题管理的ModalDialog的动作 包括Get和Post 都可以封装在单个项目中 《如果你》.

        var currTheme = "";
        $(document).ready(function() {
            var doClick = function() {
                $("#themeGallery td img.currentTheme").removeClass();
                this.setAttribute("class", "currentTheme");
                currTheme = this.getAttribute("title");
            }
            var doOK = function() {
                $.post('/jQuery/SetTheme', { theme: currTheme }, function(data) {
                    $("#themeDialog").dialog("close");
                    eval(data);
                });
                return false;
            }
            var doCancel = function() {
                $("#themeDialog").dialog("close");
            }
            $("#themeDialog").load("/jQuery/ShowThemes");
            $("#ThemeButton").click(function() {
                $("#themeGallery td img").click(doClick);
                var dialogOpts = {
                    modal: true,
                    width: "662px",
                    height: "420px",
                    resizable: false,
                    buttons: { "OK": doOK, "Cancel": doCancel }
                };
                $("#themeDialog").dialog(dialogOpts);
            });
        });

这样，在任何需要设置主题的地方放一个<a>元素，id定义为ThemeButton即可。基于同样的原理，我们在封装jqGrid的时候，可以使用如下定义的委托：

public delegate GridDataModel QueryableFunc(HttpContextBase context, int page, int rows, string sidx, string sord);

这样，单一的入口就是：

        public ActionResult Employees()
        {
            var model = new GridModel
            {
                Caption = "Employees",
                Loader = (ctx, page, rows, sidx, sord) =>
                {
                    ...... 实现数据访问
return new GridDataModel
                    {
                        Total = q0.Count(),
                        Page = page,
                        Records = q.Count(),
                        Rows = q.ToArray()
                    };
                }
            };
            model.Columns.Add(new ColumnModel
            {
                Name = "Id",
                Width = "80px",
                Align = ColumnAlign.Right,
                Caption = "Id",
                Index = "Id",
                IsKey = true,
                Sortable = true,
                Hidden = true
            });
            ...... 加入其他列
return View(model);
        }

这样，在View中使用的扩展，生成的JavaScript代码中，Url是由应用无关的模块提供的，以View名称+View中Table的id为标识，存贮在服务端。获取数据时提交该标识，找出数据加载器，从而实现异步数据加载。

jQuery的插件，除了jqGrid是必须封装的以外，jQuery UI也是必须要封装的。虽然很多人包括我在内，对jQuery UI有诸多不满，主要的不满都是基于功能，项目进度严重拖后于Roadmap上的承诺。另外，其代码质量也不如jQuery。不过，毕竟jQuery UI是jQuery官方的产品，受到很多插件依赖，所以，暂时没有可替代的。

此外，还有以下插件需要封装：

• 带CheckBox的TreeView；
• 导航Menu和上下文菜单；
• 封装Google Maps API的gMap；
• tinyMCE的jQuery插件；
• 用于布局的Panel插件；
• 动态Form插件。

三：如何避免拼凑脚本

在ASP.NET MVC中需要经常拼凑脚本，这一点也非常令人讨厌。讨厌的并不是“拼凑脚本”，而是“经常”。需要“经常”拼凑脚本的原因是服务端的内容是动态输出到客户端的。如果通过某种固定的机制，智能地将服务端的单一代码自动生成为客户端内容那将是非常令人高兴的事情。换句话说，你在服务端直接写C#代码，然后有一个专门的工具将这些代码翻译成客户端代码。

我研究过JavaScript#，发现这条路完全行不通。首先，要么翻译源码、要么翻译编译后的代码，但必须是整个文件地翻译，而不能是某个代码段。其次，JavaScript#必须依赖一整套程序集，而这些程序集是特有的。

我建立了一个新的项目，叫jQuery#，基于一套专门的库，然后在运行时以较小的代价来实现反编译，并翻译成JavaScript代码。如果仅仅只是生成jQuery所需要的客户端代码是非常简单的，jQuery API毕竟比较少，每个插件的API也都相当有限。麻烦的是需要插入大量的客户端Event Handler。这才是难点所在。按我的计划，今年6月初会发布jQuery#的第一个版本。 目标是可以这样写View：

<% Html.jQuery(document => {
new jdGrid{
        container = "main",
        clientId = jQuery.CreateTable("employees"),
        pager =  jQuery.CreateDiv("empPager"),
        data = Model,
        open = () => {
                jQuery.Element("OpenButton").Disable();
return false;
            },
        caption = "Employees"
}); %>