修改

开发工具与关键技术：mvc

作者：黄志鹏

撰写时间：2019/5/3

在做项目的时候我们经常需要用到新增，修改，删除，查询。下面我们来说说其中的修改。

我们先来说说整体的思路是我们在渲染出表格的数据后，我们在表格的每一列里添加一个自定义按钮，我们就通过这个修改的自定义按钮来打开我们修改的模态框，与此同时我们要实现数据的回填，在修改完数据之后我们就来实现修改保存操作。

首先我们先在控制层那边写好修改的方法，具体是看接下来的代码，下面我们在这个方法里面写代码，ReturnJson
returnJson = new ReturnJson();首先我们声明returnJson来记录我们的状态。然后用try,catch来捕捉错误，在try里面检查和其他是否有冲突

int otherCount = (from
tbEmployee in myModels.PW_Employee

                              where

tbEmployee.employeeID != Employee.employeeID && (
tbEmployee.employeeName == Employee.employeeName.Trim() ||

tbEmployee.telphone== Employee.telphone.Trim()||

tbEmployee.address == Employee.address.Trim())

                              select

tbEmployee).Count();

接下来就是查询出需要修改的数据，我们是根据主键ID提取数据

if (otherCount == 0) {

PW_Employee db = (from
bbEmployee in myModels.PW_Employee where
bbEmployee.employeeID == Employee.employeeID select
bbEmployee).Single();

下面的代码是给实体赋值

db.employeeName = Employee.employeeName;

db.employeeNum = Employee.employeeNum;

db.telphone = Employee.telphone;

db.address = Employee.address;

接下来我们可以实现修改操作myModels.Entry(db).State = EntityState.Modified;

在我们修改完之后就可以做保存操作操作了。

其中我们判断它的状态，如果returnJson.State为真则修改成功，否则保存失败。

代码如下：

if (myModels.SaveChanges() > 0)

                {

                    returnJson.State = true;

                    returnJson.Text = "修改成功";

                }

                else

                {

                    returnJson.State = false;

                    returnJson.Text = "修改失败";

                }

接下来我们还要写数据回填的方法，下面是一个单表查询的方法，查询出需要回填的数据。

代码如下：

public ActionResult
hui(int employeeID)

    {

try
{

            var

lianxi = (from tbEmployee in
myModels.PW_Employee

                         where

tbEmployee.employeeID == employeeID

                         select

tbEmployee

                        ).Single();

            return

Json(lianxi, JsonRequestBehavior.AllowGet);

        }

        catch (Exception e)

        {

            Console.WriteLine(e);

            return

Json("", JsonRequestBehavior.AllowGet);

        }

    }

}

当我们在控制层那边写完数据回填的方法和修改保存的方法后，我们就可以在视图那边写提交的方法了。接下来我们就是要打开修改的模态框并实现数据的回填了。首先我们要重置表单

$(’#formEmployee1 input[type=“reset”]’).click();然后是打开模态框

$("#modalEmployee1").modal(‘show’);再然后是实现数据的回填，在这里我们用post方法提交到控制层那边 $.post("/Main/hui",

          { employeeID: EemployeeID }, function (data) {

              loadDatatoForm("formEmployee1", data); 

          }, "json");

在这里我们是根据json对象填充form表单

下面是打开修改的模态框并实现数据的回填代码：

    function

openUpdate(EemployeeID) {

        $('#formEmployee1

input[type=“reset”]’).click();

        $("#modalEmployee1").modal('show');

        $.post("/Main/hui",

          {

employeeID: EemployeeID }, function (data) {

loadDatatoForm(“formEmployee1”, data);

          }, "json");            

    }

完成这一步后我们就可以提交修改的方法了，首先我们要获取input输入数据的值，再然后判断输入的值是否为空和找不到，如果不是的话我们就可以用异步提交把数据提交到控制层那边了，提交完了之后我们要关闭模态框并且刷新表格。

具体代码如下：

function bao1() {

        var employeeID = $('#formEmployee1 input[name="employeeID"]').val();

        var employeeNum = $('#formEmployee1

input[name=“employeeNum”]’).val();

        var employeeName = $('#formEmployee1

input[name=“employeeName”]’).val();

        var telphone = $('#formEmployee1 input[name="telphone"]').val();

        var address = $('#formEmployee1 input[name="address"]').val()

        if (employeeNum != '' && employeeNum != undefined

          && employeeName != '' &&

employeeName != undefined

         && telphone != '' && telphone

!= undefined

            && address != '' && address

!= undefined

            ) {

            $.post("/Main/UpdateAcademe",

                {

             employeeName: employeeName,

employeeNum: employeeNum, telphone: telphone, address: address,
employeeID:employeeID

                },

                function (returnJson) {

                    if (returnJson.State

== true) { $("#modalEmployee1").modal(‘hide’);

                        employee =

layuiTable.reload(‘employee’);

                    }

layer.alert(returnJson.Text);

                }, "json");

        }

        else {

            layer.alert('请填写完整', { title: '提示', icon: 0 });

        }

    }

下面是所有的样式截图：

具体情况就是这样了，（文中所有代码来自本人的项目练习）