使用Layui 框架，做的界面效果 及经验教训总结（mvc5+EF+layui）
1. 登录界面
login.css
body, html { height: 100%; } .layui-admin-login-header { padding: 20px; text-align: center; } .layui-admin-login-header h1 { color: #009688; font-family: "Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif"; font-weight: bold; margin-bottom: 10px; } .layui-admin-login-header p { color: white; font-family: "Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif"; font-weight: bold; margin-bottom: 10px; } .layui-admin-login { width: 24%; margin: 0 auto; position: absolute; top: 20%; left: 37%; box-shadow: 0 -15px 30px #0d957a; border-radius: 5px; padding: 2%; z-index: 1000; } .layui-admin-login .layui-footer { color: white; } .layui-admin-login .layui-form-checkbox { margin-left: 0px; } /*chrome浏览器透明有点问题*/ .layui-form label, input { background-color: transparent !important; color: white !important; }
login.cshtml页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
<link href="~/Content/layui-v2.5.6/css/login.css" rel="stylesheet" />
</head>
<body class="layui-layout-body" style="background-color:black">
<div class="layui-fluid" style="padding: 0px;">
<canvas id="particle"></canvas>
<br />
<div class="layui-form layui-form-pane layui-admin-login">
<div class="layui-admin-login-header">
<h1>登陆</h1>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<input required lay-verify="required" name="txtName" class="layui-input" type="text" placeholder="请输入账号" autocomplete="off" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input required lay-verify="required" name="txtPwd" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="loginxxx">
<i class="layui-icon layui-icon-ok-circle"></i>登陆
</button>
</div>
</div>
</div>
</div>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<script>
// 登录 需要做表单提交给后台， 或者数据收集之后提交给后台
layui.use(['layer', 'form','jquery'], function () {
var layer = layui.layer;
var form = layui.form,
$ = layui.jquery;
form.on("submit(loginxxx)", function (obj) {
var user = obj.field;
$.ajax({
type: 'Get',
data: user,
url: '/Student2/CheckLogin',
success: function (result) {
var serverData = result.split(':');
if (serverData[0] == "ok") {
window.location.href = "/Student2/Index";
} else if (serverData[0] == "error") {
layer.msg(serverData[1], { icon: 2 });
}
else {
layer.msg("操作失败", { icon: 2 });
}
}
})
})
})
</script>
</body>
</html>
2. 导航界面
index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
@Model.Name
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="~/Student2/LogOut">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a class="site-active" tab-name="学生列表A" tab-url="/Student2/Student2Tab" tab-layid="11">学生列表A</a></dd>
<dd><a class="site-active" tab-name="学生列表B" tab-url="/Student2/Student2Tab" tab-layid="22">学生列表B</a></dd>
<dd><a class="site-active" tab-name="学生列表C" tab-url="/Student2/Student2Tab" tab-layid="33">学生列表C</a></dd>
<dd><a class="site-active" tab-name="学生列表D" tab-url="/Student2/Student2Tab" tab-layid="44">学生列表D</a></dd>
<dd><a class="site-active" tab-name="学生列表E" tab-url="/Student2/Student2Tab" tab-layid="55">学生列表E</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div layui-body style="padding: 15px;">
<div class="layui-tab" lay-allowClose="true" lay-filter="tabList">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['element','jquery'], function () {
var element = layui.element,
$ = layui.jquery;
//触发事件
var active = {
tabAdd:function (name,url,layid) {
element.tabAdd('tabList', {
title: name //'选项卡的标题'
,content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="'+url+'"></iframe>'//'选项卡的内容' //支持传入html
,id: layid//'选项卡标题的lay-id属性值'
});
},
tabChange:function (layid) {
element.tabChange('tabList', layid);
},
tabDelete:function (layid) {
element.tabDelete('tabList', layid);
}
}
//当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-active').on("click", function () {
var dataid = $(this);
var name = dataid.attr("tab-name");
var url = dataid.attr("tab-url");
var tab_layid = dataid.attr("tab-layid");
//1、 判断tab-layid=layid的tab页是否打开
if ($(".layui-tab-title li[lay-id]").length <= 0) { //1.1 初始状态：1个Tab页也没有打开
active.tabAdd(name, url, tab_layid); //打开tab页
active.tabChange(tab_layid)//转到该tab页
} else { //1.2 判断该Tab页是否已打开
var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == tab_layid) {
isData = true;
}
})
if (isData == false) {
//标志为false 新增一个tab项
active.tabAdd(name, url, tab_layid); //1.2.1 该Tab页未打开，则打开该tab页
}
active.tabChange(tab_layid)//1.2.2 转到该tab页
}
FrameWH(); //计算ifram层的大小
});
function FrameWH() { //计算ifram层的大小
var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
$("iframe").css("height", h + "px");
}
$(window).resize(function () {
FrameWH();
})
});
</script>
</body>
</html>
3. 内容页面
3.1 查询
Student2Tab.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-btn-group">
@*<button type="button" class="layui-btn" id="addBtn">新增学生</button>*@
@*<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>*@
</div>
<div class="demoTable">
搜索学号：
<div class="layui-inline">
<input class="layui-input" name="id" id="id" lay-verify="number" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
<button type="button" class="layui-btn" id="addBtn">新增学生</button>
</div>
<table class="layui-hide" id="test" lay-filter="testFilter"></table>
@*工具栏模板：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
</script>*@
下述是 toolbar 对应的模板，它可以存放在页面的任意位置
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
function showTime(tempDate) {
var date = tempDate.replace(/[^0-9]/ig, "");
var d = new Date(parseInt(date));
var year = d.getFullYear();
var month = d.getMonth(); month++; month = month < 10 ? "0" + month : month;
var day = d.getDate(); day = day < 10 ? "0" + day : day;
var time = year + "-" + month + "-" + day;
return time;
}
layui.use('table', function () {
var table = layui.table,
$ = layui.$;
var tableIns = table.render({
elem: '#test'
, id: 'testReload'
, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, url: '/Student2/Student2List'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, even: true //开启隔行背景
, cols: [[
{ type: 'checkbox' }
, { field: 'Id', width: 80, title: 'Id' }
, { field: 'StuNo', width: 80, title: '学号' }
, { field: 'Name', width: 80, title: '姓名' }
, { field: 'Pwd', width: 80, title: '密码', sort: true }
, { field: 'Sex', title: '性别', width: 80 } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'BrithDate', title: '出生日期', templet: function (d) { return showTime(d.BrithDate) }, width: 180, sort: true }
, { field: 'Address', width: 150, title: '家庭地址', sort: true }
, { fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
]]
,where: { //设定异步数据接口的额外参数，任意设
id:$("#id").val()
//…
}
, page: {
curr: 1 //重新从第 1 页开始
}
});
//监听头工具栏事件
table.on('toolbar(testFilter)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':
layer.msg('添加');
layer.open({
type: 2,
title: "新增用户",
area: ["700px", "450px"],
content: '/Student2/Add',
end: function () {
table.reload("testReload", {});; //刷新单表
}
});
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]：' + checkStatus.data[0].id);
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});
//监听行工具事件
table.on('tool(testFilter)', function (obj) { //注：tool 是工具条事件名，testFilter 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('查看操作');
} else if (layEvent === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);
//向服务端发送删除指令
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
//删除操作
$.ajax({
type: 'Post',
data: {'id':obj.data.Id},
dataType:'json',
url: '/Student2/DeleteStudent2',
success: function (result) {
var serverData = result.split(':');
if (serverData[0] == "ok") {
layer.msg(serverData[1],{icon:1})
table.reload();; //刷新单表
}
else {
lay.msg("操作失败", { icon: 1 })
}
}
})
});
} else if (layEvent === 'edit') {
layer.msg('编辑操作');
var userId = obj.data.Id
layer.open({
type: 2,
title: "编辑用户",
area: ["700px", "450px"],
content: '/Student2/Edit' + "?id=" + userId,
end: function () {
$("#searchBtn").click();
//加载层-默认风格
layer.load();
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 500);
}
});
}
});
// 重新刷新当前列表
$("#searchBtn").on("click", function () {
table.reload('testReload', {
where: { //设定异步数据接口的额外参数，任意设
id:$("#id").val()
//…
, method: 'get'
// ,contentType: "application/json;charset=utf-8"
,url: '/Student2/Student2List'
}
});
})
// 新增按钮点击事件
$("#addBtn").on("click", function () {
layer.open({
type: 2,
title: "新增用户",
area: ["700px", "450px"],
content: '/Student2/Add',
end: function () {
$("#searchBtn").click();
}
});
})
});
</script>
</body>
</html>
3.2 新增
Add.cshtml
@{
Layout = null;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
<title>Add</title>
</head>
<body>
<div class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<input type="hidden" name="Id">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">学号</label>
<div class="layui-input-inline">
<input type="text" name="StuNo" lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写学号</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="Name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写姓名</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="text" name="Pwd" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写密码</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="Sex" value="男" title="男">
<input type="radio" name="Sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item" id="BrithDateTool">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-inline">
<input type="text" name="BrithDate" id="BrithDate" lay-verify="required" placeholder="请输入出生日期" autocomplete="off" class="layui-input">
<span id="temp"></span>
</div>
<div class="layui-form-mid layui-word-aux">请务必填写出生日期</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">家庭地址</label>
<div class="layui-input-inline">
<input type="text" name="Address" lay-verify="required" placeholder="请输入家庭地址" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写家庭地址</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
<button onclick="parent.layer.closeAll()" class="layui-btn layui-btn-primary">关闭</button>
</div>
</div>
</div>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<script type="text/javascript">
var datetime;
layui.use(['form', 'laydate', 'table'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$,
laydate = layui.laydate;
form.render();
laydate.render({
elem: '#BrithDate'
, format: 'yyyy-MM-dd'
, btns: ['confirm']
,trigger:'click'
});
form.on("submit(sub)", function (obj) {
var user = obj.field;
debugger;
$.ajax({
type: "POST",
data: user,
url: "/Student2/AddStudent2",
success: function (result) {
var data = result.split(':');
if (data[0] == "ok") {
layer.msg(data[1], { icon: 1 });
setTimeout(function () {
parent.layer.closeAll();
}, 2000);
}
else if (data[0] == "error") {
layer.msg(data[1], { icon: 1 });
} else {
layer.msg("新增失败", { icon: 1 });
}
}
})
})
})
</script>
</body>
</html>
3.3 修改
Edit.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/layui-v2.5.6/css/layui.css" rel="stylesheet" />
<title>Edit</title>
</head>
<body>
<div class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<input type="hidden" name="Id" Id="Id" value="@ViewBag.id">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">学号</label>
<div class="layui-input-inline">
<input type="text" name="StuNo" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写学号</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="Name" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写姓名</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="text" name="Pwd" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写密码</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="Sex" value="男" title="男">
<input type="radio" name="Sex" value="女" title="女" >
</div>
</div>
<div class="layui-form-item" id="BrithDateTool">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-inline">
<input type="text" name="BrithDate" id="BrithDate" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写出生日期</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">家庭地址</label>
<div class="layui-input-inline">
<input type="tel" name="Address" lay-verify="required" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务填写家庭地址</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="sub" onclick="return false;">立即提交</button>
<button onclick="parent.layer.closeAll()" class="layui-btn layui-btn-primary" onclick="return false;">关闭</button>
</div>
</div>
</div>
<script src="~/Content/layui-v2.5.6/layui.js"></script>
<script type="text/javascript">
var stuDetail = {
stuInit: function ($, laydate, util, form) {
$.ajax({
type: "Get",
data: {
id: $("#Id").val()
},
url: "/Student2/EditInitData",
success: function (result) {
form.val("first", result);
var birthtime = result.BrithDate.replace(/[^0-9]/ig, "");
laydate.render({
elem: '#BrithDate',
value: new Date(parseInt(birthtime)),
btns: ['confirm']
});
}
});
}
}
layui.use(['form', 'laydate', 'table', 'util'], function () {
var form = layui.form,
layer = layui.layer,
table = layui.table,
$ = layui.$,
util = layui.util,
laydate = layui.laydate;
form.render();
stuDetail.stuInit($, laydate, util, form);
laydate.render({
elem: '#BrithDate'
, format: 'yyyy-MM-dd'
, btns: ['confirm']
, trigger: 'click'
});
form.on("submit(sub)", function (obj) {
var user = obj.field;
//parent.layer.load(5, { shade: [0.5, "#5588AA"] });
$.ajax({
type: "POST",
data: user,
url: "/Student2/UpdateStudent2",
success: function (result) {
var data = result.split(':');
if (data[0] == "ok") {
layer.msg(data[1], { icon: 1 });
setTimeout(function () {
parent.layer.closeAll();
parent.table.reload("testReload"); //刷新单表
}, 2000);
}
else if (data[0] == "error") {
layer.alert(data[1], { icon: 1 });
} else {
layer.msg("修改失败", { icon: 1 });
}
}
})
})
})
</script>
</body>
</html>
3.4 删除
此外 layui 自带集成了一些功能
4. 后台代码
Student2Constroller
using StudentMvc.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace StudentMvc.Controllers { public class Student2Controller : Controller { private void DataInit() { using (EFDbContext dbContext = new EFDbContext()) { for (int i = 1; i <= 30; i++) { Student Student2 = new Student(); Student2.Name = "张三" + i; Student2.Pwd = "123456"; Student2.Sex = "男"; Student2.StuNo = i; Student2.BrithDate = DateTime.Now; Student2.Address = "武汉江夏"; dbContext.Student.Add(Student2); } for (int i = 1; i <= 30; i++) { Student2 Student2 = new Student2(); Student2.Name = "张三" + i; Student2.Pwd = "123456"; Student2.Sex = "男"; Student2.StuNo = i; Student2.BrithDate = DateTime.Now; Student2.Address = "武汉江夏"; dbContext.Student2.Add(Student2); } dbContext.SaveChanges(); } } /// <summary> /// 学生列表数据 /// </summary> /// <param name="page"></param> /// <param name="limit"></param> /// <returns></returns> public ActionResult Student2List(int page, int limit,int? id) { //DataInit(); using (EFDbContext dbContext = new EFDbContext()) { List<Student2> Student2List= new List<Student2> (); if (id !=null) { Student2List= dbContext.Student2.Where(s=>s.Id==id).OrderBy(s => s.Id).Skip(limit * (page - 1)).Take(limit).ToList(); //总共多少数据 var allCount = Student2List.Count(); //把totle和rows:[{},{}]一起返回 //先建立一个匿名类 var dataJson = new { code = 0, msg = "", count = allCount, data = Student2List }; return Json(dataJson, JsonRequestBehavior.AllowGet); } else { Student2List = dbContext.Student2.OrderBy(s => s.Id).Skip(limit * (page - 1)).Take(limit).ToList(); //总共多少数据 var allCount = dbContext.Student2.Count(); //把totle和rows:[{},{}]一起返回 //先建立一个匿名类 var dataJson = new { code = 0, msg = "", count = allCount, data = Student2List }; return Json(dataJson, JsonRequestBehavior.AllowGet); } } } // GET: Student2 /// <summary> /// 导航页面 /// </summary> /// <returns></returns> public ActionResult Index() { int userId; if (Session["userId"] == null || !int.TryParse(Session["userId"].ToString(), out userId)) { return Redirect("~/Student2/Login"); } EFDbContext dbContext = new EFDbContext(); var user = dbContext.Student2.Find(userId); return View(user); } /// <summary> /// 弹框编辑页面 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult Edit(int id) { EFDbContext dbContext = new EFDbContext(); Student2 stu = dbContext.Student2.Find(id); ViewBag.id = id; return View(); } /// <summary> /// 弹框新增页面 /// </summary> /// <returns></returns> public ActionResult Add() { return View(); } /// <summary> /// 编辑页面的初始数据 /// </summary> /// <param name="id"></param> /// <returns></returns> public JsonResult EditInitData(int id) { EFDbContext dbContext = new EFDbContext(); Student2 stu = dbContext.Student2.Find(id); return Json(stu, JsonRequestBehavior.AllowGet); } /// <summary> /// 提交编辑页面的数据 /// </summary> /// <param name="stu"></param> /// <returns></returns> public ActionResult UpdateStudent2(Student2 stu) { EFDbContext dbContext = new EFDbContext(); var s = dbContext.Student2.Find(stu.Id); if (stu.StuNo != s.StuNo && dbContext.Student2.Where(m => m.StuNo == stu.StuNo).FirstOrDefault() != null) { return Content("error:学号已存在，请修改后再操作！"); } s.Name = stu.Name; s.Pwd = stu.Pwd; s.Sex = stu.Sex; s.StuNo = stu.StuNo; s.BrithDate = stu.BrithDate; dbContext.SaveChanges(); return Content("ok:修改成功"); } /// <summary> /// 提交新增页面的数据 /// </summary> /// <param name="data"></param> /// <returns></returns> public ActionResult AddStudent2(Student2 data) { EFDbContext dbContext = new EFDbContext(); if (dbContext.Student2.Where(m => m.StuNo == data.StuNo).FirstOrDefault() != null) { return Content("error:学号已存在，请修改后再操作！"); } dbContext.Student2.Add(data); dbContext.SaveChanges(); return Content("ok:新增成功"); } /// <summary> /// 提交要删除的数据 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult DeleteStudent2(int id) { EFDbContext dbContext = new EFDbContext(); var s = dbContext.Student2.Find(id); dbContext.Student2.Remove(s); dbContext.SaveChanges(); return Content("ok:删除成功"); } /// <summary> /// 学生列表页面 /// </summary> /// <returns></returns> public ActionResult Student2Tab() { return View(); } /// <summary> /// 登录页面 /// </summary> /// <returns></returns> public ActionResult Login() { return View(); } /// <summary> /// 导航页登出 /// </summary> /// <returns></returns> public ActionResult LogOut() { Session["userId"] = null; return Redirect("~/Student2/Login"); } /// <summary> /// 登录验证 /// </summary> /// <param name="txtName"></param> /// <param name="txtPwd"></param> /// <returns></returns> public ActionResult CheckLogin(string txtName, string txtPwd) { string userName = txtName; string userPwd = txtPwd; EFDbContext dbContext = new EFDbContext(); var Student2 = dbContext.Student2.Where(s => s.Name == userName && s.Pwd == userPwd).FirstOrDefault(); if (Student2 != null) { Session["userId"] = Student2.Id; return Content("ok:登录成功"); } else { return Content("no:用户名或者密码错误"); } } } }
以上有些没贴到代码的地方，请我的上一篇博文 MVC5+EasyUI+EF6增删改查以及登录登出的演示 里面找
经过几天的折腾，终于将一个完整的demo弄出来了，这几天走了一些弯路，
总结经验教训如下：
1. 最开始，还是老实地参考官网的示例，一个个去了解它各个模块的使用，而不是去网上搬别人的源码，然后在上面修改（我就是这样 ，耗时耗力 ，大半地时间的耗在了前面。 结果~~~ ）。
-
前端框架在不断的升级，别人那时候用的版本和你现在用的版本不一致，有时候，别人解决bug的方法不一定适用于你，最好的办法是 参考别人的思路，然后对着官网说明 ，自己手写处理方法
有兴趣研究的。可以进QQ群，在群在线文档里面进行下载。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
链接：https://pan.baidu.com/s/1Y1ktqKMAl9T2SXwpVKGaHw
提取码：76h3
付费内容，请联系本人QQ：1002453261
本文来自博客园，作者：明志德道，转载请注明原文链接：https://www.cnblogs.com/for-easy-fast/p/12790507.html
浙公网安备 33010602011771号