使用webapi绑定layui数据表格完整增删查改记录

因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正

以下是一个完整的数据表格i项目的增删改查案例

先来看后台

LayuiContext db = new LayuiContext();
Result res = null;

#region 分页查询/查询参数为姓名/性别/班级 利用if添加判断条件
[HttpGet]
public IHttpActionResult StudentList2(int page, int limit, string stuName, int? sex, int? classId)
{
var list = from s in db.Studnt
where s.Status == 1
join c in db.Classes on s.ClassId equals c.Id
where c.Status == 1
select new { s.Id, s.Name, s.Sex,s.Age, s.ClassId, s.CreateDate, className = c.Name };
if (!string.IsNullOrEmpty(stuName))
{
list = list.Where(x=>x.Name.Contains(stuName));
}
if (sex != null)
{
list = list.Where(x => x.Sex == sex);
}
if (classId != null)
{
list = list.Where(x => x.ClassId == classId);
}
var total = list.Count();
list = list.OrderByDescending(x => x.Id).Skip((page - 1) * limit).Take(limit);

ArrayList arrayList = new ArrayList();
foreach (var item in list)
{

arrayList.Add(new { item.Id, item.Name, item.Age, Sex = item.Sex == 1 ? "男" : "女", SexType = item.Sex, item.ClassId, CreateDate = item.CreateDate.ToString("yyyy-MM-dd"), item.className });
}

return Json(new { code = 0, msg = "", count = total, data = arrayList });
}
#endregion

#region 分页查询/查询参数为姓名/性别/班级 利用expression添加判断条件
[HttpGet]
public IHttpActionResult StudentList(int page, int limit, string stuName, int? sex, int? classId)
{
List<Expression<Func<StudentModel, bool>>> wheres = new List<Expression<Func<StudentModel, bool>>>();
if (!string.IsNullOrEmpty(stuName))
{
wheres.Add(x => x.Name.Contains(stuName));
}
if (sex != null)
{
wheres.Add(x => x.Sex == sex);
}
if (classId != null)
{
wheres.Add(x => x.ClassId == classId);
}
var list = from s in db.Studnt
where s.Status == 1
join c in db.Classes on s.ClassId equals c.Id
where c.Status == 1
select new StudentModel() { Id=s.Id,Name=s.Name,Sex=s.Sex,Age=s.Age,ClassId=s.ClassId,CreateDate=s.CreateDate, className=c.Name};
if (wheres.Count > 0)
{
foreach (var item in wheres)
{
list = list.Where(item);
}
}
var total = list.Count();
list = list.OrderByDescending(x => x.Id).Skip((page - 1) * limit).Take(limit);

ArrayList arrayList = new ArrayList();
foreach (var item in list)
{

arrayList.Add(new { item.Id, item.Name, item.Age, Sex = item.Sex == 1 ? "男" : "女", SexType = item.Sex, item.ClassId, CreateDate = item.CreateDate.ToString("yyyy-MM-dd"), item.className });
}

return Json(new { code = 0, msg = "", count = total, data = arrayList });
}
#endregion

#region 删除学生
[HttpGet]
public IHttpActionResult DeleteStu(int id)
{
try
{
if (id <= 0)
{
throw new Exception("id不正确");
}
var stu = db.Studnt.Find(id);
stu.Status = 5;
db.SaveChanges();
res = new Result { code = 200, msg = "学生删除成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 修改学生第一种方法 字段一个一个传入
[HttpPost]
public IHttpActionResult UpdateStu1(int id, string name, byte age, int classId, byte sex)
{
try
{
if (id <= 0)
{
throw new Exception("id不正确");
}
var stu = db.Studnt.Find(id);
stu.Name = name;
stu.Age = age;
stu.ClassId = classId;
stu.Sex = sex;
db.SaveChanges();
res = new Result { code = 200, msg = "学生修改成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 修改学生第二种方法 直接传入学生实体
[HttpPost]
public IHttpActionResult UpdateStu(Student model)
{
try
{
if (model.Id <= 0)
{
throw new Exception("传入实体的id有误");
}
var stu = db.Studnt.Find(model.Id);
stu.Name = model.Name;
stu.Age = model.Age;
stu.ClassId = model.ClassId;
stu.Sex = model.Sex;
db.SaveChanges();
res = new Result { code = 200, msg = "学生修改成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 新增学生
[HttpPost]
public IHttpActionResult AddStu(Student model)
{
try
{
model.Status = 1;
model.Sort = 2;
model.CreateDate = DateTime.Now;
db.Studnt.Add(model);
db.SaveChanges();
res = new Result { code = 200, msg = "学生新增成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 返回班级id和名称
[HttpGet]
public IHttpActionResult ClassList()
{
var query = from c in db.Classes
select new DropTemplate { id = c.Id, name = c.Name };
return Ok(query);
}
#endregion

这是整个后台的代码  

　　这其中StudentList2方法 就是查询接口 layui的table.render方法或调用这个接口来给表格绑定数据  后面string stuName, int? sex, int? classId 这三个参数是查询时用到的参数 。

StudentList 也是一个查询接口 这里做两个接口的原因是StudentList2使用的是if判断后直接在list上添加where条件 而在StudentList中时使用了 List<Expression<Func<StudentModel, bool>>> wheres = new List<Expression<Func<StudentModel, bool>>>();这个东西来添加where条件实现的思路相同但是方法不同。这里记录一下将来也许会用到这个模式。这里要注意的是 如果使用Expression 那么这里的类型必须要和返回的list类型相同 因为学生关联了班级 所以这里需要新加一个和数据库无关的实体类  最后表连接查询得到的数据也应该构造称为新类型StudentModel。

　　DeleteStu是删除接口，传入一个id值。我在数据库中用status=5代表数据为删除项。所以这里其实是执行update。不过这里虽然update成功了。

但是

var stu = db.Studnt.Find(id);
stu.Status = 5;
db.SaveChanges();

在我的记忆中 ef是有update方法的啊 我这里根本没有用就给更新成功了 我也不懂为什么。

　　接下来是UpdateStu和AddStu 修改和新增 传入的是model实体，实现相应功能 很简单没什么要记录的

　　接下来是ClassList接口 这个接口是为了给班级下拉框返回数据用的 这里我定义了一个模型类DropTemplate  代码如下：

　　

[HttpGet]
public IHttpActionResult ClassList()
{
var query = from c in db.Classes
select new DropTemplate { id = c.Id, name = c.Name };
return Ok(query);
}

这样做的目的是统一所有的下拉框的接口返回都为select new { id = c.Id, name = c.Name } 这样的类型 前台就可以直接封装方法给下拉框绑定数据。到这里我突然发现模型类DropTemplate并没有什么用直接返回匿名类型就可以 只要匿名类组成一致就行 没必要新建类。但理论上为了统一标准 防止忘记 写上也没什么关系

　　至此，后台接口已经介绍完毕 下面来看一下 前台的页面

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/layui/layui.js"></script>
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<style>
#main .table, #search {
padding: 20px;
}

/*设置下拉框的背景颜色为蓝色*/

.layui-form-select dl dd.layui-this {
background-color: #1E9FFF;
}

/*防止下拉框弹层被遮住*/
.layui-layer-page .layui-layer-content {
position: relative;
overflow: visible !important;
}
</style>
</head>
<body>
<div id="search">
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" id="btnAdd">新增</button>
</div>
</div>
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input name="name" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<select name="sex">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>

</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select name="className" id="stuClassName">
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal" id="btnSearch">查询</button>
<button id="btnReset" type="reset" class="layui-btn layui-btn-normal">重置</button>
</div>
</div>
</form>
</div>

<div id="main" style="margin:0 auto;">
<div class="table">
<table id="stuTable" lay-filter="test"></table>
</div>
</div>

@*分部视图（添加div）*@
@Html.Partial("/Views/Home/Add.cshtml")

@*分部视图（编辑div）*@
@Html.Partial("/Views/Home/Edit.cshtml")

<script type="text/html" id="barDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="update">编辑</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">删除</button>
</div>
</script>

<script>
layui.use(['table', 'form'], function () {
var table = layui.table, form = layui.form;
//获取表格数据的接口
var tableurl = "/api/HomeApi/StudentList";
//添加数据接口
var addurl = "/api/HomeApi/AddStu";
//删除数据接口
var deleteurl = "/api/HomeApi/DeleteStu";
//修改数据接口
var editurl = "/api/HomeApi/UpdateStu";

//表格数据初始绑定
table.render({
elem: '#stuTable'
, url: tableurl
, where: { stuName: '', sex: '', classId: '' }
, page: { theme: '#1E9FFF' }
, cols: [[
{ field: 'Id', align: 'center', title: '编号' },
{ field: 'Name', align: 'center', title: '姓名' },
{ field: 'Age', align: 'center', title: '年龄' },
{ field: 'Sex', align: 'center', title: '性别' },
{ field: 'className', align: 'center', title: '班级' },
{ field: 'CreateDate', align: 'center', title: '创建日期' },
{ title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo' }
]]
});

//表格工具条事件
table.on('tool(test)', function (obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

if (layEvent === 'update') { //查看
$("#EditForm input[name='name']").val(data.Name);
$("#EditForm input[name='age']").val(data.Age);
$("#EditForm select[name='sex']").val(data.SexType);
$("#EditForm select[name='className']").val(data.ClassId);
form.render('select');
layer.open({
type: 1,
area: ['860px', '360px'],
content: $('#EditForm'),
btn: ['保存', '取消'],
yes: function (index, layero) {
var Name = $("#EditForm input[name='name']").val();
var Age = $("#EditForm input[name='age']").val();
var Sex = $("#EditForm select[name='sex']").val();
var ClassId = $("#stuEditClassName").val();
if (CheckAddForm(Name, Age, Sex, ClassId)) {
var d = {"Id":data.Id, "Name": Name, "Age": parseInt(Age), "ClassId": parseInt(ClassId), "Sex": parseInt(Sex)};
Save(d, editurl);
} else {
return false;
}
}
});
} else if (layEvent === 'delete') { //删除
layer.confirm('确定删除？', function (index) {
Delete(data.Id);
layer.close(index);
});
}
});

//班级下拉框绑定数据
InitDropList('/api/HomeApi/ClassList', $("select[name='className']"));

//点击查询按钮时表格重载
$("#btnSearch").click(function () {
ShowSearchResult();
});

//点击重置按钮时表格重载
$("#btnReset").click(function () {
var obj = { stuName: "", sex: "", classId: "" };
ReloadTable("stuTable", obj);
});

//点击新增按钮时弹出分部视图
$("#btnAdd").click(function () {
InitAddForm();
layer.open({
type: 1,
area: ['860px', '360px'],
content: $('#addForm'),
btn: ['保存', '取消'],
yes: function () {
var Name = $("#addForm input[name='name']").val();
var Age = $("#addForm input[name='age']").val();
var Sex = $("#addForm select[name='sex']").val();
var ClassId = $("#stuAddClassName").val();
if (CheckAddForm(Name, Age, Sex, ClassId)) {
var data = { "Name": Name, "Age": parseInt(Age), "ClassId": parseInt(ClassId), "Sex": parseInt(Sex), "Status": 1 };
Save(data, addurl);
} else {
return false;
}
}
});
})

/****自定义JS函数*****/

//封装表格重载函数
function ReloadTable(tableId, obj) {
table.reload(tableId, {
url: tableurl
, where: obj
});
}

//初始化layui下拉框函数
function InitDropList(url, obj) {
$.ajax({
url: url,
dataType: 'json',
type: 'get',
success: function (data) {
$.each(data, function (index, item) {
obj.append(new Option(item.name, item.id));// 下拉菜单里添加元素
});
layui.form.render("select");
}
})
}

//添加表单初始化(除去上次添加留下的文本)
function InitAddForm() {
$("#addForm input[name='name']").val("");
$("#addForm input[name='age']").val("");
$("#addForm select[name='sex']").val("");
$("#addForm select[name='className']").val("");
form.render('select');
}

//保存方法（传入实体数据 保存数据 提示操作结果信息）
function Save(model, url) {
$.ajax({
url: url,
contentType: 'application/json',
type: 'post',
data: JSON.stringify(model),
success: function (res) {
if (res.code == 200) {
ShowSearchResult();
layer.closeAll();
layer.msg(res.msg, { icon: 1 });
}
else {
layer.msg("操作失败，请联系管理员！", { icon: 2 });
console.log(res.msg);
}
}
});
}

//根据查询条件显示表格
function ShowSearchResult() {
var name = $("#search input[name='name']").val();
var sex = $("#search select[name='sex']").val();
var classId = $("#stuClassName").val();
var obj = { stuName: name, sex: sex, classId: classId };
ReloadTable("stuTable", obj);
}

//添加表单的格式验证
function CheckAddForm(Name, Age, Sex, ClassId) {
if (Name == "" || Name == null) {
layer.msg("请填写姓名", { icon: 0 });
return false;
}
if (Age == "" || Age == null) {
layer.msg("请填写年龄", { icon: 0 });
return false;
}
if (isNaN(Age)) {
layer.msg("年龄必须为数字", { icon: 0 });
return false;
}
if (Sex == "" || Sex == null) {
layer.msg("请选择性别", { icon: 0 });
return false;
}
if (ClassId == "" || ClassId == null) {
layer.msg("请选择班级", { icon: 0 });
return false;
}
return true;
}

//删除数据
function Delete(id) {
$.ajax({
url: deleteurl,
data: { "id": id },
type: "get",
success: function (data) {
if (data.code == 200) {
layer.msg("删除成功");
ShowSearchResult();
} else {
layer.msg("删除失败，请联系管理员！");
console.log(data.msg);
}

}
});
}

/****自定义JS函数*****/

});
</script>
</body>
</html>

前台页面代码如上  在这里面有两个分部视图 

@*分部视图（添加div）*@
@Html.Partial("/Views/Home/Add.cshtml")

@*分部视图（编辑div）*@
@Html.Partial("/Views/Home/Edit.cshtml")

其实就是添加和修改的div，在这里首先声明好需要用到的所有接口

//获取表格数据的接口
var tableurl = "/api/HomeApi/StudentList";
//添加数据接口
var addurl = "/api/HomeApi/AddStu";
//删除数据接口
var deleteurl = "/api/HomeApi/DeleteStu";
//修改数据接口
var editurl = "/api/HomeApi/UpdateStu";

然后开始layui数据表格的数据绑定

//表格数据初始绑定
table.render({
elem: '#stuTable'
, url: tableurl
, where: { stuName: '', sex: '', classId: '' }
, page: { theme: '#1E9FFF' }
, cols: [[
{ field: 'Id', align: 'center', title: '编号' },
{ field: 'Name', align: 'center', title: '姓名' },
{ field: 'Age', align: 'center', title: '年龄' },
{ field: 'Sex', align: 'center', title: '性别' },
{ field: 'className', align: 'center', title: '班级' },
{ field: 'CreateDate', align: 'center', title: '创建日期' },
{ title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo' }
]]
});

然后开始layui数据表格的数据绑定  这里where是除了limit和page之外的参数 代表当前是不带有条件的  全部显示就行了

这里所有的前台js代码都写得有注释 接下来上传文件到gitee  以后有问题就直接看代码来做 省心很多

这里还有提一个今天遇到的坑  在form里面的button  今天没有加type属性 当我点击他的时候总是会刷新整个页面 这是因为如果type属性没有写，那么默认为submit  所以会刷新整个页面

 两个分部视图的代码如下

<form class="layui-form">
<div id="EditForm" style="display:none; padding:20px;">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input name="name" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input name="age" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<select name="sex">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select name="className" id="stuEditClassName">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
</form>

<form class="layui-form">
<div id="addForm" style="display:none; padding:20px;">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input name="name" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input name="age" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<select name="sex">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select name="className" id="stuAddClassName">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
</form>