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

cshtml:

@model IEnumerable<MvcProjTpl.Entity.DeptEntity>

@{ViewBag.Title = "jTemplateTest";}

<h2>jTemplateTest</h2>

<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": "\/Date(1332434783887)\/", "ValidCode": 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>
        {#/for}
    </table>
</textarea>

<div id="dialogArea" title="部门信息" 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,  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('<img src="@Url.Content("~/Content/images/ico/loading.gif")" alt="" /> Loading dialog data...');
        window.dialog.dialog("open");
        //alert("Check Loading");
        dialogElement.load(url + '?timestamp=' + Math.random());
    }
</script>

Controller:

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);
        }

jTemplates 0.8.1下载