构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（9）-MVC与EasyUI结合增删改查

系列目录

文章于2016-12-17日重写

在第八讲中，我们已经做到了怎么样分页。这一讲主要讲增删改查。第六讲的代码已经给出，里面包含了增删改，大家可以下载下来看下。

这讲主要是，制作漂亮的工具栏，虽然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>

里面用到了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目录下，引入即可

编译预览一下，点击下，新增和编辑，好，有效果了

此时我们创建增加，和编辑的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(, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(, 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(, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(, 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(, JsonRequestBehavior.AllowGet);
                }
                else
                {

                    return Json(, JsonRequestBehavior.AllowGet);
                }
            }
            else
            {
                return Json(, 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>

_Index_LayoutEdit.cshtml

我们以后的弹出窗口全部要用到这个模版，这个模版页主要是引入了数据编辑和校验
下面创建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了