VS中的新增、修改、删除

最新推荐文章于 2025-03-26 20:40:24 发布

置顶敲可耐的我

最新推荐文章于 2025-03-26 20:40:24 发布

阅读量5.1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_44542781/article/details/91350405

版权

本文讲述了在Visual Studio（VS）中如何实现页面上的数据新增、修改和删除功能。通过在HTML中创建模态窗体，利用jQuery和Bootstrap实现操作的触发和交互。新增时，弹出模态窗体，点击保存按钮将数据传给控制器，进而保存到数据库。修改操作类似，但需要先查询数据，填充到模态窗体，再进行修改和保存。删除操作则需要检查相关联的数据，确保无影响后进行删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次任务完成时间：2019年06月 8日
开发工具与关键技术：Visual Studio 2015 和 VS中的新增、修改、删除
VS中的新增、修改、删除

VS中的新增、修改、删除
本章内容是如何在页面上实现新增、修改、删除的操作，我们如果需要新增、修改、删除数据，就直接去数据库里面进行新增、修改、删除这些操作，但是你不可能每次去操作数据库，所以我们就在页面上编写了新增、修改、删除操作。
首先我们在HTML代码中编写了两个模态框窗体的代码，一个新增，一个修改，它们两个操作时都是需要弹出模态窗体的，在最外层分别放置了一个ID，是为了更方便去获取模态窗体，另外就是一些表单的布局
在这里插入图片描述
新增：先把模态窗体弹出,点击新增按钮->弹出模态窗体，我在视图定义一个弹出模态窗体的方法function，在button那里通过一个onclick事件去调用这个方法；给这个button按钮绑定一个点击click事件，
首先，去获取新增这个按钮，在新增按钮给了它一个ID，获取这个ID，（在jQuery中id选择器，是通过一个#符号去获取），测试它是否绑定成功，给它一个提示框alert（23），点击按钮，若是弹出提示框，表示绑定成功，没有，则表示绑定失败；下一步就是弹出模态窗体，通过id选择器去获取在模态窗体放置在最外层的id；去调用一个 modal这个方法，（调用modal需要引用一个插件bootstrap.min .js）；
在这里插入图片描述
再去页面查看模态窗体是否弹出成功；

在这里要注意一个问题，在模态窗体输入数据，然后关闭它，当你在再次打开模态窗体时，数据还在，它并被没有清空，而用户想要的操作是再一次打开模态窗体时，里面数据被清空，一个空的模态窗体，
有一个方法可以解决这个问题，表单的重置，在模态窗体的HTML代码中，有个表单，我们在表单里面放置了一个input标签，它的type类型为inset重置，点击按钮时，就可以把表单里面的数据清空掉；再让标签隐藏，给它设置hidden，
在这里插入图片描述
而它的jQuery写法是先去获取表单的id，通过一个空格上下文选择器，选择器到它的type类型是reset的input标签，因为type是input标签的一个属性，所以把属性名称放置在方括号里面；给它添加个点击事件；

重置完表单后，就是关键的一步了，点击保存按钮，进行保存的一个操作，给它定义一个function，这个方法里面主要是进行一个保存的操作，而我们要去模态窗体里面我们在保存的按钮上添加了一个onclick，通过onclick调用这个方法，获取需要新增的数据，把获取到的数据传给控制器；控制器通过一个方法再传给数据库里面进行新增，我通过get把获取的数据传送到控制器，在get里，第一个参数：URL，具体的位置，第二个参数：你要传递的参数，以键值对；
第三个参数：回调函数；传递数据后，还有去判断传递数据是否完整，再给用户设置一些提示，
在这里插入图片描述
在控制器定义一个方法，去接收视图传过来的数据，在方法里面，去实例化数据，在对它进行赋值，赋值之后，就是新增，再保存，保存数据完成之后，要判断数据是否新增成功，数据是否为空，

控制器和视图都完成判断后，就这样新增数据完成了，新增的数据保存到数据库中；
修改：
大概操作与新增相似，点击修改按钮，弹出模态窗体时并且把数据查询出来，放到模态窗体里面，填写需要修改的数据，对修改的数据进行保存；（查询数据方法有两种：根据学院id去数据库里面查我要修改的这一条数据，查询好的数据放到模态窗体里面；还有一种方式，获取当前行的数据）
首先：第一步，去控制器里面写一个查询方法，（据学院id去数据库里面查我要修改的这一条数据，查询好的数据放到模态窗体里面；）所以需要一个参数，别忘了写参数的类型，（形参要声明它的一个变量）；
（写linq的查询语句）定义一个变量，给他一个名称，关键字from，后跟一个范围变量（tbAcademe），关键字in ，他的数据源，根据什么去查，这个时候是通过一个关键字where去进行一个数据的筛选，范围变量（tbAcademe）里面的id等于传过来的值，然后再通过关键字select和new，查询具体的字段
最后把查询的信息返回给视图；

public ActionResult SelectAcamedeByID(int AcademeID) {
        var list = from tbAcademe in myModel.SYS_Academe
                   where tbAcademe.AcademeID = = AcademeID
                   select new //匿名形式
                   {
                       tbAcademe.AcademeID,
                       tbAcademe.AcademeName,
                       tbAcademe.AcademeCode
                   };
        return Json(list, JsonRequestBehavior.AllowGet);
    }

方法定义完之后，回到视图，在点击修改按钮的时候，去请求调用控制器的方法，用post方法去请求，在括号里先是定义好的方法名，键值对，回调函数；通过id选择器选择到相应的id，并给他们赋值，进行回填；在这里要注意，我们需要在修改模态窗体里放置一个隐藏域，给它设置一个id，因为我们要根据id去对哪一行数据进行修改，之后就是打开模态窗体；
//1.1 修改学院数据

   	 function openUpdate(ID) {
        $.post("SelectAcamedeByID", { AcademeID: ID }, function (data) {//提交方法
            $("#UAcademeName").val(data[0].AcademeName);//获取学院名称，进行数据回填
            $("#UAcademeCode").val(data[0].AcademeCode);//获取学院编号，进行数据回填
            $("#AcademeID").val(data[0].AcademeID);//获取学院id，进行数据回填
            $("#modalUpdateAcademe").modal();//打开模态窗体
        });
    }

最后一步就是保存数据
在模态窗体里面我放置两个按钮，保存和关闭，当我们点击保存按钮时，进行数据的保存操作，在视图定义一个保存方法，先去获取需要修改的数据，在通过get方法提交到控制器那边，先是提交的路径，再这里我换了一种书写方式，哪一片区域下的控制器的方法，键值对，回调函数；判断数据是否保存成功，若保存成功，给出提示，关闭模态窗体；保存失败，给出提示。

function savaUpdate(){
        var name = $("#UAcademeName").val();//获取需要修改的值
        var code = $("#UAcademeCode").val();
        var id = $("#AcademeID").val();
        $.get("/SystemManagement/CollegeInfor/Update",
            { AcademeID: id, AcademeName: name, AcademeCode: code }
            , function (msg) {//提交方法
                if (msg.State == true) {//判断是否修改成功
                    layer.alert(msg.Text);
                    $("#modalUpdateAcademe").modal('hide');//关闭模态窗体
                    tabAcademe.reload();//刷新表格
                } else {
                    layer.alert(msg.Text);
                }
        });
    }

获取到需要修改的数据，把数据传到控制器那边进行保存，转到控制器，定义一个修改的方法，在方法里面进行数据的修改，（内容与新增类似，就不做详细讲解）判断数据是否为空，若为空，则给出提示 <学院名称或学院编号不能为空>，不为空继续修改操作；再判断是否大于0，若大于0，则保存成功，小于等于0，则保存失败；
最后返回给视图；
在这里插入图片描述
删除：
删除这个操作，if判断语句相对来说就有点多，因为在删除数据的同时还要考虑有没有牵扯到其他的数据，若执意要删除数据的话，会有很多数据受到影响，我们删掉学院信息之前，就需要判断在学院信息下面是否有年级信息、班级信息、专业信息、学生信息、教师信息的数据，若是有这些数据就不能删除该学院信息，
首先去查询数据，把数据查询出来一层一层进行判断，最后将数据进行移除即可，比新增和修改都要简单的多。
在这里插入图片描述
回到视图这边，再点击删除按钮时给用户一个提示，确认要删除码？，（这个操作是以防用户不小心删错数据给的提示）通过getJSON方法进行提交，路径，回调函数,再给个提示，删除的操作就完成了

	//1.2删除学院数据
  function saveDelete(AcademeID) {
    layer.confirm("确认删除吗？", { icon: 3, title: '提示', offset: '150px' }, function (index) {
            layer.close(index);
            $.getJSON("DeleteAcamede?AcademeID=" + AcademeID, function (msg) {
                if (msg.State) {
                    layer.alert(msg.Text, { icon: 1, offset: '150px' });//弹出提示框
                    tabAcademe.reload();
                } else {
                    layer.alert(msg.Text, { icon: 5, offset: '150px' });//弹出提示框
                }   });  });   }

以上就是全部内容