【ASP.NET】一个简单的用户登录页面，含验证码

本文链接：https://blog.csdn.net/weixin_38211198/article/details/100006068

首先，生成随机验证码 ValidateCode，看这里

https://blog.csdn.net/weixin_38211198/article/details/100005957

开始登录界面

后台代码

public class UserLoginController : Controller
{
    public IUserInfoService UserInfoService { get; set; }

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult ShowCode()
    {
        Common.ValidateCode validateCode = new Common.ValidateCode();

        //生成验证码
        string vCode = validateCode.CreateVCode();

        Session["vCode"] = vCode;

        //生成验证码图像Byte
        byte[] imgByte = validateCode.GetCodeImgByte();

        //获取验证码图像
        //Bitmap bitmap = validateCode.VCodeImg;

        return File(imgByte, @"image/jpeg");
    }

    public ActionResult PrecessLogin()
    {
        //处理验证码
        string strCode = Request["inputCode"];

        string sessionCode = Session["vCode"] as string;

        Session["vCode"] = null;

        if (string.IsNullOrEmpty(sessionCode)|| strCode != sessionCode)
        {
            return Content("验证码错误！");
        }

        //处理用户名密码
        string name = Request["inputName"];
        string pwd = Request["inputPassword"];

        short delNormal = (short)Model.DelFlagEnum.Normal;

        var userInfo = UserInfoService.GetEntities(u => u.UName == name && u.Pwd == pwd && u.DelFlag == delNormal).FirstOrDefault();

        if (userInfo == null)
        {
            return Content("用户名密码错误！");
        }

        Session["loginUser"] = userInfo;

        //正确，跳转首页
        return Content("ok");

    }

}

前台代码


@{
    Layout = "";
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/modernizr-2.8.3.js"></script>

    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color:skyblue;
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
            background-color:white;
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin .checkbox {
            font-weight: normal;
        }

        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="text"] { 
            margin-bottom: 10px; 
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
        }

        .form-signin input[id="inputCode"] {
            float: left;
            width: 100px;
        }

        #codeDiv {
            width: 100%;
            height: 46px;
        }

        #codeNumDiv {
            float: right
        }

        #imgCode {
            width: 80px;
            height: 45px
        }

    </style>
</head>

<body>
    <div class="container">

        @using (Ajax.BeginForm("PrecessLogin", "UserLogin", new AjaxOptions() { OnSuccess = "afterLogin" },new { @class= "form-signin" }))
        {
            <h2 class="form-signin-heading">用户登录</h2>
            <label for="inputName" class="sr-only">用户名</label>
            <input type="text" id="inputName" name="inputName" class="form-control" placeholder="用户名" required autofocus>
            <label for="inputPassword" class="sr-only">密码</label>
            <input type="password" id="inputPassword" name="inputPassword" class="form-control" placeholder="密码" required>

            <div id="codeDiv">
                <label for="inputCode" class="sr-only">验证码</label>
                <input type="text" id="inputCode" name="inputCode" class="form-control" placeholder="验证码" required>

                <div id="codeNumDiv">
                    <img id="imgCode" src="/UserLogin/ShowCode?id=2" />
                    <a href="javascript:void(0)" onclick="changeCheckCode(); return false;">看不清，换一张</a>
                </div>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> 记住密码
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>

            <hr />
            <footer>
                <p>&copy; 哈哈</p>
            </footer>
        }

    </div>

    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>

    <script type="text/javascript">
        $(function () {
            //点击图片，改变验证码
            $("#imgCode").click(changeCheckCode);
        });

        //改变当前图片地址
        function changeCheckCode() {
            var old = $("#imgCode").attr("src");

            var now = new Date();
            var str = old +
                now.getDay() +
                now.getMinutes() +
                now.getSeconds();

            $("#imgCode").attr("src", str);
        }

        //登录成功执行
        function afterLogin(data) {
            if (data == "ok")
                window.location.href = "/Home/Index";
            else
                alert(data);
        }

    </script>

</body>
</html>

效果

参考

https://v3.bootcss.com/examples/signin/