構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（9）-MVC與EasyUI結合增刪改查

標籤：

在第八講中，我們已經做到了怎麼樣分頁。這一講主要講增刪改查。第六講的代碼已經給出，裡麵包含了增刪改，大家可以下載下來看下。這講主要是，製作漂亮的工具列，雖然easyui的datagrid已經內建可以設定工具列，我們還是要提取出來，為以後許可權控製做更好的準備。

前端代碼沒有邏輯結果，這也許是我寫代碼以來寫得最輕鬆的，但也是最繁瑣的，因為美工我不是強項，每一次調整都非常的困難，最後我把他調成了這樣了：

看得過去的鼓掌一下。樣式已經包含在附加代碼中了。

大家只要加入以下HTML代碼到index上就可以了

<div class="mvctool"><input id="txtQuery" type="text" class="searchText"><a id="btnQuery" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-search" style="padding-left: 20px;">查詢</span></span></a><div class="datagrid-btn-separator"></div><a id="btnCreate" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-add" style="padding-left: 20px;">新增</span></span></a><div class="datagrid-btn-separator"></div><a id="btnEdit" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-edit" style="padding-left: 20px;">編輯</span></span></a><div class="datagrid-btn-separator"></div><a id="btnDetails" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-details" style="padding-left: 20px;">詳細</span></span></a><div class="datagrid-btn-separator"></div><a id="btnDelete" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-remove" style="padding-left: 20px;">刪除</span></span></a><div class="datagrid-btn-separator"></div><a id="btnExport" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-export" style="padding-left: 20px;">匯出</span></span></a><a id="btnReload" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-reload" style="padding-left: 20px;">重新整理</span></span></a></div>

　　

有能力的朋友再最佳化一下樣式

好，我們用jquery為按鈕添加事件。增、刪、改、查，把匯出和重新整理刪掉吧。沒用到

在index加入以下代碼js代碼

<script type="text/javascript">    //ifram 返回    function frameReturnByClose() {        $("#modalwindow").window(‘close‘);    }    //iframe 返回並重新整理    function frameReturnByReload(flag) {        if (flag)            $("#List").datagrid(‘load‘);        else            $("#List").datagrid(‘reload‘);    }    //輸出資訊    function frameReturnByMes(mes) {        $.messageBox5s(‘提示‘, mes);    }    $(function () {              $("#btnCreate").click(function () {            $("#modalwindow").html("<iframe width=‘100%‘ height=‘98%‘ scrolling=‘no‘ frameborder=‘0‘‘ src=‘/SysSample/Create‘></iframe>");            $("#modalwindow").window({ title: ‘新增‘, width: 700, height: 400, iconCls: ‘icon-add‘ }).window(‘open‘);        });        $("#btnEdit").click(function () {            var row = $(‘#List‘).datagrid(‘getSelected‘);            if (row != null) {                $("#modalwindow").html("<iframe width=‘100%‘ height=‘99%‘  frameborder=‘0‘ src=‘/SysSample/Edit?id=" + row.Id + "&Ieguid=" + GetGuid() + "‘></iframe>");                $("#modalwindow").window({ title: ‘編輯‘, width: 700, height: 430, iconCls: ‘icon-edit‘ }).window(‘open‘);            } else { $.messageBox5s(‘提示‘, ‘請選擇要操作的記錄‘); }        });        $("#btnDetails").click(function () {            var row = $(‘#List‘).datagrid(‘getSelected‘);            if (row != null) {                $("#modalwindow").html("<iframe width=‘100%‘ height=‘98%‘ scrolling=‘no‘ frameborder=‘0‘ src=‘/SysSample/Details?id=" + row.Id + "&Ieguid=" + GetGuid() + "‘></iframe>");                $("#modalwindow").window({ title: ‘詳細‘, width: 500, height: 300, iconCls: ‘icon-details‘ }).window(‘open‘);            } else { $.messageBox5s(‘提示‘, ‘請選擇要操作的記錄‘); }            });        $("#btnQuery").click(function () {            var queryStr = $("#txtQuery").val();            //如果查詢條件為空白預設查詢全部            if (queryStr == null) {                queryStr = "%";            }            $(‘#List‘).datagrid({                url: ‘/SysSample/GetList?queryStr=‘ + encodeURI(queryStr)            });        });        $("#btnDelete").click(function () {            var row = $(‘#List‘).datagrid(‘getSelected‘);            if (row != null) {                $.messager.confirm(‘提示‘, ‘確定刪除‘, function (r) {                        if (r) {                            $.post("/SysSample/Delete?id=" + row.Id, function (data) {                                if (data.type == 1)                                    $("#List").datagrid(‘load‘);                                $.messageBox5s(‘提示‘, data.message);                            }, "json");                        }                    });            } else { $.messageBox5s(‘提示‘, ‘請選擇要操作的記錄‘); }            });    });</script>

　　

這是jquery綁定了事件，不知道jquery怎麼用的，穿越回去學習一下選取器和事件
OK代碼很清楚的告訴了我們增刪改要做什麼了。

裡面用到了easyui 的window

所以我們在Index頂部加入一個層來包含彈出window，我們把增加，修改的視圖放在iframe裡面，然後附加到window裡面彈出

<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>

<div class="mvctool">................

關於$.messageBox5s是我擴充easyui的message控制項的結果，擴充如下

/** * 在iframe中調用，在父視窗中出提示框(herf方式不用調父視窗)*/$.extend({    messageBox5s: function (title, msg) {        $.messager.show({            title: title, msg: msg, timeout: 5000, showType: ‘slide‘, style: {                left: ‘‘,                right: 5,                top: ‘‘,                bottom: -document.body.scrollTop - document.documentElement.scrollTop+5            }        });    }});$.extend({    messageBox10s: function (title, msg) {        $.messager.show({            title: title, msg: msg, height: ‘auto‘, width: ‘auto‘, timeout: 10000, showType: ‘slide‘, style: {                left: ‘‘,                right: 5,                top: ‘‘,                bottom: -document.body.scrollTop - document.documentElement.scrollTop + 5            }        });    }});$.extend({    show_alert: function (strTitle, strMsg) {        $.messager.alert(strTitle, strMsg);    }});/** * panel關閉時回收記憶體，主要用於layout使用iframe嵌入網頁時的記憶體流失問題*/$.fn.panel.defaults.onBeforeDestroy = function () {    var frame = $(‘iframe‘, this);    try {        // alert(‘銷毀，清理記憶體‘);        if (frame.length > 0) {            for (var i = 0; i < frame.length; i++) {                frame[i].contentWindow.document.write(‘‘);                frame[i].contentWindow.close();            }            frame.remove();            if ($.browser.msie) {                CollectGarbage();            }        }    } catch (e) {    }};jquery.easyui.plus.js

　　

建立jquery.easyui.plus.js放到scripts目錄下，引入即可

//產生唯一的GUIDfunction GetGuid() {var s4 = function () {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);};return s4() + s4() + s4() + "-" + s4();}

　　

編譯預覽一下，點擊下，新增和編輯，好，有效果了

此時我們建立增加，和編輯的action和view

這裡是SysSampleController的代碼

using System.Collections.Generic;using System.Linq;using System.Web.Mvc;using App.Common;using App.IBLL;using App.Models.Sys;using Microsoft.Practices.Unity;namespace App.Admin.Controllers{    public class SysSampleController :Controller    {        /// <summary>        /// 業務層注入        /// </summary>        [Dependency]        public ISysSampleBLL m_BLL { get; set; }        public ActionResult Index()        {            return View();        }        public JsonResult GetList(GridPager pager, string queryStr)        {            List<SysSampleModel> list = m_BLL.GetList(ref pager);            var json = new            {                total = pager.totalRows,                rows = (from r in list                        select new SysSampleModel()                        {                            Id = r.Id,                            Name = r.Name,                            Age = r.Age,                            Bir = r.Bir,                            Photo = r.Photo,                            Note = r.Note,                            CreateTime = r.CreateTime,                        }).ToArray()            };            return Json(json, JsonRequestBehavior.AllowGet);        }        #region 建立        public ActionResult Create()        {            return View();        }        [HttpPost]        public JsonResult Create(SysSampleModel model)        {                if (m_BLL.Create(model))                {                    return Json(1, JsonRequestBehavior.AllowGet);                }                else                {                    return Json(0, JsonRequestBehavior.AllowGet);                }             }        #endregion        #region 修改        public ActionResult Edit(string id)        {            SysSampleModel entity = m_BLL.GetById(id);            return View(entity);        }        [HttpPost]        public JsonResult Edit(SysSampleModel model)        {                           if (m_BLL.Edit(model))                {                    return Json(1, JsonRequestBehavior.AllowGet);                }                else                {                    return Json(0, JsonRequestBehavior.AllowGet);                }                   }        #endregion        #region 詳細        public ActionResult Details(string id)        {            SysSampleModel entity = m_BLL.GetById(id);            return View(entity);        }        #endregion        #region 刪除        [HttpPost]        public JsonResult Delete(string id)        {            if (!string.IsNullOrWhiteSpace(id))            {                if (m_BLL.Delete(id))                {                    return Json(1, JsonRequestBehavior.AllowGet);                }                else                {                                        return Json(0, JsonRequestBehavior.AllowGet);                }            }            else            {                return Json(0, JsonRequestBehavior.AllowGet);            }        }        #endregion            }}SysSampleController

　　在建立視圖之前，我們先建立一個模板頁，開啟views下面的Shared建立

<!DOCTYPE html><html><head>    <title>Main</title>    @Styles.Render("~/Content/themes/blue/css")    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>     <script src="@Url.Content("~/Scripts/jquery.easyui.plus.js")"></script>    @Styles.Render("~/Content/css")    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script></head><body>        @RenderBody()</body></html>

　　我們以後的快顯視窗全部要用到這個模版，這個模版頁主要是引入了資料編輯和校正
下面建立Create視圖

@model App.Models.Sys.SysSampleModel@using App.Common;@using App.Models.Sys;@using App.Admin;@{     ViewBag.Title = "建立";    Layout = "~/Views/Shared/_Index_LayoutEdit.cshtml";    }<script type="text/javascript">    $(function () {        $("#btnSave").click(function () {                           $.ajax({                    url: "/SysSample/Create",                    type: "Post",                    data: $("#CreateForm").serialize(),                    dataType: "json",                    success: function (data) {                        if (data == 1) {                            window.parent.frameReturnByMes("成功");                            window.parent.frameReturnByReload(true);                            window.parent.frameReturnByClose()                        }                        else {                            window.parent.frameReturnByMes("失敗");                        }                    }                });        });    });    </script><div class="mvctool bgb">    <a id="btnSave" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-save" style="padding-left: 20px;">儲存</span></span></a></div>@using (Html.BeginForm("Create", "SysSample", null, FormMethod.Post, new { Id = "CreateForm" })){    @Html.ValidationSummary(true)    <table class="fromEditTable setTextWidth300">        <tbody>            <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.Id)：                </td>                <td style="width:310px">                    @Html.EditorFor(model => model.Id)                </td>                <td>@Html.ValidationMessageFor(model => model.Id)</td>            </tr>            <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.Name)：                </td>                <td>                    @Html.EditorFor(model => model.Name)                </td>                <td>                    @Html.ValidationMessageFor(model => model.Name)                </td>            </tr>            <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.Age)：                </td>                               <td>                    @Html.EditorFor(model => model.Age)                    </td>                <td>                    @Html.ValidationMessageFor(model => model.Age)                </td>            </tr>            <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.Bir)：                </td>                                <td>                    @Html.TextBoxFor(model => model.Bir)                    </td>                <td>                    @Html.ValidationMessageFor(model => model.Bir)                </td>            </tr>                       <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.Note)：                </td>                               <td>                    @Html.EditorFor(model => model.Note)                    </td>                <td>                    @Html.ValidationMessageFor(model => model.Note)                </td>            </tr>            <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.CreateTime)：                </td>                                <td>                    @Html.TextBoxFor(model => model.CreateTime)                                       </td>                <td>                    @Html.ValidationMessageFor(model => model.CreateTime)                </td>            </tr>             <tr>                <td style="width:100px; text-align:right;">                    @Html.LabelFor(model => model.Photo)：                </td>                  <td>                      @Html.TextBoxFor(model => model.Photo)                                   </td>                               <td>                    @Html.ValidationMessageFor(model => model.Photo)                </td>            </tr>        </tbody>    </table>}Create

　　

下面的太簡單了，修改和詳細自己動手做起來吧。說得太明白東西就沒什麼意思了

• 給點提示，修改就把建立複製一份，儲存的時候把url指到修改
• 詳細就把儲存去掉就可以了
• 查詢，在Controller的GetList增加一個queryStr參數，在BLL判斷是queryStr是否為空白。不為空白就用Linq寫多個where，O了

構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（9）-MVC與EasyUI結合增刪改查