使用Layui 框架，做的界面效果 及经验教训总结（mvc5+EF+layui）

2023-10-21 17:32:46 浏览数 (3)

1.  登录界面

login.css

代码语言：javascript复制
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页面

代码语言：javascript复制
<!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

代码语言：javascript复制
@{
    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

代码语言：javascript复制
@{
    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

代码语言：javascript复制
@{
    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

代码语言：javascript复制
@{
    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

代码语言：javascript复制
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. 最开始，还是老实地参考官网的示例，一个个去了解它各个模块的使用，而不是去网上搬别人的源码，然后在上面修改（我就是这样 ，耗时耗力 ，大半地时间的耗在了前面。 结果~~~ ）。

  1. 前端框架在不断的升级，别人那时候用的版本和你现在用的版本不一致，有时候，别人解决bug的方法不一定适用于你，最好的办法是 参考别人的思路，然后对着官网说明 ，自己手写处理方法
  2. 学习新框架中，最开始不要去做笔记，而要多去看示例，多操练示例，次数多了你就明白它是怎么回事。等你熟到一定程度就可以做笔记了。

项目源码地址

有兴趣研究的。可以进QQ群，在群在线文档里面进行下载。

下面是，学习使用layui时，收集整理的一些资料，希望对大伙有所帮助吧，后期再进行更新~

链接：https://pan.baidu.com/s/1Y1ktqKMAl9T2SXwpVKGaHw

提取码：76h3

class form layui 框架 数据

1 人点赞