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

转载自:https://www.cnblogs.com/for-easy-fast/p/12790507.html

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

仅做自己学习收藏

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值