EasyUI +MVC +EF实现增删改查

OA项目的框架已经搭建好了，接下来就是在这个框架下完成相应的业务的编码，接下来实现UserInfo页面的增删改查。

1.首先先谈一下遇到的一个框架上的问题:提示EF版本不一致之类的问题，主要是解决方案的版本中添加的EF的版本不一致造成的

解决办法：

1. 工具 -> 库程序包管理器 -> 管理解决方案的nuget程序包

2. 在选中已安装的包中找到EntityFramework，选中后，点击"更新"按钮，或者直接安装，后面会弹出提示更新的项目类库

3. 选择要更新的项目（一般会自动默认选择需要更新的项目），点击"确定"按钮

4. 等待更新完毕，解决。

2.前台代码

 <script type="text/javascript">
        $(function () {
 
            loadData();
        });
        //展示数据
        function loadData() {
            $('#tt').datagrid({
                url: '/UserInfo/GetUserInfo',
                type:"post",
                title: '用户数据表格',
                width: ,
                height: ,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'ID',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: ,//页大小，一页多少条数据
                pageNumber: ,//当前页，默认的
                pageList: [, ,],
                queryParams: {},//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width:  },
                    { field: 'ID', title: '编号', width:  },
                    { field: 'UName', title: '姓名', width:  },
                     { field: 'UPwd', title: '密码', width:  },
                      { field: 'Remark', title: '备注', width:  },
                    {
                        field: 'SubTime', title: '时间', width: , align: 'right',
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
                        }
                    }
                ]],
                toolbar: [{
                    id: 'btnGet',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        AddUserInfo();
                    }
                },
                {
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler:
                        function () {
                            deleteUserInfo();
                        }
                },
                {
                    id: 'btnEdit',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler:
                        function () {
                            EditUserInfo();
                        }
                }
                ],
            });
        }
        //删除数据
        function deleteUserInfo() {
            var rows = $('#tt').datagrid('getSelections');
            if (!rows || rows.length == ) {
                //alert("请选择要修改的商品！");
                $.messager.alert("提醒", "请选择要删除的记录!", "error");
                return;
            }
            else
            {
                //datagrid是ajax操作，界面没有刷新，所以datagrid会记录上一次操作的id，然后拼接起来发送给服务端，
                //获取要删除的id
                if (confirm("确定要删除吗")) {
                    var length = rows.length;
                    var idStr = "";
                    for (var i = ; i < length; i++) {
                        idStr = idStr + rows[i]["ID"] + ',';
                    }
                    //注意最后一个多了一个逗号
                    $.post("/UserInfo/Delete", { "num": idStr }, function (data) {
                        if (data == "OK") {
                            // loadData();这样将会加载到第一页了
                            $('#tt').datagrid('reload');
                            $('#tt').datagrid('clearSelections');
                        }
                        else if (data == "NO") {
                            $.messager.alert("提醒", "删除失败", "error");
                        }
                    })
                }
            }
 
        }
        //添加数据
        function AddUserInfo()
        {
            $('dd').css("display","block")
            $('#dd').dialog({
                resizable: false,
                title:"添加用户",
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //提交前进行表单的验证
                        $("#addForm").submit();
 
                    }
                }, {
                    text: '取消',
                    iconCls:'icon-cancel',
                    handler: function () {
                        $('#dd').dialog('close');
                    }
                }]
            });
 
        }
        function AddUser(data)
        {
            if (data == "OK")
            {
                $('#tt').datagrid('reload');
                $("#addForm input").val("");
                $("#dd").dialog('close');
            }
            else if (data == "NO")
            {
                alert("添加失败");
            }
        }
        //修改数据
        function EditUserInfo()
        {
            //判断是否选中
            var selections=$("#tt").datagrid("getSelections");
            if (!selections || selections.length != )
            {
                $.messager.alert("提醒", "请选中一条记录", "error");
                return;
            }
            //获取到数据填充表格
            var selectionId =selections[].ID;
            $.post("/UserInfo/GetEditData", { "id": selectionId }, function (data) {
                //填充数据
                $("#ID").val(data.ID);
                $("#DelFlag").val(data.DelFlag);
                $("#UName").val(data.UName);
                $("#UPwd").val(data.UPwd);
                $("#Remark").val(data.Remark);
                $("#Sort").val(data.Sort);
                $("#SubTime").val(formatTime(data.SubTime));
                    $("#editDiv").css("display", "block");
                    $('#editDiv').dialog({
                        resizable: false,
                        title: "修改用户",
                        buttons: [{
                            text: '确定',
                            iconCls: 'icon-ok',
                            handler: function () {
                                //提交前进行表单的验证
                                $("#editForm").submit();
 
                            }
                        }, {
                            text: '取消',
                            iconCls: 'icon-cancel',
                            handler: function () {
                                $("#editDiv").dialog("close")
                            }
                        }]
                    });
 
            })
        }
        function EditUser(data)
        {
            if (data == "OK") {
                //关闭弹窗
                //reload datagrid
                $("#tt").datagrid("reload");
                $("#editDiv").dialog("close")
            }
            else {
                $.messager.alert("提醒", "修改失败", "error");
            }
        }
        //时间解析
        function formatTime(val) {   //解析日期字段调用此函数即可。
            var re = /-?\d+/;
            var m = re.exec(val);
            var d = new Date(parseInt(m[]));
            return d.pattern("yyyy-M-d");
        }
    </script>
 
</head>
<body>
    <div>
        <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table>
    </div>
    <!------添加数据表单-------->
    <div id="dd" icon="icon-save" style="padding:5px;width:400px;height:200px;display:none;">
        @using (Ajax.BeginForm("AddUser", "UserInfo", new AjaxOptions() { HttpMethod = "post", OnSuccess = "AddUser" }, new { id = "addForm" }))
        {
            <table>
                <tr><td>姓名</td><td><input type="text" name="UName"></td></tr>
                <tr><td>密码</td><td><input type="password" name="UPwd"></td></tr>
                <tr><td>备注</td><td><input type="text" name="Remark"></td></tr>
                <tr><td>排序</td><td><input type="text" name="Sort"></td></tr>
            </table>
        }
    </div>
    <!------------------修改数据表单------此时需要重新查库，因为此时展示的数据不全---------------->
    <div id="editDiv" icon="icon-save" style="padding:5px;width:400px;height:200px;display:none;">
        @using (Ajax.BeginForm("EditUserInfo", "UserInfo", new AjaxOptions() { HttpMethod = "post", OnSuccess = "EditUser" }, new { id = "editForm" }))
        {
            <table>
                <input type="hidden" id="ID" name="ID">
                <input type="hidden" id="SubTime" name="SubTime">
                <input type="hidden" id="DelFlag" name="DelFlag">
                <!--上面的两条是不允许修改的-->
                <tr><td>姓名</td><td><input type="text" id="UName" name="UName"></td></tr>
                <tr><td>密码</td><td><input type="password" id="UPwd" name="UPwd"></td></tr>
                <tr><td>备注</td><td><input type="text" id="Remark" name="Remark"></td></tr>
                <tr><td>排序</td><td><input type="text" id="Sort" name="Sort"></td></tr>
            </table>
        }
    </div>
 
</body>
 
</html>

3.后台代码

  public class UserInfoController : Controller
    {
        //
        // GET: /UserInfo/
        /// <summary>
        /// 分页展示数据
        /// </summary>
        /// <returns></returns>
        IBLL.IUserInfoService bll = new BLL.UserInfoService();
 
        public ActionResult Index()
        {
 
            return View();
        }
        /// <summary>
        /// 获取用户的数据
        /// </summary>
        /// <returns></returns>
        public ActionResult GetUserInfo()
        {
            int pageIndex = Request["page"] != null ? int.Parse(Request["page"]) : ;
            int pageSize = Request["rows"] != null ? int.Parse(Request["rows"]) : ;
            int totalCount;
            short delFlag = (short)DelFlagEnum.Noraml;
            IQueryable<UserInfo> userInfoList = bll.LoadPageEntity<int>(pageSize, pageIndex, out totalCount, u => u.DelFlag == delFlag, u => u.ID, true);
            var tempList = userInfoList.Select(u => new { ID = u.ID, UName = u.UName, UPwd = u.UPwd, SubTime = u.SubTime, Remark = u.Remark });
            //从demo中可以看出返回的数据主要放在rows和total中
            return Json(new { rows = tempList, total = totalCount });
        }
 
        /// <summary>
        /// 删除数据
        /// </summary>
        /// <returns></returns>
        public ActionResult Delete()
        {
            string nums = Request["num"].ToString();
            string[] numList = nums.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
            List<int> numbers = numList.Select(num => int.Parse(num)).ToList();
            bool res = bll.DeleteUserInfoList(numbers);
            if (res)
            {
                return Content("OK");
            }
            else
                return Content("NO");
 
        }
        /// <summary>
        /// 添加数据
        /// </summary>
        /// <param name="userInfo"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult AddUser(UserInfo userInfo)
        {
            userInfo.SubTime = DateTime.Now;
            userInfo.ModifiedOn = DateTime.Now;
            userInfo.DelFlag = (short)DelFlagEnum.Noraml;
            bll.AddEntity(userInfo);
            if (userInfo != null)
                return Content("OK");
            else
                return Content("NO");
        }
        /// <summary>
        /// 修改数据
        /// </summary>
        /// <returns></returns>
        public ActionResult GetEditData()
        {
            int id = int.Parse(Request["id"]);
            UserInfo userInfo = bll.LoadEntity(u => u.ID == id).First();
            return Json(userInfo, JsonRequestBehavior.AllowGet);
        }
        public ActionResult EditUserInfo(UserInfo userInfo)
        {
            userInfo.ModifiedOn = DateTime.Now;
            bll.EditEntity(userInfo);
            return Content("OK");
        }
 
    }

4.注意事项

1.对于错误信息：进行获取数据的时候出现不允许Get"此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站。若要允许 GET 请求，请将 JsonRequestBehavior 设置为 AllowGet。"的解决方案

(1)方案1
    $.ajax({
        type: 'POST',
        url: '/Home/AjaxGetJsonData',
        success: function (data) {
            alert(data);
        },
        error: function (error) {
            alert(error.responseText);
        }
    });

(2)方案2
return Json(new { rows=tempList ,total=totalCount},JsonRequestBehavior.AllowGet);

2.首先对于MVC来说，首先得访问一个控制器下的方法获取到展示数据的页面，获取数据应该从该控制器下面的其他的方法去获取
最好不要混在一起。

3.从easyUI 中的demo可以看出一定要将返回的数据交给rows，数据的条数返回到total

4.批量删除数据：删除的时候不能直接调用baseService中的删除方法，应该使用DBSession调用dal下面的方法，然后统一使用DbSession中的SaveChanged
同时为了保证删除后界面保持在原来的pageIndex,需要使用reload方法，同时为了删除easyUI中缓存的id，需要调用clearSelections

5.添加数据的时候，一定要进行表单的验证，使用easyUI，由于要进行刷新界面，因为是异步提交，所以没有刷新界面，表单中依然保存着原来的数据
     $("#addForm input").val("");
    
使用AjaxHelper创建表单，可以在objectAttribute中添加id，然后提交表单的时候，直接使用
     $("#id").submit();
这个效果和直接在AJax表单中写一个submit按钮是一样的

6.对于后台JavaScriptSerilizer或者return Json（），会将时间变为自1970年1月1日午夜到指定日期的毫秒数，所以需要重新将这些毫秒数计算出所在年月日

//时间解析
        function formatTime(val) {   //解析日期字段调用此函数即可。
            var re = /-?\d+/;
            var m = re.exec(val);
            var d = new Date(parseInt(m[0]));
            return d.pattern("yyyy-M-d");
        }