页面的新增

今天，我们来讲下，如何在页面上新增一条数据到数据库中，以上次的练习题为例子开头给出的最初样式如图一

首先我们当然是要渲染表格，方法有三种，我之前都一一讲过了，这里我们用第一种，方法渲染，渲染出来后的效果如图

这个时候没有数据是因为控制器里面还没有写相应的查询代码，所以接下里我们的任务就是去控制器里面写上想要的查询代码。

public ActionResult SelectAcamede(LayuiTablePage layuiTablePage)
        {
            var listAcamede = myModel.PW_Employee.ToList();

            int totals = listAcamede.Count();

            listAcamede = listAcamede.OrderByDescending(m => m.employeeID)
                .Skip(layuiTablePage.GetStartIndex())
                .Take(layuiTablePage.limit).ToList();

            LayuiTableData<PW_Employee> layuiTable = new LayuiTableData<PW_Employee>();
            layuiTable.data = listAcamede;
            layuiTable.count = totals;
            return Json(layuiTable, JsonRequestBehavior.AllowGet);
        }
        

在控制器下写下以上代码，命名直接随意，查询出数据库中的数据，这样数据就能显示在页面上

因为我们要新增，所以我们有个新增的按钮，给其设置点击事件，和一个模态窗体，当点击新增按钮时，新增模态的窗体就弹出，然后再进行下一步行动，代码如下

$("#insert").click(function () {
            $("#formEmployee input[type='reset']").click();//重置表单
            $("#modalEmployee").modal();
        });

insert是新增按钮的id，modlaEmployee是模态窗体的id，重置表单是因为若不重置，再次点开会是上次输入的内容。这样我们的模态窗体就弹出来了

然后我们在控制器写下以下代码

public ActionResult InsertAcamede(string employeeNum, string employeeName, string telphone, string address)
        {
            ReturnJson msg = new ReturnJson();
            if (!string.IsNullOrEmpty(employeeNum) && !string.IsNullOrEmpty(employeeName)&&
                !string.IsNullOrEmpty(telphone) && !string.IsNullOrEmpty(address))
            {
                PW_Employee modAcademe = new PW_Employee(); //
                modAcademe.employeeNum = employeeNum;
                modAcademe.employeeName = employeeName;
                modAcademe.telphone = telphone;
                modAcademe.address = address;
                myModel.PW_Employee.Add(modAcademe);
                myModel.SaveChanges();
                msg.State = true;
                msg.Text = "新增成功";
            }
            else
            {
                msg.State = false;
                msg.Text = "数据不能为空";
            }
            return Json(msg, JsonRequestBehavior.AllowGet);

        }

在视图写下以下代码

function savaInsert() {
            var Num = $("#employeeNum").val();
            var Name = $("#employeeName").val();
            var telphone = $("#telphone").val();
            var address = $("#address").val();
            if (Num != "" && Name != "" && telphone != "" && address != "") {
                $.get("/Main/InsertAcamede",
                { employeeNum: Num, employeeName: Name, telphone: telphone, address: address },
                function (data) {//键值对
                    if (data.State == true) {
                        layer.alert(data.Text);
                        $("#modalEmployee").modal('hide');
                        employee.reload();
                    } else {
                        layer.alert(data.Text);
                    }
                });
            } else {
                layer.alert("请将数据输入完整！");
            }
        }

在视图调用了控制器的方法，这样，新增就成功了