使用Asp.net Mvc3 Razor視圖方式擴(kuò)展JQuery UI Widgets方法介紹
除了jtable組件推薦給大家,本文主要向大家分享一些代碼編寫思路,如何減少前端js重復(fù)代碼,以及基于現(xiàn)有jquery ui widgets組件進(jìn)行擴(kuò)展代碼的寫法
本文涉及2個(gè)視圖文件,1個(gè)Controller文件
jTableTemplateView.cshtml// 基于jtable組件的代碼模板
someBusinessView.cshtml // 某業(yè)務(wù)功能視圖模板
TemplateController.cs // 模板后臺(tái)Controller控制
大體思路如下:
someBusinessView.cshtml,通過(guò)
<script type="text/javascript" src="/Template/jsTemplateView?code=xxx" ></script>
腳本src屬性指向jTableTemplateView頁(yè)面,同時(shí)傳遞參數(shù)code參數(shù)到TemplateController,
TemplateController調(diào)用jTableTemplateView視圖渲染時(shí),通過(guò)參數(shù)Code獲取業(yè)務(wù)對(duì)象相關(guān)信息或變量傳遞給jsTemplateView頁(yè)面,然后輸出業(yè)務(wù)腳本信息到someBusinessView,代碼如下:
1.jTableTemplate.View
@{
Layout = null; // 只輸出當(dāng)前視圖
Response.ContentType = "application/javascript"; // 設(shè)定返回MIME類型
}
/*
* jTableTemplate v0.1 created by wdong 2012-11-07
* Copyright (c) 2012 wdong http://wdong.cnblogs.com/ mail:wdong0472@gmail.com
* 使用jTableTemplate可以方便生成頁(yè)面上所需的Grid列表及Editor編輯窗口,非常簡(jiǎn)潔的實(shí)現(xiàn)基本表單的CRUD操作
* USAGE: 參數(shù)說(shuō)明
* $(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);
}
}));
//各種屬性、參數(shù)
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);
此處擴(kuò)展JQuery UI Widgets的基本結(jié)構(gòu)代碼如下:
$.widget("ui.customwidget", $.extend({}, $.ui.extendwidget.prototype, {
_init: function(){
return $.ui.extendwidget.prototype._init.apply(this, arguments);
}
// Override other methods here.
}));
customerwidget為你自定義的插件名稱,extendwidget為現(xiàn)有插或被擴(kuò)展插件
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">環(huán)境上下文標(biāo)識(shí)</param>
/// <returns></returns>
public ViewResult jTableTemplate(string code)
{
ViewBag.Code = code;
// 添加視圖所需環(huán)境上下文信息(即控件所需變量值等信息)
BaseDataHelper.AddContextData(code,ViewData);
return View();
}
}
}
注意,此處代碼為獲取jTableTemplate模板視圖所需變量信息,大家可根據(jù)自己習(xí)慣和需要自行替換
// 添加視圖所需環(huán)境上下文信息(即控件所需變量值等信息)
BaseDataHelper.AddContextData(code,ViewData);
- 詳解ASP.NET Razor 語(yǔ)法
- ASP.NET MVC重寫RazorViewEngine實(shí)現(xiàn)多主題切換
- 詳解ASP.NET MVC 利用Razor引擎生成靜態(tài)頁(yè)
- ASP.NET MVC4 Razor模板簡(jiǎn)易分頁(yè)效果
- ASP.NET Razor模板引擎中輸出Html的兩種方式
- ASP.NET MVC使用RazorEngine解析模板生成靜態(tài)頁(yè)
- asp.net模板引擎Razor調(diào)用外部方法用法實(shí)例
- asp.net模板引擎Razor中cacheName的問(wèn)題分析
- 詳細(xì)分析ASP.NET Razor之C# 變量
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn).NET?Hook與事件模擬實(shí)例
這篇文章主要為大家介紹了簡(jiǎn)單實(shí)現(xiàn).NET?Hook與事件模擬實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10ASP.NET?Core使用Middleware設(shè)置有條件允許訪問(wèn)路由
這篇文章主要介紹了ASP.NET?Core使用Middleware設(shè)置有條件允許訪問(wèn)路由,文章圍繞主題相關(guān)資料展開學(xué)習(xí)內(nèi)容,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-02-02修改 asp.net core 5 程序的默認(rèn)端口號(hào)
這篇文章主要介紹了修改 asp.net core 5 程序的默認(rèn)端口號(hào),我們知道可以通過(guò)修改 launchSettings.json 文件中的端口號(hào)來(lái)實(shí)現(xiàn)端口切換,下面來(lái)看看具體的修改過(guò)程吧2022-01-01ASP.NET?Core?6最小API中使用日志和DI示例詳解
這篇文章主要為大家介紹了ASP.NET?Core?6最小API中使用日志和DI示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08在 ASP.NET Core 中自動(dòng)啟用 CAP 事務(wù)詳情
本篇文章旨在描述如何在 ASP.NET Core項(xiàng)目中并以一種簡(jiǎn)便的方式啟用CAP事務(wù),因?yàn)樵谖覀兊氖纠卸际侵苯友菔颈容^直觀的方式,沒(méi)有進(jìn)行封裝,有些初學(xué)者同學(xué)不太會(huì),找到問(wèn)我如何封裝,本篇文章主要基于 Entity Framework 來(lái)進(jìn)行演示2021-10-10.Net Core HttpClient處理響應(yīng)壓縮詳細(xì)
.Net Core作為后起之秀直接將HttpClient扶正,并且在此基礎(chǔ)上改良了HttpClientFactory,接下來(lái)我們就來(lái)探究一下在.Net Core中使用HttpClient處理響應(yīng)壓縮的機(jī)制。,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09asp.net mvc路由篇 如何找到 IHttpHandler方法介紹
學(xué)習(xí)是使用asp.net已經(jīng)有很長(zhǎng)一段時(shí)間了,現(xiàn)在就來(lái)分析一下mvc的整過(guò)過(guò)程吧。個(gè)人計(jì)劃寫一個(gè)mvc系列的博文,僅從源代碼的角度來(lái)分析mvc。在接觸mvc時(shí)我們一定會(huì)經(jīng)歷路由,那么路由這東東是怎么搞出來(lái)的啊2012-11-11C#中string與byte[]的轉(zhuǎn)換幫助類-.NET教程,C#語(yǔ)言
在寫c#程序時(shí),string和byte[]之間的轉(zhuǎn)換比較煩,在移植一些老程序時(shí)感覺(jué)很不好。我在c#中使用des和tripledes時(shí)移植一塊老代碼時(shí)也遇到了同樣的情況。為了下次不為同樣的事情煩惱,就寫了下面的幫助類。2008-03-03.Net 7函數(shù)Ctor與CCtor使用及區(qū)別詳解
這篇文章主要為大家介紹了.Net 7函數(shù)Ctor與CCtor使用及區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11