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，然后拼接起来发送给服务端，//获取要删除的idif (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");}elsereturn 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");elsereturn 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");
        }

转载于:https://www.cnblogs.com/XZhao/p/6748516.html

EasyUI +MVC +EF实现增删改查相关推荐

[.NET源码] EF的增删改查
EF的增删改查创建上下文对象:WordBoradEntities db = new WordBoradEntities(); 一.添加: //1.1创建实体对象 User uObj = new Us ...
MVC ---- EF高级增删改
//高级修改(创建对象) public void EditAdance(){//创建要修改的对象Parameter pm = new Parameter(){ParaNo = "00001& ...
ssh(Spring+Spring mvc+hibernate)简单增删改查案例
最近和spring mvc干上了,各种奇葩问题,各种解决...现在想想这历程还挺艰辛的,好了,不在这墨迹了,我们进入正题. 据说,现在Springmvc很流行,既然很流行就搞搞它,看看是个什么鬼,于是 ...
.net EF框架—增删改查—ajax删除
1.数据库代码:(两个表) use master go if exists(select * from sys.databases where name='QU') drop database QU ...
MVC新手教程三：Entity Framework 4.0 来实现MVC的增删改查功能，10分钟搞定
在这一节,我们使用VS2010自带的EF4.0来实现MVC的增删查改功能,为什么用EF呢?因为如果你自己手写sqlhelper之类,或者是用动软,和我们用EF的速度比,太慢太慢··· 当然,新手还是用 ...
ASP.NET MVC增删改查
ASP.NET MVC中的增删改查基本都要使用C控制器中的两个action来完成操作,一个用于从主界面跳转到新页面.同时将所需操作的数据传到新界面,另一个则对应新界面的按钮,用于完成操作.将数据传回 ...
asp.net mysql 增删该查_asp.net 数据库的增删改查
Asp.net MVC 学习之路-003(增删改查,后端手工,前端生成) 时间:2017-03-09 Asp.net Mvc实现增删改查 1, 创建数据库可参考我写的EntityFramework实 ...
java ssm框架做增删改查,使用SSM框架组合实现增删改查的功能
基于ssm框架组合的增删改查功能 ssm框架组合之前已经搭建完成了,下面基于该框架组合实现增删改查的功能,首先创建一个数据库和一张表: CREATE DATABASE `ssmteam` /*!401 ...
使用EF框架实现MVC的增删改查功能！！！Entity Framework
一.什么是EF? ADO.NETEntity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.ADO.NET Entity Fram ...

EasyUI +MVC +EF实现增删改查

EasyUI +MVC +EF实现增删改查相关推荐

最新文章

热门文章