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: 700,
                height: 400,
                fitColumns: true, //列自適應
                nowrap: false,
                idField: 'ID',//主鍵列的列明
                loadMsg: '正在加載用戶的信息...',
                pagination: true,//是否有分頁
                singleSelect: false,//是否單行選擇
                pageSize: 5,//頁大小，一頁多少條數據
                pageNumber: 1,//當前頁，默認的
                pageList: [5, 10,15],
                queryParams: {},//往后台傳遞參數
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'ID', title: '編號', width: 80 },
                    { field: 'UName', title: '姓名', width: 120 },
                     { field: 'UPwd', title: '密碼', width: 120 },
                      { field: 'Remark', title: '備注', width: 120 },
                    {
                        field: 'SubTime', title: '時間', width: 80, 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 == 0) {
                //alert("請選擇要修改的商品！");
                $.messager.alert("提醒", "請選擇要刪除的記錄!", "error");
                return;
            }
            else
            {
                //datagrid是ajax操作，界面沒有刷新，所以datagrid會記錄上一次操作的id，然后拼接起來發送給服務端，
                //獲取要刪除的id
                if (confirm("確定要刪除嗎")) {
                    var length = rows.length;
                    var idStr = "";
                    for (var i = 0; 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 != 1)
            {
                $.messager.alert("提醒", "請選中一條記錄", "error");
                return;
            }
            //獲取到數據填充表格
            var selectionId =selections[0].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[0]));
            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"]) : 1;
            int pageSize = Request["rows"] != null ? int.Parse(Request["rows"]) : 5;
            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");
        }