基於EasyUi的快速開發框架

先看圖，下邊這個簡單的增、刪、改、查，如果自己寫代碼實現，這兩個頁需要多少行代碼？

如果再有類似的增、刪、改、查，又需要多少行代碼？

我最近搞的這個快速開發框架中，代碼行數不超過100。

兩頁的代碼如下：

1，列表頁：

@{    
    ViewBag.Title = "**** - 部門管理";
    ViewBag.MenuType = "Manage";
    ViewBag.MenuName = "部門管理";
}
@section HeadContent{
}
<div class="tit">
    <span style="float: left;"><a href="@Url.Content("~/")" target="_self">首頁</a>部門管理</span>
    <span style="float: right; padding-right: 10px;"></span>
</div>
<div class="main">
    <div class="main_con">
        <table id="tbDataList" class="easyui-datagrid">
        </table>
    </div>
</div>
<div class="clear">
</div>
@section FootContent{
    <script type="text/javascript">
        $(function () {
            var columnsSetting = [
                    { field: 'Name', title: '部門名稱', width: 100, sortable: true},
                    { field: 'SortNum', title: '排序號', width: 80 },
                    { field: 'Remark', title: '備注', width: 80 },
                    { field: 'NoticeEmails', title: '郵件通知列表', width: 200 },
                    { field: 'CreateManEnName', title: '添加人', width: 120 },
                    { field: 'CreateTime', title: '添加時間', width: 80, formatter: function (value) {
                        if (value != null) {
                            return value.CDate();
                        }
                    }
                    }
                ];

            initParam.url = '/DeptManage/GetDeptList';
            initParam.queryParams = {};
            initParam.width = 1077;
            //initParam.height= 600;
            initParam.columns = columnsSetting;
            initParam.toolbar = builderAddEditDelToolbar('部門管理', "/DeptManage", 500, 500);
            builderDatagrid(initParam);
        });    
    </script>
}

2，新增/編輯頁代碼如下：

@model Cigna.ForbiddenLeads.Model.RoleModel
@{    
    ViewBag.Title = "**** - 角色管理";
    Layout = "~/Views/Shared/_EmptyLayout.cshtml";
}
@section HeadContent{
}
@using (Html.BeginForm("EditForm", "RoleManage", FormMethod.Post, new { id = "EditForm", name = "EditForm", onsubmit = "return Check()" }))
{
    <div class="ab" style="margin-top: 20px;">
        <span class="abname"><span class="red">*</span>角色名稱:</span><span class="abinput">
            @Html.TextBoxFor(model => model.Name, new { title = "角色名稱", @class = "easyui-validatebox", required = "true" })
        </span>
    </div>
    <div class="ab">
        <span class="abname"><span class="red">*</span>權限:</span> <span class="abinput">
        @Html.CheckBox("AllowUpload", @Model.AllowUpload == "Y" ? true : false)上傳
        @Html.CheckBox("AllowDown", @Model.AllowDown == "Y" ? true : false)下載    
        @Html.CheckBox("AllowManage", @Model.AllowManage == "Y" ? true : false)管理 </span>
    </div>
    <div class="ab">
        <span class="abname">備注:</span><span class="abinput">
            @Html.TextAreaFor(model => model.Remark, new { title = "備注",@rows = "6", @cols = "80", @style = "width: 250px;" })
        </span>
    </div>    
    <br />    
    @Html.Partial("Button")
    @Html.HiddenFor(model => model.ID)        
}

為什么，實現這么多的功能，只需要這稀稀拉拉不到100行的前台代碼？

那是因為，大量的代碼都重用，都寫在其他類庫。

比如說，列表頁中畫Datagrid，比如說增、刪、改按鈕的事件，這些都共用，寫在Common.js中，通過傳參數就可以實現對應的功能。

比如說，新增/修改頁中的提交和返回按鈕的觸發事件，是寫在一個分部視圖里的，頁面中只需一行代碼調用就可以了。

這樣所有的新增/修改頁，都調用這一個分部視圖。

比如說，往后台傳頁面參數，普通的作法時，對頁面上的控件，一個一個的獲取其值，然后傳到后台，這里的作法是，獲取頁面所有的控制值，組裝成Json，傳入后台，后台再轉移為對應實體，是不是很帥，很方便呢？

關鍵代碼如下：

往后台傳參。

     <script type="text/javascript">
         $(function () {
             $("#btnSubmit").bind("click", function () {
                 var lastForm = $($("form").last());
                 if (!lastForm.form('validate')) return;
                 var formJSON = { dataJson: JSON2.stringify(lastForm.formtojson()) };

                 $.ajax({
                     url: lastForm.attr("action"),
                     type: 'post',
                     data: formJSON,
                     success: function (data) {
                         ajaxSuccessFun(data);
                     },
                     error: function (date, ddd) { }
                 })
             })
         });
    </script>

后台接收參數：

            string json = RequestExtension.GetFormData();
            if (string.IsNullOrEmpty(json))
                return Json(new ResultMsg(500, "沒有獲取到參數"), JsonRequestBehavior.AllowGet);

            json = HttpUtility.UrlDecode(json);
            RoleModel viewModel = JsonExtension.JsDeserialize<RoleModel>(json);

至此，功能基本實現，剛好要下班了，有興趣的請留言，我接着把，謝謝。