共用模态窗体

开发工具与关键技术：VS+模态框共用
作者： 李伙
撰写时间： 2019年6月15日

在学习MVC过程中，在新增数据和修改数据时都是会用到模态框的，新增数据和修改数据的模态框都是一样的，而如果新增数据和修改数据各用一个模态框的话就会增加我们的代码量，所以我们可以让新增数据和修改数据共用同一个模态窗体，这会使我们的代码量大大减少。接下来先看看模态框的代码：

如上图所示：就是一个简单的模态框，新增数据和修改数据可以共用同一个模态框。在form标签里写需要新增或修改的字段，因为我们是用form表单提交新增数据或修改数据的，所以一定要在form表单里添加数据。可以看出这里是用form表单的“action”来提交数据的。由图可以看出，我们在form表单里加了一个input标签的隐藏域，隐藏域在页面中对于用户是不可见的，发送表单的时候，隐藏域的信息也被一起发送到服务器。这里的隐藏域一定要记得加，不然在修改数据后点保存会报错的，这里的隐藏域是新增或修改付款方式的付款方式ID。然后就是在form表单中写需要新增数据或修改数据的字段，比如这里新增或修改付款方式。

如上图所示：是新增数据和修改数据对应的按钮，这里用button按钮，然后就是点击事件。

如上图所示：给增加按钮添加一个点击事件，再在里面写代码，首先是重置form表单，重置form表单是为了避免上次新增的数据残留在form表单中。然后设置模态框标题，因为新增数据和修改数据是共用同一个模态窗体的，所以要把相应的模态框标题更改，这里新增数据则让其模态框标题为新增付款方式。然后就是设置表单的action，这里用prop请求，第一个参数是action，第二个参数是新增数据的路径。然后就是弹出模态框。

如上图所示：给修改按钮添加一个点击事件，再在里面写代码，因为修改数据要先获取到要进行修改的数据，所以第一步是获取选中行，然后是判断是否只选择一条数据，因为修改数据不可能是多条数据一起修改的，所以要判断判断是否只选择一条数据，然后也是重置表单，设置模态框标题，设置表单的action，弹出模态框等等，跟新增数据是一样的，只是多了一步回填表单数据，这里使用post请求回填表单数据。

如上图所示：新增数据和修改数据后就是要保存到数据库中了，上图就是为模态框中保存按钮写的一个点击事件，首先是获取页面数据，然后判断数据是否为空，为空就提醒用户请填写完整。这里是用ajaxSubmit()提交表单数据，新增或修改的数据保存成功后就刷新表格，然后关闭模态框。
新增成功或修改成功后会有以下提示来提示用户是否新增成功或修改成功