文献种类：专题技术文献；
开发工具与关键技术：Visual Studio 2015 新增和修改共用模态框的方法
作者： ；年级： ；撰写时间： 年 月 日
文献编号： ；归档时间： 年 月 日
模态框共用
开发工具与关键技术：Visual
Studio 2015 新增和修改共用模态框的方法
作者：廖茂
撰写时间：2019年04月27日
注：本次操作使用layui插件。
无论是新增还是修改，都有一个必要的步骤，那就是弹出模态框，一般情况下，新增和修改各有各的模态框，一般我们也是这样做，其实可以想一下，正常来说，新增的内容和修改的内容都是一样的,当然也有不一样的，现在着重讲一样的，既然新增的内容和修改的内容都是一样的，那么模态框的样式也是一样的，这样我们可以让新增和修改共用一个模态框，要共用模态框的话，那么编写的代码就有些不一样了。现在开始进入代码的编写：
新增和修改公用一个id为“modalEmployee”的模态框，模态框样式为：
接下来开始编写弹出新增模态框的代码：
先是重置表单，即清空模态框里面的输入框，确保再次打开模态框时输入框不会残留上一次打开模态框时输入的内容，然后打开模态框，最后再设置一下表单的action，路径请求的方法是控制器那边新增的方法，因为后面保存新增要用ajax方法请求数据，弹出新增模态框的方法写完了，接下来编写弹出修改模态框的方法：
前面这一部分和弹出新增模态框的操作一样，先清空表单，然后大开模态框，最后设置一下action，路径请求的方法是控制器那边新增的方法，后面保存修改一样要用到ajax方法请求数据，现在弹出修改模态框的方法还没写完，弹出修改模态框不只是弹出模态框就行了，因为要修改数据，需要有修改前的数据让我们修改，所以还要把需要修改的数据回填到表单中，代码如下：
用post方法来请求需要回填的数据，路径请求的方法是控制器那边查询回填数据的方法，employeeID：employeeId 是把参数传到控制器，然后就是根据输入框的ID把对应的数据回填。
这样弹出新增和修改模态框的方法就写完了，接下来就到保存新增和保存修改了。既然已经共用模态框了，那么保存的方法也一样共用，接下来开始编写保存方法：
先给保存按钮添加点击事件，然后声明变量存放根据输入框的ID获取到的表单值
获取到表单值后，判断一下变量是否为空字符串，如果不是空字符串，就打开加载层，否则返回“请填写完整”的提示
打开加载层后，再用ajax方法请求数据给id为“formEmployee”的表单（请求路径已在上面的弹出模态框的方法里），然后关闭加载层，再判断一下，如果控制器那边数据保存成功，就刷新表格，最后关闭模态框。
新增和修改共用模态框，让新增和修改的保存方法也可以共用，要实现保存新增和保存修改的方法共用，只需要在编写保存方法时确保新增和修改请求数据的路径不一样就可以了。