欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍

程序员文章站 2024-03-05 13:47:12
jquery ui widgets是本人非常喜欢的一套前端js组件,日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些...
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);
}
}));

//各种属性、参数
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);