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;
IListObjectDetailsEntity> 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)
{
text>
,@field.Fieldname:{
title:"@field.Displayname"
,list: @field.Visible.ToString().ToLower()
}
/text>
}
}
}
};
$.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";
}
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);
您可能感興趣的文章:- 詳解ASP.NET Razor 語法
- ASP.NET MVC重寫RazorViewEngine實現多主題切換
- 詳解ASP.NET MVC 利用Razor引擎生成靜態頁
- ASP.NET MVC4 Razor模板簡易分頁效果
- ASP.NET Razor模板引擎中輸出Html的兩種方式
- ASP.NET MVC使用RazorEngine解析模板生成靜態頁
- asp.net模板引擎Razor調用外部方法用法實例
- asp.net模板引擎Razor中cacheName的問題分析
- 詳細分析ASP.NET Razor之C# 變量
