首先是同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; } }