How to extend JQuery UI Widgets using Asp.net Mvc3 Razor View

JQuery UI Widgets is a front-end JS component that I like very much. In daily development, it is developed based on the original jquery ui widget js Code and requires a lot of repeated code, at the same time, some existing components can not meet the needs of the situation, the need to extend the existing components, this paper uses a set of jquery ui-based extension js components --- jtable (http://www.jtable.org ), compared with jqGrid, jquery easyui grid, or extjs grid, the jtable code is very concise, and the grid function requirements are not very complex, we strongly recommend that you use it!

In addition to the jtable component, this article mainly shares some code writing ideas, how to reduce front-end JavaScript code duplication, and how to write extended code based on the existing jquery ui widgets component.
This article involves two view files and one Controller file.

JTableTemplateView. cshtml // jtable-based code template
SomeBusinessView. cshtml // a 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 src attribute of the script directs to the jTableTemplateView page, and the parameter code parameter is passed to TemplateController,
When TemplateController calls jTableTemplateView rendering, it obtains business object information or variables through the parameter Code and passes them to the jsTemplateView page. Then, it outputs the business script information to someBusinessView. The Code is as follows:
1. jTableTemplate. ViewCopy codeThe Code is as follows :@{
Layout = null; // only the current view is output.
Response. ContentType = "application/javascript"; // you can specify the MIME type to be returned.
}
/*
* JTableTemplate v0.1 created by wdong 2012-11-07
* Copyright (c) 2012 wdong http://wdong.cnblogs.com/mail: wdong0472@gmail.com
* Using jTableTemplate, you can easily generate the required Grid list and Editor editing window on the page. It is very simple to implement CRUD operations on basic forms.
* USAGE: parameter description
* $ (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 attributes 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: "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 code for extending the basic structure of JQuery UI Widgets is as follows:Copy codeThe Code is as follows: $. widget ("ui. mwmwidget", $. extend ({}, $. ui. extendwidget. prototype ,{
_ Init: function (){
Return $. ui. extendwidget. prototype. _ init. apply (this, arguments );
}

// Override other methods here.
}));

Customerwidget is your custom plug-in name, And extendwidget is an existing plug-in or extended plug-in
2. someBusinessView. cshtmlCopy codeThe Code is as follows :@{
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 list"}). xxx ("load ");
} Catch (err ){
Alert (err );
}
}
}

$ (Function (){
$. SomeApp. doInit ();
});

</Script>

3. TemplateController. csCopy codeThe Code is as follows: 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>
/// Get JTable list + edit window
/// </Summary>
/// <Param name = "code"> environment context ID </param>
/// <Returns> </returns>
Public ViewResult jTableTemplate (string code)
{
ViewBag. Code = code;

// Add the environment context information required by the view (that is, the variable value and other information required by the Control)
BaseDataHelper. AddContextData (code, ViewData );
Return View ();
}
}
}

Note:The code here is used to obtain the variable information required for the jTableTemplate template view. You can replace it according to your habits and needs.

// Add the environment context information required by the view (that is, the variable value and other information required by the Control)
BaseDataHelper. AddContextData (code, ViewData );