共用模态框--新增、修改

                                                               共用模态框--新增、修改

共用模态框？什么是共用模态框呢？公用顾名思义公共使用，大家都可以共同使用。这里指的是新增和修改共同使用一个模态框，开始做这个练习的时候感觉这练习会很难，但当我看了那些要求后，有点恍然大悟这个练习不是和之前已经做过的练习一样的吗，而且这要求比做过的那个练习的要求还要少，查询也不用做下拉框也都没有，数据库只有一个表，就是纯纯的单表的新增、修改、删除，感觉这个新增修改比做过那个的练习简单很多，在新增上不用新增用户表和用户明细表，不用做那一层层的判断，同时要新增三个表。但是这里没有用户表和用户类型名表也不用新增这两个表，同样修改也这样不用修改完这张表又要修改那张表，同时要修改多张表才行，要不然会导致数据不完整或修改不了出错那样子，单表的在代码上起码少了判断也没那么多，在思路上也都明确很多，没有多表的那么繁杂。不知大家做这个练习的时候有没有什么迷惑呢？大家有没有疑惑我就不知道了，方正我就觉得有点迷惑，把项目打开点击页面一看，老师把页面也都搭建好，页面也不用自己搭建了。学以致用，于是我带迷惑着这个往下做，不管三七二十一动手再说，光静想是不行的，你不做是不知道是什么的。

   按着之前那个有点相仿的项目的思路来做，首先就是表格初始出来，把数据也查出来，表格初始化完成了，下一步就是新增了，把新增代写好了，数据也可以新增。新增功能也算完成了，做到修改的时候问题就来了，是什么问题呢？就是在新增的时候我已经吧这个action里设置了新增的方法了

<form id="formEmployee" class="form-horizontal" action="" method="post">

如果改成修改的的方法，那新增功能就不行了，改成新增方法修改的功能就不行了，也不能同时设置两个，这时候很纠结这也不是那也不是，因为只有一个模态框他们是共用的，不同那个项目新增的模态框和和修改那个模态框是分开的，各自有各自的模态框。又认真看了一下html代码哪里想了一下，思路应该不是按之前那样的，因为他们共用的。

   我们该这样设置表单action

//打开新增模态框

        $("#insertEmployee").click(function () {

            //重置表单

            $("#formEmployee")[0].reset();

            //设置表单标题

            $("#modalEmployeeTitle").text("新增员工信息");

            //设置表单action

            $("#formEmployee").prop("action", "/Main/InserEmployee");

            //弹出模态框

            $("#modalEmployee").modal({ backdrop: 'static', keyboard: false });

        });

 

        //打开修改模态框

        function updateemployee(employeeID) {

            //重置表单

            $("#formEmployee")[0].reset();

            //设置表单标题

            $("#modalEmployeeTitle").text("修改员工信息");

            //设置表单action

            $("#formEmployee").prop("action", "/Main/UpdateEmployee");

            //回填表单

            $.post("/Main/SelectEmployeeById",

                { employeeID: employeeID }, function (jsonData) {

                    loadDatatoForm("formEmployee", jsonData);

                }, 'json');

            //弹出模态框

            $("#modalEmployee").modal({ backdrop: 'static', keyboard: false });

        }

打开新增的方式不是直接调用方法了，而是给按钮给一个id然后写点击事件打开模态框。同样老方法新增和修改前我们都重置一下表单，这里们还要设置一下表单的标题，如果在html设置那么新增和修改的表单标题就一样了，回填表单用到的jquery封装的一个方法，loadDatatoForm（）根据from表单的id直接把表单的内容回填了，就不用用每个字段的id一个个地去回填,使用这个方法的时候，要把这个插件引入到你的项目中才能使用，如果没有引用到你项目中是使用不了的

<script src="~/Plugins/jquery.form.min.js"></script>