MVC Ajax和JSON 几个注意事项

 new {id = "__AjaxAntiForgeryForm" })

 

1.一定要引用js

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

2.用@using (Html.BeginForm(））{}来提交表单的时候，如果有方式CSRF攻击的代码@Html.AntiForgeryToken()时要这样处理，

　　a.在form中new一个id， new { @class = "form-horizontal", role = "form", id = "__AjaxAntiForgeryForm" })

　　b.在js中要获取防伪标记

　　

//获取防伪标记
var form = $('#__AjaxAntiForgeryForm');
var token = $('input[name="__RequestVerificationToken"]', form).val();

　　c.$.ajax传递的参数的时候要在默认的参数列表前加上  __RequestVerificationToken: token

data: { __RequestVerificationToken: token, "UserName": userName, "Password": password, "RememberMe": isCheck },

最后请看demo：

view：

<!-- 登录模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-3" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    登录
                </h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "__AjaxAntiForgeryForm" })) //ViewBag.ReturnUrl @class = "form-horizontal", role = "form",
                {
                    <input type="hidden" name="ReturnUrl" value="@ViewBag.ReturnUrl" />
                    <div class="col-lg-12 login-errorMsg">
                        <p></p>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">@Html.TextBoxFor(m => m.UserName, new { @class = "form-control textBoxUserName", placeholder = "请输入账户" })</div>
                        <div class="col-lg-12">@Html.ValidationMessageFor(m => m.UserName)</div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">@Html.PasswordFor(m => m.Password, new { @class = "form-control textBoxPassword", placeholder = "请输入密码" })</div>
                        <div class="col-lg-12">@Html.ValidationMessageFor(m => m.Password)</div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">@Html.CheckBoxFor(m => m.RememberMe, new { @class = "checkBoxRemember" }) @Html.LabelFor(m => m.RememberMe)</div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 col-sm-offset-3">
                            <button type="button" id="login-sumbit" class="btn btn-primary">登录</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 col-sm-offset-3">
                            <a href="~/Account/Register">没有账户？</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">@Html.AntiForgeryToken()</div>
                    </div>
                }
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

 

 js：

<script type="text/javascript">
    $(document).ready(function () {
        //异步登录
        $("#login-sumbit").click(function () {
            var userName = $("#UserName").val();
            var password = $("#Password").val();
            var isCheck = $(".checkBoxRemember").is(':checked');
            //获取防伪标记
            var form = $('#__AjaxAntiForgeryForm');
            var token = $('input[name="__RequestVerificationToken"]', form).val();
            $.ajax({
                type: 'POST',
                url: "/Account/Login",
                data: { __RequestVerificationToken: token, "UserName": userName, "Password": password, "RememberMe": isCheck },
                dataType:"json",
                success: function (data) {
                    if (data.isLogin) {
                        //window.location.href = "../Home/Index";
                        window.location.href = data.returnUrl;
                    }
                    else {
                        $(".login-errorMsg p").html(data.ErrorMes);
                    }
                }
            });
        });
    })
</script>

 

 Control:

 

        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public JsonResult Login(string UserName, string Password,bool RememberMe)//LoginModel model
        {
            //if (ModelState.IsValid && WebSecurity.Login(model.UserName, model.Password, persistCookie: model.RememberMe))
            //{
            //    string returnUrl = Request.Form["returnUrl"];
            //    return RedirectToLocal(returnUrl);
            //}
            
            // 如果我们进行到这一步时某个地方出错，则重新显示表单
            //ModelState.AddModelError("", "提供的用户名或密码不正确。");
            //return View(model);
            
            //res.Data = new object[] { new { isLoginSuccess, errorMes } };
            LoginJson loginJson = new LoginJson();          
            if (ModelState.IsValid && WebSecurity.Login(UserName, Password, persistCookie: RememberMe))
            {
                string returnUrl = Request.UrlReferrer.ToString();
                loginJson.isLogin = true;
                loginJson.returnUrl = returnUrl;
            }
            else
            {
                loginJson.ErrorMes = "·提供的用户名或密码不正确！";
            }
            return Json(loginJson);
        }

LoginJson类：

    /// <summary>
    /// 登录信息JSON
    /// </summary>
    public class LoginJson
    {
        /// <summary>
        /// 登录是否成功
        /// </summary>
        public bool isLogin { get; set; }
        /// <summary>
        /// 登录失败提示
        /// </summary>
        public string ErrorMes { get; set; }

        public string returnUrl { get; set; }

        public LoginJson()
        { }

        public LoginJson(bool isLogin, string ErrorMes,string ReturnUrl)
        {
            this.isLogin = isLogin;
            this.ErrorMes = ErrorMes;
            this.returnUrl = ReturnUrl;
        }