从 json 返回时只显示值不显示数据答案

【问题标题】：on return from json only show value not show data从 json 返回时只显示值不显示数据
【发布时间】：2017-07-27 09:39:40
【问题描述】：

对于登录用户，我创建了一个模式，当用户单击登录时，如果用户名或密码不正确，则返回 SignInStatus.Failure 没关系，但是页面刷新了，我的页面顶部只有“3”，没有任何想法

但我想在登录模式表单 ex="user name or password is not correct" 顶部显示消息，

我的代码在

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> _LoginPopup(LoginViewModel model, string returnUrl)
{
    if (!ModelState.IsValid)
    {
        return PartialView("ModalPopUp");
    }

    // This doesn't count login failures towards account lockout
    // To enable password failures to trigger account lockout, change to shouldLockout: true
    var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
    switch (result)
    {
        case SignInStatus.Success:
            MigrateShoppingCart(model.Email);
            return RedirectToLocal(returnUrl);
        case SignInStatus.LockedOut:
            return View("Lockout");
        case SignInStatus.RequiresVerification:
            return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
        case SignInStatus.Failure:
        default:
            ModelState.AddModelError("", "Invalid login attempt.");
            return Json(SignInStatus.Failure, JsonRequestBehavior.AllowGet);
    }
}

我的模型部分视图是

 @using (Html.BeginForm("_LoginPopup", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
        {
                @Html.AntiForgeryToken()
            <div id="failorLogin"></div>
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "password" })
                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.RememberMe, htmlAttributes: new { @class = "control-label col-md-8" })
                    <div class="col-md-4">
                        <div class="checkbox">
                            @Html.EditorFor(model => model.RememberMe)
                            @Html.ValidationMessageFor(model => model.RememberMe, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="pull-right col-md-3">
                        <input type="submit" id="btnLogin" value="Login" class="btn btn-default" style="background-color:#5d1338;color:white" />
                    </div>
                </div>

            }

和ajax代码是

$("#btnLogin").click(function (e) {
    e.defaultPrevented();
    $.ajax({
        url: '@Url.Action("../Account/_LoginPopup")',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        type: "POST",
        data: {
            model:model,
            "__RequestVerificationToken":
                $("input[name=__RequestVerificationToken]").val() 
        },
        success: function(data) {

            alert(data);

        }
    }); 
});

【问题讨论】：

标签： jquery json ajax asp.net-mvc login

【解决方案1】：

问题是因为尽管您正在发出 AJAX 请求，但 <form> 元素提交仍在发生。这反过来又取消了 AJAX 请求（当页面被卸载时），然后重定向到部分视图。这就是为什么您会在页面中看到唯一的3。

要解决此问题，请将您的事件挂钩到 <form> 元素的 submit 并调用 preventDefault()，如下所示：

$("form").submit(function(e) {
  e.preventDefault();
  $.ajax({
    url: this.action,
    type: this.method,
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    data: {
      model: model,
      "__RequestVerificationToken": $("input[name=__RequestVerificationToken]").val() 
    },
    success: function(data) {
      alert(data);
    }
  }); 
});

请注意，我在这里使用form 作为选择器，但我建议您在生产代码中使用更具体的内容。例如，id 选择器。

另请注意，您已指定 dataType: 'json'，但您的操作的大多数逻辑结果都会产生 HTML 响应。

【讨论】：