因为每次给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>> wheres = new List>>();
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>> wheres = new List>>();这个东西来添加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;
}

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

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

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

@*分部视图（添加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  所以会刷新整个页面

两个分部视图的代码如下

姓名

年龄

性别

男 女

班级

姓名

年龄

性别

男 女

班级