弹出修改模态框

开发工具与关键技术：Visual Studio 2015
作者：杨镇虹
撰写时间：2019.04.20

一、 html设置的一个按钮button布局 图1
1、给这个按钮一个onclick点击事件，里面给一个元素openUpdateModal就是用来修改模态框打开的这个按钮点击到这个元素

图1
2、首选拿到这个按钮给的点击事件的这个元素openUpdateModal(open)打开(Update)修改(Modal)模态框 先function 再放上面这个按钮给的这个元素openUpdateModal也就是一个函数名称，再放一个小括号用来存放参数，如果有用到的参数就放进去如果没有就不用放,我这里有用到一个员工参数(employeeID),再给一个大括号 function openUpdateModal(employeeID){}
3、在这个大括号里面用来写它的操作方法事件，resetForm匹配要重置表单的内容，根据html的布局表单给的id的元素(formInsertEmployee)form表单Insert新增Employee员工 然后再给这个新增表单formInsertEmployee新增到数据库的每一条你要点击到修改的内容，重置reset表单Form内容 $("#formInsertEmployee").resetForm();

图2
4、下拉框分别有两个下拉框，一个是部门下拉框，另一个是职位下拉框，首先拿到部门下拉框给的id元素$(“#UsDepartment”)点击到部门下拉框的数据改变change事件，然后再function()再给一个花括号{}在这个花括号里面写它的操作事件 先获取var选中的部门下拉框等于到部门ID(departmentId)用来绑定职位下拉框使用的，然后点击部门下拉框的数据就会触发改变职位下拉框的数据绑定 用这个方法createSelect来绑定职位下拉框先给一个小括号里面的这个是"UsPosition",一个html给的一个职位下拉框的id元素，后面的是控制器给的路径selectPosition再用一个问号接收部门ID(DepartmentID)参数等于，再用一个加号加上上面获取到选中的部门ID(departmentId) 代码块图3

图3
5、然后查询员工信息，回填数据 用这个来通过远程请求载入信息$.post() 这个是查询到员工信息的控制器的路径"selectEmployeeById", 前面的是控制器传过来的参数员工ID,后面的也是一个员工ID{ EmployeeID: employeeID },然后再function 用stuData传递控制器的回填数据过来 使用这个方法createSelect把部门下拉框绑定数据与及回填数据 同样前面的是html的根据id给的一个部门ID元素，然后中间这个是控制器查询到部门绑定的路径，stuData数据部门ID参数DepartmentID
createSelect(“UsDepartment”, “selectDepartment”, stuData.DepartmentID);
使用这个方法createSelect来绑定根据html给的id元素，后面的是绑定职位下拉框的路径与及触发到部门下拉框数据，改变职位下框事件把数据回填回去
createSelect(“UsPosition”, “selectPosition?DepartmentID=” + stuData.DepartmentID, stuData.PositionID);
这个是一个插件loadDatatoForm的方法，把这个表单formUpdateExaminee的控制器的数据全部回填回来stuData
loadDatatoForm(“formUpdateExaminee”, stuData);

图4
6、修改模态框首先要给它先弹出要修改的模态框，就要去到html布局里面拿到要修改到的这个模态窗体给的id里面的元素属性值(modUpdateEmployee)mod模态框Update修改Employee员工

图5

4、拿到这个模态框id元素modUpdateEmployee，给它写弹出模态框,用一个$钱符号再用一个小括号()里面放一个””双引号，在双引号里面放一个#号选择到根据html布局给的id的元素，然后弹出(“show”)显示隐藏的modal模态窗体 实现代码块图6

图6