使用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，通过 
<script type="text/javascript" src="/Template/jsTemplateView?code=xxx" ></script> 
脚本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:[e-mail] 
* 使用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<ObjectDetailsEntity> entityDetails = entity.Details; 


string controlName = ViewData[code + ".ControlName"].ToString(); 
string /> 此处扩展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"; 
} 

<script type="text/javascript" src="/JQueryTemplate/jTableTemplate?code=xxx"></script> 

<div id="DataContainer"></div> 

<script type="text/javascript"> 
$.SomeApp = { 
doInit: function() { 
try { 
$('#DataContainer').xxx({title:"test列表"}).xxx("load"); 
} catch (err) { 
alert(err); 
} 
} 
} 

$(function(){ 
$.SomeApp .doInit(); 
}); 

</script>

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 
{ 
/// <summary> 
/// 获取JTable列表+编辑窗口 
/// </summary> 
/// <param name="code">环境上下文标识</param> 
/// <returns></returns> 
public ViewResult jTableTemplate(string code) 
{ 
ViewBag.Code = code; 

// 添加视图所需环境上下文信息（即控件所需变量值等信息） 
BaseDataHelper.AddContextData(code,ViewData); 
return View(); 
} 
} 
}

注意，此处代码为获取jTableTemplate模板视图所需变量信息，大家可根据自己习惯和需要自行替换 

// 添加视图所需环境上下文信息（即控件所需变量值等信息） 
BaseDataHelper.AddContextData(code,ViewData);