开发工具与关键技术:VS
作者:#33
撰写时间:撰写时间:2019年04月28日
老师MVC教学中学习关于数据修改和删除的知识,1、新增和修改各有模态窗体(条件一);
2、新增和修改公用一个模态窗体(条件二)。修改:点击修改按钮,模态窗体打开,数据回填;点击保存按钮提交修改数据,控制器保存修改输入的数据,返回提示消息。点击删除按钮提示询问是否删除,提交数据至控制器删除,返回提示信息。
一、新增和修改各有模态窗体:
表格自定义列中的按钮绑定修改删除的按钮:
修改按钮: function DoUpdate(employeeID) {//修改按钮,数据回填 $("#formUpdateEmployee input[type='reset']").click();//重置表单 $("#modUpdateEmployee").modal();//模态窗体打开 $.get("SelectEmployeeByID?employeeID=" + employeeID, function (data) {回填数据 $("#UemployeeID").val(employeeID); $("#UemployeeNum").val(data.employeeNum); $("#UemployeeName").val(data.employeeName); $("#Utelphone").val(data.telphone); $("#Uaddress").val(data.address); });} |
public ActionResult SelectEmployeeByID(int employeeID) {控制器方法//查询回填数据 try{ PW_Employee listEmployee = (from tbEmployee in myModel.PW_Employee where tbEmployee.employeeID == employeeID select tbEmployee).Single(); return Json(listEmployee, JsonRequestBehavior.AllowGet); }catch (Exception e) { Console.WriteLine(e); return Json(null, JsonRequestBehavior.AllowGet); } } |
保存按钮:
function saveUpdateemployee() { // 保存修改信息 var employeeID = $("#UemployeeID").val(), Num = $("#UemployeeNum").val(),Name =$("#UemployeeName").val(),phone =$("#Utelphone").val(),addres=,$("#Uaddress").val(); if (employeeID != "" && Num != "" && Num != "" && Name != "" && phone != "" && addres != "") {//判断输入的数据是否有空值 $.get("UpdateEmployeeInfor", {employeeID: employeeID, employeeNum: Num, employeeName: Name, telphone: phone, address: addres}, function (msg) { if (msg.State == true) { layer.alert(msg.Text); $("#modUpdateEmployee").modal('hide');//关闭模态窗体 Tabemployee.reload(); } else {layer.alert(msg.Text); } }); } else { layer.alert("请将数据填写完整!"); }} |
控制器修改方法: public ActionResult UpdateEmployeeInfor(PW_Employee sysEmployee) { ReturnJson msg = new ReturnJson(); if (!string.IsNullOrEmpty(sysEmployee.employeeName) {//查询数据是否已经存在 try{ //捕获异常 int listEmployee= (from tbEmployee in myModel.PW_Employee where tbEmployee.employeeID != sysEmployee.employeeID&& tbEmployee.employeeName == sysEmployee.employeeName.Trim() select tbEmployee).Count(); if (listEmployee == 0) {//修改员工信息 myModel.Entry(sysEmployee).State =System.Data.Entity.EntityState.Modified; if (myModel.SaveChanges() > 0) {//数据>0修改成功 msg.State = true; msg.Text = "修改成功!";} else{ msg.Text = "修改失败!"; } } else{msg.Text = "已经存在!"; } }catch (Exception e) {Console.WriteLine(e); msg.Text = "数据异常!";} }else{msg.Text = "请填写完整!";} return Json(msg, JsonRequestBehavior.AllowGet); } |
二、新增修改公用一个模态窗体时:声明一个bool类型的全局变量(var BLInsertUpdate = true;),true为新增,false为修改
保存方法,if语句判断当BLInsertUpdate = true时为新增保存;为 false时修改保存
三、应用layui的弹出层:声明模块全局变量(var layerIndex;),(layer.open)打开模态窗体。
//定义一个方法关闭弹出层 function layerClose() { layer.close(layerIndex); } |
function DoUpdate(employeeID) {修改按钮 BLInsertUpdate = false; //false为修改模态窗体 $("#formEmployee input[type='reset']").click();//获取from表单的ID-重置表单 //获取表单信息 $.get("SelectEmployeeByID?employeeID=" + employeeID, function (data) { $("#employeeID").val(employeeID); $("#employeeNum").val(data.employeeNum); $("#employeeName").val(data.employeeName); $("#telphone").val(data.telphone); $("#address").val(data.address); }); //弹出layer窗体 layerIndex = layer.open({ type: 1,//页面层 area: ["480px", "180px"], offset: "150px", title: $("#modtitle").text("修改"), content: $("#modEmployee") });} |
function saveemployee() {保存新增、修改方法 if ($('#formEmployee [name="employeeName"]').val() != "") { var url = ""; if (BLInsertUpdate) { url = "InsertEmployeeInfor"; }//新增 else {url = "UpdateEmployeeInfor"; }//修改 //序列化表单:新增:名称,修改:ID,名称) var formDate = $("#formEmployee").serializeArray(); $.post(url, formDate, function (msg) { if (msg.State) { layerClose();//关闭窗体 Tabemployee = layuiTable.reload('tabemployee');//刷新table } layer.alert(msg.Text); }); }else { layer.alert('请填写完整', { icon: 0 });}} |
、点击删除按钮提示询问是否删除数据:
function DoDelete(employeeID) {删除方法(传入参数员工ID) layer.confirm("确认删除该员工吗?", { icon: 3, offset: '100px', title: '提示' }, function (index) { layer.close(index); //关闭询问提示 //提交数据 $.get("DoDeleteEmployeeInfor?employeeID=" + employeeID, function (msg) { if (msg.State) {//判断数据是否修改成功,返回提示信息 layer.alert(msg.Text, { icon: 1, offset: '150px' }); Tabemployee.reload();//表格刷新 } else {layer.alert(msg.Text, { icon: 5, offset: '150px' }); }//弹出提示框 });});}; |
public ActionResult DoDeleteEmployeeInfor(int employeeID) {//通过员工ID查询删除数据 ReturnJson msg = new ReturnJson(); try{//捕获异常 var listemployee = (from tbemployee in myModel.PW_Employee where tbemployee.employeeID == employeeID select tbemployee).Single(); myModel.PW_Employee.Remove(listemployee);//移除数据 if (myModel.SaveChanges() > 0) {//判断数据是否移除成功 msg.State = true; msg.Text = "删除成功!";} else{msg.Text = "删除失败!";} return Json(msg, JsonRequestBehavior.AllowGet); } catch (Exception) { msg.Text = "数据异常!"; return Json(msg, JsonRequestBehavior.AllowGet); }} |