Use the Asp.net Mvc3 Razor view to extend the JQuery UI Widgets method introduction

JQuery UI Widgets is I like very much 1 set of front-end JS components, daily development based on the original jquery ui widget js code development, need to write a lot of duplicate code, 1 at the same time some existing components can't meet the demand of cases, the need to extend an existing component, this article USES 1 set based on jquery ui extension js components - jtable (http: / / www. jtable. org), jtable contains the basic list and edit window. Compared with jqGrid, jquery easyui grid or extjs grid, jtable has very simple code and is highly recommended when the functional requirements of grid are not very complicated.

In addition to the jtable component recommended to you, this article mainly shares with you some coding ideas, how to reduce the front-end js duplicate code, and how to extend the code based on the existing jquery ui widgets component
This article covers two view files and one Controller file

jTableTemplateView.cshtml // code templates based on jtable components
someBusinessView.cshtml // business function view template
TemplateController.cs // template background Controller control
The general idea is as follows:

someBusinessView cshtml, through
< script type="text/javascript" src="/Template/jsTemplateView?code=xxx" > < /script >
The script src property points to the jTableTemplateView page and passes the code parameter to TemplateController,
When TemplateController calls the rendering of jTableTemplateView view, get the relevant information of business objects or variables through the parameter Code and pass them to jsTemplateView page, and then output the business script information to someBusinessView. The code is as follows:
1.jTableTemplate.View

 
@{ 
Layout = null; //  Output only the current view  
Response.ContentType = "application/javascript"; //  Set to return to MIME type  
} 
/* 
* jTableTemplate v0.1 created by wdong 2012-11-07 
* Copyright (c) 2012 wdong http://wdong.cnblogs.com/ mail:wdong0472@gmail.com 
*  use jTableTemplate You can easily generate what you need on the page Grid List and Editor Edit window, very concise implementation of the basic form CRUD operation  
* USAGE:  Parameters that  
* $(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); 
} 
})); 

// Various properties and parameters  
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:" A primary key " 
,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);

The basic structure code for extending JQuery UI Widgets here is as follows:

$.widget("ui.customwidget", $.extend({}, $.ui.extendwidget.prototype, { 
_init: function(){ 
return $.ui.extendwidget.prototype._init.apply(this, arguments); 
} 

// Override other methods here. 
}));

customerwidget is the name of your custom plug-in, extendwidget is an existing plug-in or extension
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 The list of "}).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> 
///  To obtain JTable The list of + Edit window  
/// </summary> 
/// <param name="code"> Context identification </param> 
/// <returns></returns> 
public ViewResult jTableTemplate(string code) 
{ 
ViewBag.Code = code; 

//  Add environment context information required by the view (i.e., variable values required by the control, etc.)  
BaseDataHelper.AddContextData(code,ViewData); 
return View(); 
} 
} 
}

Note that the code here is to get the variable information required for the jTableTemplate template view, and you can substitute it according to your own habits and needs

// add environment context information required by the view (i.e., variable values required by the control, etc.)
BaseDataHelper.AddContextData(code,ViewData);