使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍
2024-07-10 12:41:17
供稿：网友
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: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<ObjectDetailsEntity> 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);
