新增数据小总结
作者:互联网
新增数据
1. 创建模态框,内置form表单
2. 弹出模态框可以手学一个JS模态框,也可以通过layui插件里面的一个弹出层方法达到弹出模态框的效果,在弹出模态框之前应该先清空一下模态框
3. 创建新增按钮,给新增按钮一个点击事件,点击便弹出模态框
4. 给弹出模态框填入需要新增的数据,点击保存会触发保存按钮的点击事件
5. 在保存点击事件里面通过form表单ID序列化的表单,得到form表单的全部数据,也可以通过ID选择器var x=$(“#id”).val();获取到数据
6. 将得到的数据通过post提交方式传递到控制器中,在post提交方法里面回调函数获取返回的数据判断是否新增成功,关闭弹出层
7. 在控制器中创建一个方法接收视图传过来的数据
8. 将传过来的数据作为条件在数据库中通过单表查询或者联合多张表查询出来数据,需要判断传过来的需要新增的数据在数据库中是否已经存在,如果存在则不再执行新增操作,如果不存在则将数据保存到数据库中。判断保存数据是否成功
9. 返回保存数据是否成功的状态和提示语句会视图。
10. 在视图中的回调函数中接收返回的数据,判断是否保存成功,如果保存成功则刷新表单,弹出提示保存成功,否则弹出提示保存失败或者其他保存失败的提示
11.需要引入四个插件
注:下面代码模板都来自于李老师的授课内容再加上本人的理解抽取出来的
模态框模板:
在这里插入代码片
<div id="#id1" style="display: none;">
<div class="col-12 mt-3">
<form id="#formID " class="form-horizontal">
<!--重置表单-->
<input type="reset" hidden />
<!--隐藏域-->
<input type="text" hidden name=" " />
<div class="form-group form-row">
<label class="col-form-label col-3">需要新增数据的名称</label>
<div class="col-9">
<input type="text" class="form-control" name=" " />
</div>
</div>
<div class="form-group form-row justify-content-center">
<div class="col-4">
<button type="button" class="btn btn-primary" id=" ">保存</button>
<button type="button" class="btn btn-danger" " ">关闭</button>
</div>
</div>
</form>
</div>
</div>
弹出模态框模板:
这个是layui插件里面的一个弹出层方法并不是模态框
$("#insertNoticeType").click(function () {
$('#formID input[type="reset"]').click();//重置表单
//弹出Layer窗体
layerIndex = layer.open({
type: 1,//页面层
area: ["480px", "180px"],
offset: "auto",//默认坐标,即垂直水平居中
title: "模态框名称",
content: $("id1")//form表单最外层ID
});
});
保存按钮的点击事件
$("保存按钮id").click(function () {
//判断数据不为空
if ($('#formid [name=" "]').val() != "") {
//serializeArray()序列化表单:(这里我们没办法决定参数的个数,新增:名称,修改:ID,名称,序列化表单之后完成可以解决这个问题,)
var formData = $("# formid ").serializeArray();
//console.log(formData);
$.post(url, formData, function (msg) {
if (msg.State == true) {
//关闭窗体
layerClose();
//刷新table表单
tabNoticeType = layuiTable.reload('tabNoticeType');
layer.alert(msg.Text);
}
layer.alert(msg.Text);
})
} else {
alyer.alert('请填写完整数据', { icon: 0 });
}
});
关闭弹出层:
function layerClose() {
layer.close(layerIndex);//关闭弹出层
}
新增数据
public ActionResult InsertNoticeType(表 b)
{
//实例化
ReturnJson returnJson = new ReturnJson();
try
{
if (!string.IsNullOrEmpty( 需要判断的数据 ))
{
//查询重复
//根据公告名称查询是否已经存在这个公告名称
int a= (from in
where
select ).Count();
if(a == 0)
{
//新增数据
myModels.表.Add();
//判断是否保存成功
if(myModels.SaveChanges() > 0)
{
returnJson.State = true;
returnJson.Text = "保存成功";
}
}
else
{
returnJson.State = false;
returnJson.Text = "该公告类型已经存在";
}
}
else
{
returnJson.State = false;
returnJson.Text = "数据不完整";
}
}
catch(Exception)
{
returnJson.State = false;
returnJson.Text = "数据异常";
}
return Json(returnJson, JsonRequestBehavior.AllowGet);
}
标签:总结,模态,新增,保存,表单,弹出,returnJson,数据 来源: https://blog.csdn.net/qq_44489422/article/details/88955184