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: '用户数据表格', 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', 50 }, { field: 'ID', title: '编号', 80 }, { field: 'UName', title: '姓名', 120 }, { field: 'UPwd', title: '密码', 120 }, { field: 'Remark', title: '备注', 120 }, { field: 'SubTime', title: '时间', 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=" 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table> </div> <!------添加数据表单--------> <div id="dd" icon="icon-save" style="padding:5px;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;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");
}