碼上快樂

相關內容    簡體    繁體

使用Layui 框架，做的界面效果 及經驗教訓總結（mvc5+EF+layui）

本文轉載自   查看原文   2020-04-27 21:58   2995    21 實操文件下載

 

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. 最開始，還是老實地參考官網的示例，一個個去了解它各個模塊的使用，而不是去網上搬別人的源碼，然后在上面修改（我就是這樣 ，耗時耗力 ，大半地時間的耗在了前面。 結果~~~ ）。

  1. 前端框架在不斷的升級，別人那時候用的版本和你現在用的版本不一致，有時候，別人解決bug的方法不一定適用於你，最好的辦法是 參考別人的思路，然后對着官網說明 ，自己手寫處理方法

  1. 學習新框架中，最開始不要去做筆記，而要多去看示例，多操練示例，次數多了你就明白它是怎么回事。等你熟到一定程度就可以做筆記了。

 

 

項目源碼地址

有興趣研究的。可以進QQ群，在群在線文檔里面進行下載。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面是，學習使用layui時，收集整理的一些資料，希望對大伙有所幫助吧，后期再進行更新~

鏈接：https://pan.baidu.com/s/1Y1ktqKMAl9T2SXwpVKGaHw
提取碼：76h3


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 經驗教訓+總結 使用RabbitMQ做的一些工作及經驗教訓 上位機開發經驗教訓總結 layui框架使用總結 項目結束后，哪些經驗教訓需要總結？ 使用Flutter完成10個商業項目后的經驗教訓 ASP.NET MVC5+EF6+LayUI實戰教程，通用后台管理系統框架（4）- 漂亮的登錄界面 C#+MVC+EF+LayUI框架的應用(附帶源碼和教程) CQRS之旅——旅程8(后記:經驗教訓) Proguard 混淆的一些經驗教訓！！！
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM