使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍
更新时间:2021年9月22日 10:18 点击:2166
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);
除了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);
相关文章
Razor TagHelper实现Markdown转HTML的方法
下面小编就为大家分享一篇Razor TagHelper实现Markdown转HTML的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22- 这篇文章主要介绍了ASP.NET MVC3 实现全站重定向的简单方法,有需要的朋友可以参考一下...2021-09-22
使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍
jquery easyui grid或者extjs grid,jtable的代码非常简洁、对于grid功能要求不是很复杂的情况下,强烈推荐大家使用...2021-09-22ASP.NET Core 2.0中Razor页面禁用防伪令牌验证
在这篇短文中,我将向您介绍如何ASP.NET Core2.0 Razor页面中禁用防伪令牌验证,对此有兴趣的朋友参考学习下吧。...2021-09-22ASP.NET MVC3 SEO优化:利用Routing特性提高站点权重
这篇文章主要介绍了ASP.NET MVC3 SEO优化:利用Routing特性消除多个路径指向同一个Action,从而提高站点权重,需要的朋友可以参考下。...2021-09-22- 本篇文章主要介绍了ASP.NET MVC 利用Razor引擎生成静态页,详细的介绍了原理和步骤,具有一定的参考价值,有兴趣的可以了解一下。...2021-09-22
- 这篇文章主要给大家介绍了关于Asp.net MVC中Razor常见的问题与解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。...2021-09-22
- 这篇文章主要介绍了ASP.NET Razor模板引擎中输出Html的两种方式,结合实例形式分析了Html.Raw与MvcHtmlString类输出HTML的实现技巧,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了ASP.NET Razor之C# 变量的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2021-09-22
- 最近使用asp.net MVC3开发B2C电子商务系统,为了SEO的优化工作,需要通过路由实现伪静态URL,后续再根据需要生成真正的静态页面,不直接走路由访问具体的页面...2021-09-22
- 这篇文章主要介绍了ASP.NET MVC3模板页的使用,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了asp.net实现在非MVC中使用Razor模板引擎的方法,较为详细的分析了Razor模板引擎的使用技巧,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了ASP.NET MVC3网站创建与发布,根据文章内容大家可以实现发布网站,感兴趣的小伙伴们可以参考一下...2021-09-22
- 本篇技术文章主要给大家讲述了如何ASP.NET Core Razor中处理Ajax请求这方面的知识点,有兴趣的朋友参考下。...2021-09-22
asp.net core razor自定义taghelper的方法
这篇文章主要介绍了asp.net core razor自定义taghelper的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22- 这篇文章主要介绍了asp.net模板引擎Razor调用外部方法用法,实例分析了Razor调用外部方法的相关使用技巧,需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了jquery提交表单mvc3后台处理示例,需要的朋友可以参考下...2021-09-22
asp.net模板引擎Razor中cacheName的问题分析
这篇文章主要介绍了asp.net模板引擎Razor中cacheName的问题,实例分析了cacheName在提高编译效率方面的使用技巧,需要的朋友可以参考下...2021-09-22- 这篇文章主要为大家详细介绍了ASP.NET MVC4 Razor模板简易分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了ASP.NET Core Razor 页面路由详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-09-22