mvc ajax登录验证

首先是同mvc ajax框架

引入jquery.unobtrusive-ajax.js

原本mvc表单提交的html扩展方法是 Html.BeginForm,   现在用Ajax.BeginForm

登录界面:

 @using (Ajax.BeginForm("Login_Ajax", "Login", new AjaxOptions { HttpMethod = "post", OnSuccess = "back" }, new { id = "from" }))
        {
            <div class="mycenter">
                <div class="mysign">
                    <div class="col-lg-11 text-center text-info">
                        <h2>
                            请登录
                        </h2>
                    </div>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="UserEmail" placeholder="请输入邮箱" />
                        <span style="color:red">@Html.ValidationMessageFor(i => i.UserEmail)</span>
                    </div>
                    <div class="col-lg-10">
                    </div>
                    <div class="col-lg-10">
                        <input type="password" class="form-control" name="UserPwd" placeholder="请输入密码" />
                        <span style="color:red">@Html.ValidationMessageFor(i => i.UserPwd)</span>
                    </div>
                    <div class="col-lg-10">
                    </div>
                    <div class="col-lg-10">
                        <button type="submit" id="btn" class="btn btn-success col-lg-12">
                            登录
                        </button>
                    </div>
                    <div class="col-lg-10">
                    </div>

                    <div class="col-lg-10">
                        @*<a href="" style="float:left" >注册账号</a><a href="" style="float:right">注册账号</a>*@
                        <button type="button" id="btnbtn" class="btn btn-success col-lg-12" onclick="a()">
                            注册账户
                        </button>
                    </div>
                </div>
            </div>
        }
        </div>

然后是js     back方法  这是请求成功时返回的函数   -------   回调函数

function back(data) {
            if (data.Status == 0) {
                alert(data.Msg);
                return;
            }
            if (data.Status == 1) {
                alert(data.Msg);
                window.location.href = "/Home/Index";
            }
        }

然后写一个ajax类,里面有两个属性,一个是状态    一个是消息

 public class Ajax
    {
        //提示信息
        public string Msg { get; set; }
        //状态 0失败   1成功
        public int Status { get; set; }
    }

然后是contorllers下添加 Login_Ajax 的action

  public ActionResult Login_Ajax(UserLogin user)
        {
            if (!ModelState.IsValid)
            {
                return RedirectToAction("Login");
            }
            else
            {
                var User= db.Query<LoginUser>(i => i.UserEmail == user.UserEmail && i.UserPwd == user.UserPwd);
                if (LoginUserPwd(user.UserEmail,user.UserPwd))
                {
                    user.UserName = User.UserName;
                    SessionHelp.SessionHelpe.SetSession("user", user.UserName);
                    Ajax ajax = new Ajax() { Status = 1, Msg = "登录成功" };
                    return Json(ajax);  
                }
                else
                {
                    Ajax ajax = new Ajax() { Status = 0, Msg = "账号或密码错误!" };
                    return Json(ajax);                 
                }
            }
        }



//判断账号密码是否正确
 public bool LoginUserPwd(string UserEmail,string UserPwd)
        {
            var user = db.Query<LoginUser>(i => i.UserEmail == UserEmail && i.UserPwd == UserPwd);
            if (user==null)
            {
                return false;
            }
            else
            {
                return true;
            }
        }

 

mvc ajax登录验证

上一篇:Webpack学习-工作原理(上)


下一篇:Java中的反射的应用