ASP.NET-MVC异步登录跳转实现

最新推荐文章于 2022-11-13 10:01:24 发布

韦_恩

最新推荐文章于 2022-11-13 10:01:24 发布

阅读量1k

点赞数 3

分类专栏： C#（.NET）总结文章标签： c# asp.net jquery html5 bootstrap

本文链接：https://blog.csdn.net/qq_42539194/article/details/105049631

版权

C#（.NET）总结专栏收录该内容

33 篇文章 16 订阅

订阅专栏

每次要用到登录想到异步方式都要现去找以前的项目，真是麻烦，今天就干脆把具体过程记录在这里，也供大家借鉴，欢迎大家提出更好的方式，或者改进。废话不多说，进入正文。

MVC项目主要分三块，M，V，C,M实体类很简单就不说了，接下来主要对视图和控制器部分进行说明

1.视图部分

这里要说明一下，因为是ASP.NET-MVC所以对原来静态界面进行了改造：

加上了模型映射@model Models.SysAdmins，方便控制器能对模型数据进行获取。
在表单、登录账号、密码处使用了试图助手（当然静态的也没有问题）（只是编写时候这样，在浏览器中看和原来静态文本框、表单是没有区别的）。

@model Models.SysAdmins
<!DOCTYPE html>
<html>
<head>
    <title>管理员登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="~/img/图标.png" rel="SHORTCUT ICON">
    <link rel="stylesheet" type="text/css" href="~/css/AdminCss/style.css" />
    <style type="text/css">
        #errormessage{
        height: 20px;
        color: #F9273F;
        margin-top:20px;
        /* background-color: #07E395; */
        }
    </style>
</head>
<body>
    <!-- contact-form -->
    <div class="message warning">
        <div class="inset">
            <div class="login-head">
                <h1>欢迎登录</h1>
            </div>
            @using (Html.BeginForm("", "", FormMethod.Post, new { id = "mainForm" }))
            {
                <li>
                    @Html.TextBox("LoginId", "", new { @class = "text", @id="LoginId",@placeholder = "登录账号" })
                    <a href="#" class=" icon user"></a>
                </li>
                <div class="clear"> </div>
                <li>
                    @Html.Password("LoginPwd", "", new {@id="LoginPwd", @placeholder = "登录密码"})
                    <a href="#" class="icon lock"></a>
                </li>
                <div class="clear"> </div>
                <div class="submit">
                    <input type="button" id="submitMsg" value="马上登录">
                    <h4><a href="#">忘记密码？</a></h4>
                    <div class="clear"></div>
                    <div id="errormessage"></div>
                </div>
            }
        </div>
    </div>
    <div class="clear"> </div>
    <!--- footer --->
    <div class="footer">
        <p>版权所有&copy;:韦恩餐饮集团2020-2030</p>
    </div>

前端效果图

2.JQuery部分

此部分直接接在上面的前端代码后面就可以了

此处还是要对细节进行说明：

post方法是实现异步的关键，语法结构为$.post([url提交后台的地址],[键值对参数],[回调函数],[服务器返回内容格式])

本项目中：

WebHotelManage是区域路由常量名称，SysAdmin是控制器，LoginManage是动过方法，通过模型映射的方式向后台传递两个数据，即登录账号LoginId和登陆密码LoginPwd。
function (data, status)，status记录了异步提交方式是否成功，data记录了异步后返回的数据。

 $.post("/WebHotelManage/SysAdmin/LoginManage", { "LoginId": username, "LoginPwd": userpwd }, function (data, status) {
                    if (status = "success") {
                        if (data == "success") {
                            location = "/WebHotelManage/SysAdmin/AdminMain";//跳转到首页
                        }
                        else if (data == "error") {
                            $("#errormessage").text("用户名或密码错误");
                            $("#errormessage").show();
                        }
                        else {
                            alert("数据提交异常"+data);
                        }
                    }
                    else { alert("JQuery处理出现错误") }
                });

下面的代码是全的jquery部分

 <script src="/lib/jQuery/jquery-v1.12.4.min.js"></script>

    <!-- js部分-->
    <script>
        var __links = document.querySelectorAll('a');

        function __linkClick(e) {
            parent.window.postMessage(this.href, '*');
        };
        for (var i = 0, l = __links.length; i < l; i++) {
            if (__links[i].getAttribute('data-t') == '_blank') {
                __links[i].addEventListener('click', __linkClick, false);
            }
        }
    </script>

    <script type="text/javascript">
        $(function () {
            $("#submitMsg").click(function () {
                //[1]判断用户名或者密码是否填写
                var username = $("#LoginId").val();
                var userpwd = $("#LoginPwd").val();
                if (username.length == 0 || userpwd.length == 0) {
                    $("#errormessage").text("请填写完整的用户名或者密码");
                    $("#errormessage").show();
                    return;
                }
                //[2]正确的话去掉错误提示
                $("#errormessage").text("");
                //[3]向后台传递数据，判断输入是否正确
                $.post("/WebHotelManage/SysAdmin/LoginManage", { "LoginId": username, "LoginPwd": userpwd }, function (data, status) {
                    if (status = "success") {
                        if (data == "success") {
                            location = "/WebHotelManage/SysAdmin/AdminMain";//跳转到首页
                        }
                        else if (data == "error") {
                            $("#errormessage").text("用户名或密码错误");
                            $("#errormessage").show();
                        }
                        else {
                            alert("数据提交异常"+data);
                        }
                    }
                    else { alert("JQuery处理出现错误") }
                });
            });
        })
    </script>

3.控制器代码

此处通过强类型视图将前端传过来的值映射到SysAdmins对象中。通过content返回error/success给前端进行判断是否登陆成功（用此种方式就可以比较简洁的实现提交数据不用刷新页面了）

 //点击登录后台进行校验
        public ActionResult LoginManage(SysAdmins objSysAdmin)
        {
            SysAdminManager objAdmin = new SysAdminManager();
            objSysAdmin = objAdmin.AdminLogin(objSysAdmin);
            if (objSysAdmin==null)
            {
                return Content("error");
            }
            else
            {
                Session["LoginName"] = objSysAdmin.LoginName;
                FormsAuthentication.SetAuthCookie(objSysAdmin.LoginName,false);
                return Content("success");
            }
        }