新增数据
我应用了layui框架来渲染表格和其它一些样式的应用,layui框架的官网https://www.layui.com/doc/
新增一条数据的过程:
- 输入新增的数据,
- 把数据传递到控制器 ,
- 经过控制器处理后把数据储存到数据库
- 最后在视图上显示。
过程大概就是这样,看起来简单,代码却不少。
(一) 输入新增的数据
给新增按钮绑定点击事件,重置表单(清空上一次填写的数据),弹出模态窗体,在模态窗体form表单中输入新增的数据
//1.1新增按钮点击事件
$("#insert").click(function (){
$("#formEmployee input[type='reset']").click();//重置表单
$("#modalEmployee").modal();//弹出模态窗体
});
如果不重置表单上一次填写的数据会遗留在模态窗体中:在模态窗体的form表单里写一个隐藏的重置表单的input标签,然后在方法中调用。
<!--重置表单 type="reset"-->
<input type="reset" hidden />
(二) 把数据传递到控制器
获取输入的数据,判断输入的数据是否有空的值,有就弹出提示框提示没输入完整,没有就可以通过post、get或getJson方法把新增数据传递到控制器
function savaInsert() {//保存按钮的事件
var Name = $("#employeeName").val();//获取新增的员工姓名
var Num= $("#employeeNum").val();//获取新增的员工部门
var Phone = $("#telphone").val();//获取新增的联系电话
var Address = $("#address").val();//获取新增的家庭地址
if(Name != "" && Num != ""&& Phone != ""&& Address != "") { //判断输入的数据是否为空
$.get("/Main/InsertEmployee",//控制器方法的路径
{ employeeName: Name,employeeNum: Num, telphone: Phone, address: Address},
//{控制器接收的参数(参数名要以控制器接收的参数名一致):视图传递的参数(获取数据的时候自定义的参数名)}
function(data) {
if(data.State == true) {
layer.alert(data.Text); //控制器返回的提示
$("#modalEmployee").modal('hide');//关闭窗体
tabEmployee.reload();//刷新表格
} else {
layer.alert(data.Text); //控制器返回的提示
}
});
} else {
layer.alert("请输入完整!");
}
}//get方法的写法:get(“控制器方法的名称”,{控制器接收的参数:视图传递的参数},function(){});
(三)经过控制器处理后把数据储存到数据库
定义参数接收从视图传递过来的数据,再判断传递过来的数据是否为空
public ActionResult InsertEmployee(string employeeName,string employeeNum,string telphone,string Address) { (新增的数据要传递到控制器处理,怎么传?
在这里用的是通过get方法提交数据,控制器的方法也要定义形参来接收数据,
要不然单靠的get方法传参,但传到控制器却没地方接收那就没意义了,
就比如朋友说今天要来你家住,但你没有给朋友准备地方,
那朋友来了之后要去哪里住?
ReturnJson msg = new ReturnJson();//实例化
PW_Employee modEmployee= new PW_Employee();
//实例化员工的模型实体(为什么有这一步操作?
在MVC,M是模型(Model),V是视图(View),C是控制器(Controller),
这一步操作就是关于模型的,PW_Employee是数据库的员工表,
我们在最开始搭建项目的时候它是以一个模型存在我们的项目里面的,模型是给你看的也就是虚的,
所以在我们在项目里面我们不能直接用,我们要用就要通过某种方法把它变成实的然后拿来用,
modEmployee是实例化自定义的名称)
if( !string.IsNullOrEmpty(employeeName)
&& !string.IsNullOrEmpty(employeeNum)
&& !string.IsNullOrEmpty(telphone)
&& !string.IsNullOrEmpty(Address)) //判断传递过来的参数是否为空
{
modEmployee.employeeName = employeeName; //给实例化的模型赋值
//模型modEmployee的employeeName等于视图传过来的employeeName
modEmployee.employeeNum =employeeNum;
modEmployee.telphone =telphone;
modEmployee.address = Address;
myModel.PW_Employee.Add(modEmployee); //将赋值完的模型数据添加到员工表里面,
//等于存储到了数据库,myModel也是实例化自定义的名称
//add()将元素添加到匹配元素集合中
if(myModel.SaveChanges()>0) //myModel.SaveChanges保存的数据
{
msg.State = true;
msg.Text = "员工新增成功";
}
else
{
msg.State = false;
msg.Text = "年级信息新增失败!";
}
}
else
{
msg.State = false;
msg.Text = "不能为空!";
}
return Json(msg, JsonRequestBehavior.AllowGet);
}
//代码结构看起来有点乱,加了太多注释了,要慢慢地看