mvc5 html.widget,使用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";

}

$.SomeApp = {

doInit: function() {

try {

$('#DataContainer').xxx({title:"test列表"}).xxx("load");

} catch (err) {

alert(err);

}

}

}

$(function(){

$.SomeApp .doInit();

});

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);