【下载文档:  使用Asp.net_Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍.txt 】

---

使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍
JQuery UI Widgets是本人非常喜欢的一套前端JS组件，日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码，同时一些现有组件无法满足需求的情况下，需要对现有组件进行扩展，本文使用一套基于jquery ui 的扩展js组件---jtable (http://www.jtable.org），包含了基本的列表和编辑窗口，比起jqGrid，jquery easyui grid或者extjs grid，jtable的代码非常简洁、对于grid功能要求不是很复杂的情况下，强烈推荐大家使用！ 除了jtable组件推荐给大家，本文主要向大家分享一些代码编写思路，如何减少前端js重复代码，以及基于现有jquery ui widgets组件进行扩展代码的写法 本文涉及2个视图文件，1个Controller文件 jTableTemplateView.cshtml// 基于jtable组件的代码模板 someBusinessView.cshtml // 某业务功能视图模板 TemplateController.cs // 模板后台Controller控制 大体思路如下： someBusinessView.cshtml，通过 脚本src属性指向jTableTemplateView页面，同时传递参数code参数到TemplateController， TemplateController调用jTableTemplateView视图渲染时，通过参数Code获取业务对象相关信息或变量传递给jsTemplateView页面，然后输出业务脚本信息到someBusinessView，代码如下： 1.jTableTemplate.View复制代码 代码如下: @{ Layout = null; // 只输出当前视图 Response.ContentType = "application/javascript"; // 设定返回MIME类型 } /* * jTableTemplate v0.1 created by wdong 2012-11-07 * Copyright (c) 2012 wdong http://wdong.cnblogs.com/ mail:wdong0472@gmail.com * 使用jTableTemplate可以方便生成页面上所需的Grid列表及Editor编辑窗口，非常简洁的实现基本表单的CRUD操作 * USAGE: 参数说明 * $(selector).ControlName({title:"please your grid title"}); * $(selector).ControlName("load"); */ @using Tiyo.Platform.Business.Entities @{ string code = ViewBag.Code; ObjectEntity entity = ViewData[code + ".ObjectCode"] as ObjectEntity; IList entityDetails = entity.Details; string controlName = ViewData[code + ".ControlName"].ToString(); string title = ViewData[code + ".Title"].ToString(); string paging = ViewData[code + ".Paging"].ToString(); string pageSize = ViewData[code + ".PageSize"].ToString(); string defaultSorting = ViewData[code + ".DefaultSorting"].ToString(); string listAction = ViewData[code + ".ListAction"].ToString(); string updateAction = ViewData[code + ".UpdateAction"].ToString(); string deleteAction = ViewData[code + ".DeleteAction"].ToString(); } (function ($) { // extend jtable jquery ui widget $.widget("jTableTemplate.@controlName", $.extend(true,{}, $.hik.jtable.prototype, { _init: function(){ return $.hik.jtable.prototype._init.apply(this, arguments); } })); //各种属性、参数 var options = { title: '@title' ,paging: @paging //Enables paging ,pageSize:@pageSize //Actually this is not needed since default value is 10. ,sorting: true //Enables sorting ,defaultSorting: '@defaultSorting' //Optional. Default sorting on first load. ,actions: { listAction: '@listAction' ,deleteAction: '@deleteAction' ,updateAction: '@updateAction' } ,fields: { ID: { title:"主键" ,list:false } @foreach(var field in entityDetails) { if(!field.Ispk) { ,@field.Fieldname:{ title:"@field.Displayname" ,list: @field.Visible.ToString().ToLower() } } } } }; $.fn.extend(true,$.jTableTemplate.@{@controlName}.prototype,{options:options}); })(jQuery);此处扩展JQuery UI Widgets的基本结构代码如下： 复制代码 代码如下:$.widget("ui.customwidget", $.extend({}, $.ui.extendwidget.prototype, { _init: function(){ return $.ui.extendwidget.prototype._init.apply(this, arguments); } // Override other methods here. }));customerwidget为你自定义的插件名称，extendwidget为现有插或被扩展插件 2.someBusinessView.cshtml复制代码 代码如下:@{ ViewBag.Title = "AreaList"; }

3.TemplateController.cs 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Tiyo.Platform.Controller; using System.Web.Mvc; namespace Tiyo.Plugins.ExtJsTemplate.Controllers { public class JQueryTemplateController:BaseController { ///

/// 获取JTable列表+编辑窗口 ///

/// 环境上下文标识 /// public ViewResult jTableTemplate(string code) { ViewBag.Code = code; // 添加视图所需环境上下文信息（即控件所需变量值等信息） BaseDataHelper.AddContextData(code,ViewData); return View(); } } }注意，此处代码为获取jTableTemplate模板视图所需变量信息，大家可根据自己习惯和需要自行替换 // 添加视图所需环境上下文信息（即控件所需变量值等信息） BaseDataHelper.AddContextData(code,ViewData);