Visual Studio连接数据库后对信息的修改

Html部分

修改部分的Html部分和新增功能内的Html大部分都是共用的，这里的话还需要为修改在加上一个修改的模态框，也是依照新增的模态框来进行改动，如下：

模态框的样式也可以自行去到Bootstrap中查找并修改，https://v3.bootcss.com/javascript/#modals

JQ部分

修改的代码是接着上篇新增代码，预加载模块，表格渲染，表格重载都还是继续用新增文章中的；

1. 进入正题，修改操作是分两边走的，第一步是把数据填入修改模态框内，第二部则就是对修改模态框的数据进行保存；
2. 数据回填：唯一需要注意的是对该条表格的ID进行获取

function ButtonData(data) {

            var set = '<button class="layui-btn layui-btn-xs layui-btn-warm" οnclick="updateModal(' + data.academeID + ')">修改</button><button class="layui-btn layui-btn-xs layui-btn-danger" οnclick="DeteleData(' + data.academeID + ')">删除</button>';

            return set;

        }

在新增文章中可以找到和这句同样的代码，只不过这里对每条表格的ID进行了获取，回填代码如下：

function updateModal(stuID) {

            $("#updateModal").modal("show");

            $.post("/Areas/Academe/openUpdateModal", { LimitID: stuID }, function (data) {

                console.log(data.academeID)

                $("#academeIDU").val(data.academeID);

                $("#academeNameU").val(data.academeName);

                $("#academeCodeU").val(data.academeCode);

            })

        }

stuID接收的是点击修改按钮时返回回来的一个ID值，这里的话也需要注意对隐藏域的值的设置

1. 控制器内的代码如下：

1. 回填的效果：

1. 修改后的保存操作

 function UpdateSaveAcademe() {

            var acaID = $("#academeIDU").val().trim();

            var acaName = $("#academeNameU").val().trim();

            var acaCode = $("#academeCodeU").val().trim();

            console.log(acaID)

            $.post("/Areas/Academe/SaveData", {

                academeID: acaID,

                academeName: acaName,

                academeCode: acaCode

            }, function (msg) {

                layer.alert(msg.Text);

                if (msg.state) {

                    Search();

                    $("#updateModal").modal("hide");

                }

            })

        }

trim（）:去除内容中的所有空格；

保存操作的话和新增操作也可以说是如出一辙，可进行封装处理

1. 保存操作的控制器代码：

  其中以前面不同的是在原来简易的修改上增添了对接收到的数据进行判断，这样也可以使得代码更加严谨，这里也用到了通过 Request.Form["name的属性值"]获取表单数据，前面的话也有对这一系列的方法进行讲述，可以自行查看“From表单提交”文章；