ASP.NET MVC5+EF6+EasyUI 后台管理系统（8）

本次参考学习了
https://www.cnblogs.com/ymnets/p/3424309.htmlC
这个人的教程
但是由于时代久远，教程节奏快，版本的问题。对于初学者来说，很不友好。
正好我也要学习，所以自己重新写一下，顺带改一改其中的小bug。

系统目标：实现一个权限管理案例 用户—角色—权限

本节目标：增删改查

1.简单修改一下原来的前台代码

主要是把增删改查的button实现，后台代码后面再改

下面这个index 添加一些代码，我就把这个代码全部粘贴了，自己对比一下需要改进的地方

代码

@using Apps.App;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index_Layout.cshtml";


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

</div>
<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: 25px;">查询</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: 25px;">新增</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: 25px;">编辑</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: 25px;">详细</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: 25px;">删除</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: 25px;">导出</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: 25px;">刷新</span></span></a>
</div>
<table id="List"></table>
<script type="text/javascript">
    $(function () {
        $('#List').datagrid({
            url: '/SysSample/GetList',
            width: $(window).width() - 10,
            methord: 'post',
            height: $(window).height() - 35,
            fitColumns: true,
            sortName: 'Id',
            sortOrder: 'desc',
            idField: 'Id',
            pageSize: 15,
            pageList: [15, 20, 30, 40, 50],
            pagination: true,
            striped: true, //奇偶行是否区分
            singleSelect: true,//单选模式
            rownumbers: true,//行号
            columns: [[
                { field: 'Id', title: 'ID', width: 40 },
                { field: 'Name', title: '名称', width: 80 },
                { field: 'Age', title: '年龄', width: 80, align: 'center' },
                { field: 'Bir', title: '生日', width: 120, align: 'center' },
                { field: 'Photo', title: '照片', width: 80, align: 'center' },
                { field: 'Note', title: '说明', width: 80, align: 'center' },
                { field: 'CreateTime', title: '创建时间', width: 120, align: 'center' }
            ]]
        });
    });
</script>
<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 GetGuid() {
        var s4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return s4() + s4() + s4() + "-" + s4();
    }
    $(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 == 1)
                                $("#List").datagrid('load');
                            $.messageBox5s('提示', data.message);
                        }, "json");

                    }
                });
            } else { $.messageBox5s('提示', '请选择要操作的记录'); }
        });
    });
</script>
<script type="text/javascript">

</script>

注意了哈，有个 $.messageBox5s 。这是原博主拓展的
jquery.easyui.plus.js

/** 
* 在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) {
    }
};

现在运行前台会有变化（忘了截图了），所以我们接着改

2.具体操作增删改查

创建一个模板页，打开views下面的Shared创建

<!DOCTYPE html>
<html>
<head>
    <title>Main</title>
    @Styles.Render("~/Content/themes/blue/css")
    <script src="@Url.Content("~/Scripts/jquery-3.3.1.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.validate.unobtrusive.min.js")" type="text/javascript"></script>

</head>

<body>

    @RenderBody()

</body>
</html>

然后我们去修改一下控制器中的内容

using Apps.App.Common;
using Apps.App.IBLL;
using Apps.Models.Sys;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using Unity;

namespace Apps.Controllers
{
    public class SysSampleController : Controller
    {
        //
        // GET: /SysSample/
        /// <summary>
        /// 业务层注入
        /// </summary>
        [Dependency]
        public ISysSampleBLL m_BLL { get; set; }
        public ActionResult Index()
        {
            //List<SysSampleModel> list = m_BLL.GetList("");
            return View();
        }

        [HttpPost]
        public JsonResult GetList(GridPager pager, string queryStr)
        {
            List<SysSampleModel> list = m_BLL.GetList(ref pager, queryStr);
            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

    }
}

来来来注意看。。。。去创建Create视图

@model Apps.Models.Sys.SysSampleModel
@using Apps.App.Common;
@{
    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>
}

后续补充
修改就把创建复制一份，保存的时候把url指到修改

详细就把保存去掉就可以了

查询，在Controller的GetList增加一个queryStr参数，在BLL判断是queryStr是否为空。不为空就用Linq写多个where，O了

3.总结

前段时间休假了，所以文章没有跟上，这次写的可能有遗漏的地方，在后4章，有个小结，会把代码给个链接的，可以参考修改

来源：https://blog.csdn.net/weixin_44901266/article/details/99671089