一、form表单
form表单有两个属性:action这是提交的地址,有绝对的和相对两种url,method提交表单的方式,提交的方式有两种get和post,form表单提交默认方式是get与 post相比,get更简单也更快,get提交时参数直接暴露在URL上,所以安全性较低,url受长度限制发送大量数据时也不能使用,post是将表单中的数据放在form的数据体中,按照变量和值对象的方式,传递到所指向的action,post方法刷新页面重复提交可能会产生不良的后果。
form表单会自动提交,如果使用自动提交的话,在新增和修改的时候当数据不完整数据错误的时候,用户就无法得到对应的提示警告,所以这时我们就要手动提交数据,需要写一个方法。同时记得禁用表单的自动提交方法,在form表单设置οnsubmit=“return false;”

下面修改就是用手动提交方式。

二、修改

在修改时需要根据ID来查询需要修改的数据,所以我们要在form表单那里给它一个隐藏域


修改需要根据ID查询出对应的数据才能将它修改

puppeteer实现表单_form表单


自动提交是没有在页面就判断代码的,手动提交表单是为了判断数据和弹出提示,是否更改成功的主要原因。

给保存按钮绑定一个点击事件,然后写一个方法,首先就要获取到表单的内容,判断数据的完整性是否为空,数据都不为空的时候才能提交数据到控制器,这样的键值对AcademeName: AcademeName,前一个要跟控制器的一样,后一个是自定义的上面声明的变量,名称一定要相互对应。后面一个回调函数接收控制器传过来的数据,如果传过来的状态是State那就是成功修改完成关闭模态框并刷新表格。

//保存修改
 function savaUpdate()
 //获取表单值
 var AcademeName = $("#UAcademeName").val();
 var AcademeCode = $("#UAcademeCode").val();
 var AcademeID = $("#UAcademeID").val();
 //判断值
 if (strValIsNotNull(AcademeName) && strValIsNotNull(AcademeCode)) {
 $.post("/SystemManagement/CollegeInfor/UpdateAcademe",
 {
 AcademeName: AcademeName,
 AcademeCode: AcademeCode,
 AcademeID: AcademeID
 }, function (data) {
 //判断是否成功
 if (data.State) {
 //成功
 //关闭模态框
 $("#modalUpdateAcademe").modal(‘hide’);
 //刷新表格
 tabAcademe.reload();
 }
 layer.alert(data.Text);
 }, “json”);
 } else {
 layer.alert(‘请填写完整’, { icon: 0 });
 }
 }

修改在控制器的代码,SYS_Academe是用来接收数据的,sysAcademe是修改的参数,returnJson用来记录修改的状态,查询所有数据,查询条件是学院名称或者学院代号,加tbAcademe.AcademeID != sysAcademe.AcademeID条件,当同时成立时就判断数据是否有冲突,没有冲突的时候outherCount等于0,就是数据没有冲突的,就可以添加新修改的数据到数据库中了

修改的核心代码是myModel.Entry(sysAcademe).State =EntityState.Modified;开启修改状态,还有就是记录修改的数据int intR = myModel.SaveChanges();数据发生改变时intR > 0就是修改成功。记录修改状态的过程是手动提交才能实现的,有了提示框才能提高用户体验

puppeteer实现表单_puppeteer实现表单_02