页面的新增

红太狼 2022-02-03 04:31 279阅读 0赞

今天，我们来讲下，如何在页面上新增一条数据到数据库中，以上次的练习题为例子开头给出的最初样式如图一  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]  
首先我们当然是要渲染表格，方法有三种，我之前都一一讲过了，这里我们用第一种，方法渲染，渲染出来后的效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]  
这个时候没有数据是因为控制器里面还没有写相应的查询代码，所以接下里我们的任务就是去控制器里面写上想要的查询代码。

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);
            }

在控制器下写下以上代码，命名直接随意，查询出数据库中的数据，这样数据就能显示在页面上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 2]  
因为我们要新增，所以我们有个新增的按钮，给其设置点击事件，和一个模态窗体，当点击新增按钮时，新增模态的窗体就弹出，然后再进行下一步行动，代码如下

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

insert是新增按钮的id，modlaEmployee是模态窗体的id，重置表单是因为若不重置，再次点开会是上次输入的内容。这样我们的模态窗体就弹出来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 3]  
然后我们在控制器写下以下代码

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);
    
            }

在视图写下以下代码

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]: /images/20220203/86531fbdcab646288251856c4706e31e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]: /images/20220203/6d647650286a4494966ff23594d154e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 2]: /images/20220203/8b3025b6c1f34ad8a61c711863fa2933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 3]: /images/20220203/34412e13b28842098340a3a3c1dccbc6.png