新增

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs与mvc
作者：陈锦通
撰写时间：2019年5月1日星期三
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

点击新增按钮，会弹出一个提示框，要弹出提示框就要有提示框的样式，并且提示框是隐藏起来的。只有点击新增按钮才会出来。

<button class="btn btn-outline-success pl-4" id="insert">新增</button>
<!--新增模态框-->
<div class="modal fade" id="modalInsertAcademe">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        新增学院
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="formInsetAcademe" class="form-horizontal" action="~/ABC/fhgnurrur" method="post">
                            <!--重置表单-->
                            <input type="reset" hidden />
                            <div class="form-group form-row">
                                <label class="col-form-label col-3" for="IAcademeName">学院名称：</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" name="AcademeName" id="IAcademeName" />
                                </div>
                            </div>
                            <div class="form-group form-row">
                                <label class="col-form-label col-3" for="IAcademeCode">学院代号：</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" name="AcademeCode" id="IAcademeCode" />
                                </div>
                            </div>
                            <div class="form-group form-row justify-content-center">
                                <div class="col-4">
                                    <button type="submit" class="btn btn-outline-success mr-3" onclick="savaInsert()">保存</button>
                                    <button type="button" class="btn btn-outline-secondary " data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

只有点击新增按钮时才会出现模态框。

 <script src="~/Plugins/jquery-3.2.1.min.js"></script>
 $("#insert").click(function () {
                alert(123);//检查是否是绑定成功
            });

效果如下图:

这样就证明你的点击事件绑定成功。

$("#insert").click(function () {
                //alert(123);//检查是否是绑定成功
                $("#formInsetAcademe input[type='reset']").click();
                $("#modalInsertAcademe").modal();
            });

这个modal是bootstrap.js里面的方法所以要引用bootstrap的js。

来看看模态框里面的代码有一个form表单，<form id="formInsetAcademe" class ="form-horizontal" action="" method="pose">提交的地址是在控制器那里写的，下面我在表单里面填了数据之后

然后点击保存以后，我在控制器那里断了个点，

输出的结果是

这说明了我们是form表单提交成功，数据绑定成功。下面是获取页面那里传过来的值

var AcademeName = form["AcademeName"];
var AcademeCode = form["AcademeCode"];

测试一下他们是下面新增按钮传过来的数据，

然后返回在页面的表格里面。

因为没有写判断，所以他们的数据是重复的。
下面是判断页面数据是否填写完整，

代码如下

 public ActionResult fhgnurrur(FormCollection form)
        {
            var AcademeName = form["AcademeName"];
            var AcademeCode = form["AcademeCode"];
            if (!string.IsNullOrEmpty(AcademeName) && !string.IsNullOrEmpty(AcademeCode))
            {
                SYS_Academe mod = new SYS_Academe();
                mod.AcademeName = AcademeName;
                mod.AcademeCode = AcademeCode;

                myModel.SYS_Academe.Add(mod);
                myModel.SaveChanges();//保存到数据库
                return Json("", JsonRequestBehavior.AllowGet);

            }
            else
            {
                //新增的核心是先实例化一个对象，然后添加进去，再保存
                return Json("数据不完整", JsonRequestBehavior.AllowGet);
            }
        }

然后在新增的方法里面判断，页面数据是否填写完整。代码如下：

function savaInsert()
 {
                var AcademeName = $("#IAcademeName").val();
                var AcademeCode = $("#IAcademeCode").val();
                if (AcademeName != "" && AcademeCode!="")
                {
                } else {
                    layer.alert("数据填写不完整");
                }
            }

效果如下：

 function savaInsert()
            {
                var AcademeName = $("#IAcademeName").val();
                var AcademeCode = $("#IAcademeCode").val();
                //提交表单时判断数据是否为空
                if (AcademeName != "" && AcademeCode!="")
                {
                    $.post("/ABC/fhgnurrur",
                    { AcademeName: AcademeName, AcademeCode: AcademeCode },
                    function (data) {
                        if (data.State == true) {
                            TabAcademe.reload();
                            layer.alert(data.Text, { icon: 3, offset: '100px' })
                        } else {
                            layer.alert(data.Text, { icon: 3, offset: '100px' })
                        }
                        $("#modalInsertAcademe").modal('hide');
                    });
                } else {
                    layer.alert("数据填写不完整");
                }
            }

这样新增就完成了。