Layui +C# MVC登录

最新推荐文章于 2024-07-20 10:32:06 发布
最新推荐文章于 2024-07-20 10:32:06 发布
阅读量1.7k 收藏 10
点赞数 6
分类专栏： C# 文章标签： 前端 c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43951530/article/details/117465404
版权

文章目录

前言

Layui可以很快的搭建比较好看的页面,不用花费太多的时间写CSS

提示：以下是本篇文章正文内容，下面案例可供参考

登录页面代码

以下是页面代码以及实现的ajax登录

<head>
    <meta charset="UTF-8">

    <title>備品系統登錄頁面</title>
    <link rel="stylesheet" href="~/Content/css/layui.css">
    <link rel="stylesheet" href="../Content/css/style.css">
</head>
<body>

    <div class="login-main">
        <header class="layui-elip">備品系統登錄頁面</header>
        <form class="layui-form">
            <div class="layui-input-inline">
                <input type="text" name="gh" id="gh" required lay-verify="user" placeholder="用户名" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="password" placeholder="密码" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline login-btn">
                <button lay-submit lay-filter="login" class="layui-btn">登录</button>
            </div>
            <hr />
            
        </form>
    </div>


    <script src="~/Content/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
        layui.use(['form', 'layer', 'jquery'], function () {

            // 操作对象
            var form = layui.form;
            var $ = layui.jquery;

            form.verify({
                user: function (value) {
                    if (value.length < 1) {
                        return '用戶名不能為空';
                    }

                }
                ,
                password: function (value) {
                    if (value.length < 1) {
                        return '密碼不能為空';
                    }
                }
                
            });
            form.on('submit(login)', function (data) {
                // console.log(data.field);
                $.ajax({
                    url: '@Url.Action("Logins", "Home")',
                    data: data.field,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        if (result == "success") {
                            window.location = "@Url.Action("Index", "Home")";
                        } else {
                            layer.msg('登录名或密码错误');
                            //window.location = "@Url.Action("Index", "Home")";
                        }
                    }
                    ,
                    error:function (result) {
                        if (result == "success") {
                            window.location = "@Url.Action("Index", "Home")";
                        } else {
                            layer.msg('登录名或密码错误');
                        }
                    }
                })
                return false;
            })

        });
    </script>
</body>

另一个CSS文件

@charset "utf-8";

.layui-header {
    background: none;
}

.layui-layout-admin .my-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #393D49;
    z-index: 2;
}

    .layui-layout-admin .my-header .my-header-logo {
        display: inline-block;
        width: auto;
        height: 30px;
        color: white;
        font-size: 18px;
        line-height: 30px;
        padding: 15px;
        vertical-align: top;
    }

    .layui-layout-admin .my-header img.my-header-logo {
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        padding: 10px;
        border: none;
    }

/* index */
.my-header-btn {
    display: inline-block;
    width: auto;
    height: 100%;
    line-height: 60px;
}

    .my-header-btn .layui-btn .layui-icon {
        margin-right: 0;
    }

.my-header-user-nav {
    float: right;
}

    .my-header-user-nav img {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: none;
        border-radius: 5px;
    }

    .my-header-user-nav .layui-nav-item a.name {
        padding-left: 5px !important;
    }

.my-header ul.layui-nav {
    display: inline-block;
    vertical-align: top;
    border-radius: 0;
}

    .my-header ul.layui-nav li a {
        max-height: 60px;
    }

.my-side {
    position: fixed;
    top: 60px;
    bottom: 0;
    width: 200px;
    z-index: 2;
    overflow-x: hidden;
}

    .my-side .layui-nav {
        border-radius: 0;
        min-height: 100%;
    }

    .my-side ul.layui-nav li a i, .layui-nav .layui-nav-child a i, .layui-nav .layui-nav-item a i, .layui-tab-card > .layui-tab-title li span i {
        margin-right: 5px;
    }

    .my-side ul.layui-nav li dl dd a i {
        margin-left: 15px;
    }

.my-body {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 200px;
    right: 0;
    z-index: 1;
    overflow: hidden;
}

.body {
    padding: 10px;
}

.my-body .layui-tab, .my-body .layui-tab .layui-tab-content {
    margin: 0;
    padding: 0;
}

    .my-body .layui-tab .layui-tab-title li:first-child > i {
        display: none;
    }

    .my-body .layui-tab, .my-body .layui-tab .layui-tab-content, .my-body .layui-tab .layui-tab-item {
        height: 100%;
    }

.my-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}

.layui-layout-admin .my-footer {
    height: 40px;
    padding: 2px 0;
}

    .layui-layout-admin .my-footer p {
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
    }

.my-btn-box {
    height: 38px;
    margin-bottom: 10px;
}

.my-pay-box > div p {
    text-align: center;
    margin-bottom: 10px;
}

/* welcome */
.my-index-main button.layui-icon {
    width: 100%;
    font-size: 20px;
}

.my-index-main .my-nav-btn {
    background: #efefef;
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
}

.my-index-main .my-nav-text:first-child {
    height: 24px;
    line-height: 25px;
    font-size: 16px;
    font-weight: bold;
}

.my-index-main .my-nav-text:last-child {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

/* login */
.login-body {
    background: url("../image/bg.png") repeat fixed;
}

.login-box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 320px;
    height: 241px;
    max-height: 300px;
}

.login-body .login-box h3 {
    color: #444;
    font-size: 22px;
    font-weight: 100;
    text-align: center;
}

.login-box .layui-input[type='number'] {
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.login-box img {
    display: inline-block;
    width: 46%;
    height: 38px;
    border: none;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4%;
}

.login-box button.btn-reset {
    width: 95px;
}

.login-box button.btn-submit {
    width: 190px;
}

.login-main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 350px;
    margin: 0 auto;
}

    .login-main header {
        margin-top: 150px;
        height: 35px;
        line-height: 35px;
        font-size: 30px;
        font-weight: 100;
        text-align: center;
    }

    .login-main header, .login-main form, .login-main form .layui-input-inline {
        margin-bottom: 15px;
    }

        .login-main form .layui-input-inline, .login-main form .layui-input-inline input, .login-main form .layui-input-inline button {
            width: 100%;
        }

        .login-main form .login-btn {
            margin-bottom: 5px;
        }

/* demo */
.site-demo-button div {
    margin: 20px 30px 10px;
}

.site-demo-button .layui-btn {
    margin: 0 7px 10px 0;
}

/* check */
input[type='checkbox'] {
    vertical-align: middle;
}

.my-checkbox {
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    border: solid 2px #28B779;
    border-radius: 2px;
    background-clip: padding-box;
    display: inline-block;
    cursor: pointer;
}

    .my-checkbox:checked {
        background-color: #28B779;
        border: solid 0 #28B779;
    }

        .my-checkbox:checked:before {
            position: absolute;
            display: inline-block;
            right: 50%;
            bottom: 50%;
            -webkit-transform: translate(50%, 50%);
            -ms-transform: translate(50%, 50%);
            transform: translate(50%, 50%);
            font-family: "Microsoft Yahei";
            content: "√";
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 600;
        }

/* dblclick css */
.dblclick-tab tr td {
    height: 30px;
    line-height: 30px;
    padding: 0 6px;
    border-radius: 2px;
    cursor: pointer;
}

    .dblclick-tab tr td:hover {
        color: black;
        background: white;
    }

    .dblclick-tab tr td i {
        position: relative;
        top: 2px;
        display: inline-block;
        margin-right: 5px;
    }

/* tips 404 */
.my-page-box {
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;
    text-align: center;
    padding: 20px;
    background-color: white;
}

    .my-page-box i {
        font-size: 100px;
    }

    .my-page-box h2, .my-page-box h3, .my-page-box h4, .my-page-box h5 {
        font-size: 80px;
    }

    .my-page-box p.msg {
        color: #dce2ec;
        font-size: 20px;
        margin-top: 20px;
    }

    .my-page-box p.text {
        color: #666;
        font-size: 16px;
        margin-top: 20px;
    }

    .my-page-box .my-btn-box {
        margin-top: 20px;
        margin-bottom: 20px;
    }

/* tree table */
.my-tree-table-box .tree-table-tree-box {
    width: 20%;
    min-height: 200px;
    display: inline-block;
    vertical-align: top;
    overflow-y: auto;
    overflow-x: auto;
}

.my-tree-table-box .tree-table-table-box {
    display: inline-block;
    vertical-align: top;
    width: 79%;
    margin-left: 1%;
}

/* skin0 */
html .skin-0 .dblclick-tips-box .layui-layer-content {
    background-color: #009688;
}

html .skin-0 .dblclick-tips-box i.layui-layer-TipsB {
    border-right-color: #009688;
}

/* skin1 */
html .skin-1 .my-header .my-header-logo,
html .skin-1 .layui-nav .layui-nav-item a,
html .skin-1 .layui-nav .layui-nav-item a:hover {
    color: #444;
}

html .skin-1 .my-header,
html .skin-1 .layui-nav,
html .skin-1 .layui-nav-child {
    background: white;
}

    html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a {
        color: white;
    }

    html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this,
    html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a,
    html .skin-1 .layui-nav-tree .layui-nav-item > a:hover,
    html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a,
    html .skin-1 .layui-tab-title li .layui-tab-close:hover,
    html .skin-1 .dblclick-tips-box .layui-layer-content {
        color: white !important;
        background-color: #666 !important;
    }

html .skin-1 .dblclick-tips-box i.layui-layer-TipsB {
    border-right-color: #666;
}

html .skin-1 .layui-nav .layui-nav-itemed > a {
    background: #444 !important;
}

html .skin-1 .layui-nav .layui-nav-more {
    border-color: #444 transparent transparent;
}

html .skin-1 .layui-nav .layui-nav-mored {
    border-color: transparent transparent #444;
}

/* skin2 */
html .skin-2 .my-header .my-header-logo,
html .skin-2 .layui-nav .layui-nav-item a,
html .skin-2 .layui-nav .layui-nav-item a:hover {
    color: white;
}

html .skin-2 .my-header,
html .skin-2 .layui-nav,
html .skin-2 .layui-nav-child {
    background-color: #01AAED;
}

    html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a {
        color: white;
    }

    html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this,
    html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a,
    html .skin-2 .layui-nav-tree .layui-nav-item > a:hover,
    html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a,
    html .skin-2 .layui-tab-title li .layui-tab-close:hover,
    html .skin-2 .dblclick-tips-box .layui-layer-content {
        color: white !important;
        background-color: #00C0F7 !important;
    }

html .skin-2 .dblclick-tips-box i.layui-layer-TipsB {
    border-right-color: #00C0F7;
}

html .skin-2 .layui-nav .layui-nav-itemed > a {
    background-color: #1684af !important;
}

/* skin0-2 */
html .skin-2 .layui-nav .layui-nav-more,
html .skin-1 .layui-nav-tree .layui-nav-more,
html .skin-2 .layui-nav-tree .layui-nav-more {
    border-color: white transparent transparent;
}

html .skin-2 .layui-nav .layui-nav-mored,
html .skin-1 .layui-nav-itemed .layui-nav-more,
html .skin-2 .layui-nav-itemed .layui-nav-more {
    border-color: transparent transparent white;
}

/* tools */
.fl {
    float: left;
}

.fr {
    float: right;
}

.none {
    display: none;
}

.block {
    display: block;
}

.tc {
    text-align: center;
}

.max-auto {
    max-height: 450px;
    overflow-y: auto;
}

/* layui css cover */
html body .layui-nav .layui-nav-bar {
    opacity: 0 !important;
    overflow: hidden !important;
}

.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
    background-color: transparent;
}

.my-body .layui-tab-card > .layui-tab-title li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.layui-layer-tips .layui-layer-content {
    padding: 5px;
}

/* media */
@media screen and (max-width: 1023px) {
    .my-header ul.layui-nav, .my-header-btn, .my-side, .layui-field-title, .my-btn-box .fr {
        display: none;
    }

    .layui-side-scroll {
        width: 170px;
    }

    body div.my-mobile {
        background: #393D49;
    }

        body div.my-mobile .layui-layer-content {
            overflow-x: hidden;
        }

    .my-header ul.my-header-user-nav {
        display: inline-block;
        padding-left: 0;
        padding-right: 10px;
    }

        .my-header ul.my-header-user-nav a {
            padding: 0 10px;
        }

        .my-header ul.my-header-user-nav:last-child a:first-child {
            padding-right: 20px;
        }

    .my-side, .layui-nav-tree, .my-btn-box input[type='text'] {
        width: 150px;
    }

    .my-body {
        left: 0;
        width: 100%;
        overflow-x: auto;
    }

        .my-body iframe {
            width: 100%;
        }

    select {
        background: white;
    }

    .layui-layout-admin .layui-footer {
        left: 0;
    }
}

@media screen and ( max-width: 450px) {
    .my-header ul.my-header-user-nav li a.pay {
        display: none;
    }
}

然后是写入控制器

1.因为要验证其是否有登录过,所以控制器进行了判断

代码如下（示例）：

public ActionResult Logins(string gh, string userpwd)
        {
            if (Session["login"] == null)
            {
                try
                {
                    if (gh == "admin" || password=="123")
                    {
                        return Json("success");

                    }
                }
                catch (Exception ex)
                {
                    return Json(new { code = 200, msg = "", count = 1, data = ex }, JsonRequestBehavior.AllowGet);
                }
                return Json(new { code = 200, msg = "", count = 1, data = 0 }, JsonRequestBehavior.AllowGet);
            }
            return Json(new { code = 200, msg = "", count = 1, data = 0 }, JsonRequestBehavior.AllowGet);
        }

2.读入数据

因为有用ajax接收,当后台返回success的时候就进入首页

success: function (result) {
                        if (result == "success") {
                            window.location = "@Url.Action("Index", "Home")";
                        } else {
                            layer.msg('登录名或密码错误');
                            //window.location = "@Url.Action("Index", "Home")";
                        }
                    }

实现的效果图如下

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

总结

以上就是layui 进行登录的简单写法,没有涉及到数据库查询,比较适合初入layui的练手和学习,后续有时间的话,再和大家分享其他功能

幻想方程式
关注
专栏目录
C# MVC + layui
haoyubt的博客
04-13 1886
C# MVC +layui Controller [HttpGet] public async Task<ActionResult> AccountsIndex() { IPayModeManager payMgr = new PayModeManager(); List<PayModeDto> dtopay = new List<PayModeDto>();
C# EXECL导出（MVC+Layui+AJAX）
天涯博客
06-29 789
EXECL导出（C# MVC+Layui+AJAX） 1.视图 1.1 在使用layui的时候需要引用layui的样式 1.2 2.js 3.控制器
MKAdmin（layui+C# 后台管理系统）
05-19
MKAdmin 项目演示地址 http://www.mkadmin.cn/ 介绍 基于LayUI前端框架实现的后端管理系统 项目架构 前端 1.jquery 2.layui 3.echarts 后端 1.Asp.net MVC 2.Injection依赖注入 3.ADO.NET操作数据库 4.SignalR 数据库 SqlServer2012及以上 数据库安装 按顺序执行dataBase里面三个脚本 修改web.config里面连接数据库连接字符串
C#+layui+Echarts实现散点图
最新发布
路飞船长的博客
07-20 1029
C#+layui+Echarts实现散点图
C# MVC+layui.js超轻量级框架（包含数据库）
09-27
c# mvc基础框架+前端layui.js+sqlsugar处理数据（支持sql server、mysql、sqlite、Oracle)。 用户，角色和页面配置齐全，容易上手，非常适合小微型项目开发。
一套简单通用的Java后台管理系统，拿来即用，非常方便（附项目地址）
互扯程序的博客
09-23 298
作者：huanzi-qchcnblogs.com/huanzi-qch/p/11534203.html前言这套Base Admin是一套简单通用的后台管理系统，主要功能有：权限管理、菜单...
C# 创建MVC项目+Layui框架
weiwei_y的博客
12-22 1947
C# 创建MVC Layui前端框架
.net core 3.1+mysql+layui+peta poco 后台管理系统
02-07
2、登录授权 3、layui 4、peta poco 5、后台管理系统搭建 6、鉴权规则 7、用户管理 8、mysql 9、 404统一页面 10、 500统一页面 11、Result风格 此项目采用的轻量级orm Peta poco，这是业内相对来说最好用的技术了...
弹框 hello word
feizhaipuls的博客
09-04 350
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用layui<...
C#后端操作LayUI数据表格
爱吃秋刀鱼的猫
05-30 5776
C#后端操作LayUI数据表格 准备工作 首先大家看看上图，这时用layui做的一个数据表格，界面非常流畅，下面具体说说这个是怎么实现的。 首先我们去layui官网https://www.layui.com/demo/table.html，这就是我们将要进行后端传入数据的界面。 新建项目 首先我们用vs2017新建一个mvc，然后新建一个类库core，在类库core里引入petapoco，添加system.configuration引用，两个实体类，一个分页实体类，一个文章信息实体类 ///分页实体类
C#MVC后端Layui布局写的数据表格|JSON
05-30
用layui前端布局， C#MVC后端调用数据写的数据表格，后端往前端传入json格式数据，动态绑定，局部刷新，分页，数据库用的petapoco，功能虽小，涉及的东西不少，可以研究研究，只需将web.config里的服务器地址的数据库修改一下即可
C#+layui 表格实现增删改查
golden_stone_fish的博客
12-12 2377
C#+layui 表格实现增删改查 layui 前端代码 layui table 界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" co
C#+Layui 动态列批量添加数据
qq_42782011的博客
10-29 779
前端动态列代码： cols: [[ { title: '#number', minWidth: 70, title: "序号", align: "center", unresize: true, templet: '#number' }, { field: 'evaIndex', title: '评估指标', align: "center", minWidth: 200 }, { field: 'evaCont
C#MVC+Layui 视图间的跳转
qq_42782011的博客
12-09 815
$("#btnThreme").click(function () { var w = ($(window).width() * 0.9); var h = ($(window).height() - 40); layer.open({ resize: false, title: '目标视图的新标题', shadeClos...
C# MVC LayUI实现下拉框二级联动
weixin_44146294的博客
06-20 2016
一、layui.use 1、LayUI的官方文档：LayUI官方开始使用文档 ； 2、layui的内置模块不是默认就加载好的，必须要执行启动模块的这种方法后模块才会加载； 3、layui.use就是一种加载模块的方式。 如下代码： //LayUI渲染以及启动模块 layui.use(['form', 'layedit', 'laydate'], function () { var form = layui.form,//获取form模块
C#MVClayui实现分页,及模糊查询
Stealingcoins的博客
05-14 520
{ title: '操作', width: 130, templet: '#ListBar', fixed: "right", align: "center" }{ field: 'pNum', title: '数量', align: 'center', align: 'center' },{ field: 'pType', title: '型号', align: "center", },tableIns.reload({///////////////////////////卡死在加了ID。
推荐一套开源通用后台管理系统
公众号：Java后端
10-09 2120
点击上方Java后端，选择设为星标优质文章，及时送达来源：cnblogs.com/huanzi-qch/p/11534203.html前言这套Base Admin是一套简单通用的后台...
c# 基于layui的通用后台管理系统_基于 layui 编写的最简洁、易用的开源后台框架模板——layuimini
weixin_39667398的博客
11-24 1795
介绍有一段时间没推荐过后端模板了，今天就来一个，layuimini是一款后台admin前端模板，基于 layui 编写的最简洁、易用的后台框架模板。只需提供一个接口就直接初始化整个框架，无需复杂操作。模板分为两种模式，分别是传统的iframe版本，另外一个是单页面版本，可以满足不同的开发需求！Githubhttps://github.com/zhongshaofa/layuimini主要特性界面足...
layui +.netcore mvc +orcale
07-03
在.NET Core MVC项目中，可以很方便地通过使用C#编写控制器和模型来处理业务逻辑，并将结果通过视图呈现给用户。 Oracle是一家知名的数据库管理系统提供商，它提供了强大的关系型数据库服务。在.NET Core MVC项目中...
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

幻想方程式

你的鼓励将是位最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值