ASP.NET MVC 使用Jquery Ajax实现登录

来源：互联网发布：在windows下配置apache 编辑：程序博客网时间：2024/06/04 19:18

视图[Views] -- Login.cshtml 页面

<!DOCTYPE html><html><head>    <title>Ajax Login</title>    <link href="~/Content/Css/Style.css" rel="stylesheet" /></head><body>    <div class="container">        <form id="login-form" action="#" method="POST">            @*生成防伪标记*@            @Html.AntiForgeryToken()            <div class="controls">                <label for="userName">用户名：</label>                <input type="text" name="userName" id="userName" placeholder="用户名" value="@ViewBag.UserName" />            </div>            <div class="controls">                <label for="password">密　码：</label>                <input type="password" name="password" id="password" placeholder="密码" />            </div>            <div class="controls">                <input type="checkbox" name="rememberMe" id="rememberMe" />                <label for="rememberMe">记住我？</label>            </div>            <input type="submit" value="登录" class="btn" />        </form>    </div>    <script src="~/Content/Scripts/Lib/jquery-1.10.2.min.js"></script>    <script src="~/Content/Scripts/Lib/jquery.validate.min.js"></script>    <script src="~/Content/Scripts/Lib/jquery.validate.messages_cn.js"></script>    <script src="~/Content/Scripts/Lib/jquery.serializeObject.js"></script></body></html>

<script>        $("#login-form").validate({            rules: {                userName: {                    required: true,                },                password: {                    required: true,                    rangelength: [8, 20]                }            },            messages: {                userName: "请输入用户名！",                password: {                    required: "请输入密码！",                    rangelength: "请输入{0}到{1}之间的密码！"                }            }, submitHandler: function (form) {                //获取防伪标记                var token = $('input[name=__RequestVerificationToken]').val();                var headers = {};                headers["__RequestVerificationToken"] = token;                var params = $(form).serializeObject();                $.ajax({                    type: "POST",                    url: "Login",                    data: params,                    headers: headers,                    success: function (result) {                        alert(result.msg);                    },                    error: function () {                        alert("Error");                    }                });            }        });    </script>

控制器 [Controller] -- AccountController

<pre name="code" class="csharp">using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Web.Helpers;using System.Web.Mvc;using MvcAjaxDemo.Models;namespace MvcAjaxDemo.Controllers{    public class AccountController : Controller    {        //        // GET: /Account/Login        public ActionResult Login()        {            ViewBag.UserName = Retrieve("UserName");            return View();        }        [HttpPost]        [ExtendedValidateAntiForgeryToken]        public ActionResult Login(LoginInfo model)        {            //是否为Ajax请求            if (!Request.IsAjaxRequest())                return View();            if (model.UserName == null)                return Json(GetResult(false, "用户名为空！", null));            //根据用户名获取用户            var user = UserService.GetUsers().SingleOrDefault(p => p.LoginName == model.UserName);            if (user == null)                return Json(GetResult(false, "用户名或密码错误！", null));            //验证密码            if (user.Password != model.Password)                return Json(GetResult(false, "用户名或密码错误！", null));            if (!string.IsNullOrWhiteSpace(model.RememberMe))            {                //保存帐户登录名                Save("UserName", model.UserName, DateTime.Now.AddDays(2));            }            return Json(GetResult(false, "登录成功！", null));        }        #region 辅助方法        /// <summary>        /// 获取结果集        /// </summary>        /// <param name="rel">状态</param>        /// <param name="msg">提示信息</param>        /// <param name="data">数据集</param>        /// <returns></returns>        public static object GetResult(bool rel, string msg, object data)        {            return new Dictionary<string, object> { { "rel", rel }, { "msg", msg }, { "obj", data } };        }        /// <summary>        /// 保存Cookie        /// </summary>        /// <param name="key">键</param>        /// <param name="value">值</param>        /// <param name="expires">过期时间</param>        public void Save(string key, string value, DateTime expires)        {            var httpCookie = System.Web.HttpContext.Current.Response.Cookies[key];            if (httpCookie == null) return;            httpCookie.Value = value;            httpCookie.Expires = expires;        }        /// <summary>        /// 检索Cookie        /// </summary>        /// <param name="key">键</param>        /// <returns></returns>        public string Retrieve(string key)        {            var cookie = System.Web.HttpContext.Current.Request.Cookies[key];            return cookie != null ? cookie.Value : "";        }        #endregion    }    #region 防止CSRF攻击特性    /// <summary>    /// 防止CSRF攻击特性    /// </summary>    public class ExtendedValidateAntiForgeryToken : AuthorizeAttribute    {        public override void OnAuthorization(AuthorizationContext filterContext)        {            var request = filterContext.HttpContext.Request;            if (request.HttpMethod != WebRequestMethods.Http.Post) return;            if (request.IsAjaxRequest())            {                var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];                var cookieValue = antiForgeryCookie != null ? antiForgeryCookie.Value : null;                //从cookies 和 Headers 中 验证防伪标记                //这里可以加try-catch                AntiForgery.Validate(cookieValue, request.Headers["__RequestVerificationToken"]);            }            else            {                new ValidateAntiForgeryTokenAttribute().OnAuthorization(filterContext);            }        }    }    #endregion    //Model    public class User    {        public int Id { get; set; }        public string LoginName { get; set; }        public string Password { get; set; }    }        public class UserService    {        public static IList<User> GetUsers()        {            return new List<User>            {                new User                {                    Id=1,                    LoginName = "admin",                    Password = "admin1234"                },                new User                {                    Id=2,                    LoginName = "demo",                    Password = "demo1234"                },                new User                {                    Id=3,                    LoginName = "test",                    Password = "test1234"                },            };        }    }}

//模型[Models] -- LoginInfo.cs

namespace MvcAjaxDemo.Models{    public class LoginInfo    {        /// <summary>        /// 用户名        /// </summary>        public string UserName { get; set; }        /// <summary>        /// 密码        /// </summary>        public string Password { get; set; }        /// <summary>        /// 记住我？        /// </summary>        public string RememberMe { get; set; }    }}

效果图：

Demo 下载地址

http://yunpan.cn/c3bQqR9NzsH8Q 访问密码 6683

有疑问的可以给我留言哦。

0 0