使用Layui 框架,做的界面效果 及经验教训总结(mvc5+EF+layui)

 

1.  登录界面

login.css

复制代码
body,
html {
    height: 100%;
}

.layui-admin-login-header {
    padding: 20px;
    text-align: center;
}

    .layui-admin-login-header h1 {
        color: #009688;
        font-family: "Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif";
        font-weight: bold;
        margin-bottom: 10px;
    }

    .layui-admin-login-header p {
        color: white;
        font-family: "Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif";
        font-weight: bold;
        margin-bottom: 10px;
    }

.layui-admin-login {
    width: 24%;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    left: 37%;
    box-shadow: 0 -15px 30px #0d957a;
    border-radius: 5px;
    padding: 2%;
    z-index: 1000;
}

    .layui-admin-login .layui-footer {
        color: white;
    }

    .layui-admin-login .layui-form-checkbox {
        margin-left: 0px;
    }
/*chrome浏览器透明有点问题*/
.layui-form label, input {
    background-color: transparent !important;
    color: white !important;
}
复制代码

login.cshtml页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
@{
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
@{
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
@{
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
@{
    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

posted @   明志德道  阅读(5895)  评论(3编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
点击右上角即可分享
微信分享提示