使用Layui 框架，做的界面效果 及经验教训总结（mvc5+EF+layui）
使用Layui 框架，做的界面效果 及经验教训总结（mvc5+EF+layui）
明志德道
发布于 2023-10-21 17:32:46
发布于 2023-10-21 17:32:46
文章被收录于专栏：明志德到的IT笔记
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群，在群在线文档里面进行下载。
下面是，学习使用layui时，收集整理的一些资料，希望对大伙有所帮助吧，后期再进行更新~
链接：https://pan.baidu.com/s/1Y1ktqKMAl9T2SXwpVKGaHw
提取码：76h3
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
