ASP. NET MVC3 + Ajax + jQuery + jQueryUI + jTemplates

Cshtml:

View Code

@ Model IEnumerable <MvcProjTpl. Entity. DeptEntity>

@ {ViewBag. Title = "jTemplateTest ";}

<H2> jTemplateTest 
<Script src = "@ Url. Content ("~ /Scripts/jquery-jtemplates.js ")" type = "text/javascript"> </script>

<Script type = "text/javascript">
/*
[
{"DeptId": "dept_id_0000000", "DeptName": "dept_name_0000000", "ParentDept": "-1", "UpdateUser": "uuu", "UpdateTime ": "\/ Date (1332691200000) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000001", "DeptName": "dept_name_0000001", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime ": "\/ Date (1332434783000) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000010", "DeptName": "dept_name_0000010", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime ": "\/ Date (1332434783000) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000011", "DeptName": "dept_name_0000011", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime ": "\/ Date (1332434783887) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000012", "DeptName": "dept_name_0000012", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime ": "\/ Date (1332434783887) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000013", "DeptName": "dept_name_0000013", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime ": "\/ Date (1332434783887) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000015", "DeptName": "dept_name_0000015xx", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime ": "\/ Date (1332434783000) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000016", "DeptName": "dept_name_0000016", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime ": "\/ Date (1332434783887) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000017", "DeptName": "dept_name_0000017", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime ": "\/ Date (1332434783887) \/", "ValidCode": 1 },
{"DeptId": "dept_id_0000018", "DeptName": "dept_name_0000018", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime ": & quot; \/Date (1332434783887) \/& quot;, & quot; ValidCode & quot;: 1}
]
*/

$ (Document). ready (function (){
$. GetJSON ('@ Url. Action ("GetJsonData", "AjaxDept")', function (data ){
// Setup templates
$ ("# ListContainer"). setTemplateElement ("listTemplate"). processTemplate (data );
// $ ("# ItemList"). processTemplate (null); // process empty data to show header
});
});
</Script>

<! -- Output elements -->
<Div id = "listContainer"> </div>
<! -- Templates -->
<Textarea id = "listTemplate" rows = "0" cols = "0" style = "display: none;">
<Table class = "gvMain">
<Tr class = "gvMainHeader">
<Th> DeptId </th>
<Th> DeptName </th>
<Th> ParentDept </th>
<Th> UpdateUser </th>
<Th> UpdateTime </th>
<Th> ValidCode </th>
</Tr>
{# Foreach $ T as item}
<Tr class = "{# cycle values = ['gvmainrow', 'gvmainalternatingrow']}">
<Td >{$ T. item. DeptId. bold ()} </td>
<Td> <a name = "lnkView" dataId = "{$ T. item. deptId} "href =" @ Url. action ("Details", "AjaxDept")/{$ T. item. deptId} "> {$ T. item. deptName} </a> </td>
<Td >{$ T. item. ParentDept} </td>
<Td >{$ T. item. UpdateUser} </td>
<Td >{$ T. item. UpdateTime} </td>
<Td >{$ T. item. ValidCode} </td>
</Tr>
{#/}
</Table>
</Textarea>

<Div id = "dialogArea" title = "Department Information" style = "text-align: center; vertical-align: middle;"> </div>

<Script type = "text/javascript">
$ (Function (){
Window. dialog =$ ("# dialogArea"). dialog ({autoOpen: false });

$ ("# BtnAdd"). click (function (){
Var url = '@ Url. Content ("~ /AjaxDept/Create ")';
ShowDialog (url, "dialogArea ");
});

$ ("Input [name = 'btnedit ']"). each (function (){
$ (This). click (function (){
Var url = '@ Url. Content ("~ /AjaxDept/Editxxx ") '+ $ (this). attr (" dataId ");
ShowDialog (url, "dialogArea ");
});
});

$ ("Input [name = 'btndel ']"). each (function (){
$ (This). click (function (){
Var url = '@ Url. Content ("~ /AjaxDept/Delete ") '+ $ (this). attr (" dataId ");
ShowDialog (url, "dialogArea ");
});
});

$ ("A [name = 'lnkview']"). each (function (){
$ (This). click (function (){
Var url = '@ Url. Content ("~ /AjaxDept/Details ") '+ $ (this). attr (" dataId ");
ShowDialog (url, "dialogArea ");
Return false;
});
});

});

Function showDialog (url, dialogElementId, dialogWidth, dialogHeight ){
Var objOption = {height: 360, width: 750, autoOpen: false, modal: true };
If (dialogWidth) objOption. width = dialogWidth;
If (dialogHeight) objOption. height = dialogHeight;
Var dialogElement = $ ("#" + dialogElementId );
// Window. dialog. dialog ("destroy ");
Window. dialog = dialogElement. dialog (objOption );
DialogElement.html (' Loading dialog data ...');
Window. dialog. dialog ("open ");
// Alert ("Check Loading ");
DialogElement. load (url + '? Timestamp = '+ Math. random ());
}
</Script>

Controller:

View Code

public ActionResult jTemplateTest()
        {
return View();
        }

//public JsonResult jTemplateTest(int page = 1, int pageSize = 10, string sortName = "dept_name", string sortOrder = "asc")
//{
//    string whereClause = "";
//    string orderBy = string.Format("{0} {1}", sortName, sortOrder);
//    int totalRowsCount = 0;
//    IList<DeptEntity> list = bll.GetPagedList(out totalRowsCount, whereClause, orderBy, page, pageSize);
//    ViewBag.PagerInfo = new PagerInfo("~/AjaxDept/jTemplateTest", page, pageSize, totalRowsCount);
//    return Json(list, JsonRequestBehavior.AllowGet);
//}

public JsonResult GetJsonData(int page = 1, int pageSize = 10, string sortName = "dept_name", string sortOrder = "asc")
        {
string whereClause = "";
string orderBy = string.Format("{0} {1}", sortName, sortOrder);
int totalRowsCount = 0;
            IList<DeptEntity> list = bll.GetPagedList(out totalRowsCount, whereClause, orderBy, page, pageSize);
            ViewBag.PagerInfo = new PagerInfo("~/AjaxDept/jTemplateTest", page, pageSize, totalRowsCount);
return Json(list, JsonRequestBehavior.AllowGet);
        }

Download jTemplates 0.8.1