Question

我正在使用bootstrap模式对话框进行登录弹出，无法在模式对话框上的标签上显示错误。一切都很好，控制器被调用并验证用户凭据。从控制器发回json响应消息时出现问题，而不是在模态对话框上显示错误，它重定向到空白页面并在顶部显示json错误。请建议或建议。请不要发给我重复的问题链接我已经研究了很多。检查给定的代码，看看有什么不对。

部分视图：_signIn.cshtml

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true" 
 data-keyboard="false">
<div class="modal-dialog modal-sm">
          <div class="modal-content">
        <div class="modal-body">
            <!-- Row -->
            <div class="row">
                <h4>
                    <p class="text-xs-center">
                        Sign in to Photolab
                    </p>
                </h4>
            </div>

            <p class="text-xs-center">
                <span class="pi-or">or use your email address</span>
            </p>

            @using (Html.BeginForm("ValidateUser", "Account",  
 FormMethod.Post, new { Id = "signInForm" }))
            {

                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)

                <div class="row">
                    <div class="col-md-12 col-sm-10 col-xs-12">

                        <div class="modalbox">

                            <p>
                                <label id="lblMessage" class="small"></label>
                            </p>

                            <!-- Email form -->
                            <div class="form-group">
                                @Html.TextBoxFor(model => model.UserName, new { @class = "form-control form-control-round", @required = "required", @placeholder = "Email address", id = "signInEmail" })
                                @Html.ValidationMessageFor(model => model.UserName)
                            </div>
                            <!-- End email form -->
                            <!-- Password form -->
                            <div class="form-group">
                                @Html.TextBoxFor(model => model.Password, new { @class = "form-control form-control-round", @type = "Password", @placeholder = "Password", @required = "required" })
                            </div>
                            <!-- End password form -->

                            <p class="pull-right small">
                                <a href="#" id="forgotModal">
                                    Forgot password?
                                </a>
                            </p>

                            <div class="checkbox pull-left">
                                <label class="small">
                                    @Html.CheckBoxFor(model => model.RememberMe)Remember Me
                                </label>
                            </div>
                            <!-- Submit button -->
                            <div class="form-group-btn">
                                <button type="submit" id="btnSignIn" class="btn btn-primary btn-block">
                                    Sign In
                                </button>
                            </div>
                            <!-- End submit button -->

                        </div>
                        <!-- End box -->
                    </div>

                </div>

            }
            <!-- End row -->
        </div>
    </div>
    <div class="modal-footer">
        <p class="text-xs-center">
            Don't have Account? <a href="#" id="btnSignUp" class="flipLink">Sign Up</a>
        </p>
    </div>
</div>

JQuery：

<script>
$(function () {

    $('#btnSignIn').click(function () {

        var url = '@Url.Action("ValidateUser", "Account")';
        event.preventDefault();
        $.ajax({
            type: 'POST',
            cache:false,
            url: url,
            datatype:'json',
            data: $(this).serialize(),
            success: function (result) {
              if (result.success != true) {
                    lert(result.response);
                    $("#lblMessage").text("");
                    $("#lblMessage").append(result.response);
                }
                else
                {
                    alert(result.response);
                    window.location.href = result.response;
                }
            }
        });
    });
}

MVC AccountController.cs

  [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public ActionResult ValidateUser(LoginModel model, string returnUrl)
    {
        var result = new { success = "false", response = "Error Message" };

        try
        {
            var loginResult = _customerRegistrationService.ValidateCustomer(model.UserName, model.Password);

            switch (loginResult)
            {
                case LoginResult.Successful:
                    {
                        //_authenticationService.SignIn(model.UserName, model.Password, true);

                        ImplementFormsAuthentication(model.UserName);

                        result = new { success = "true", response = Url.Action("Listings", "Listing") };

                        return RedirectToAction("Listings", "Listing");

                        //break;

                    }
                case LoginResult.NotRegistred:

                    result = new { success = "false", response = "The user name or password provided is incorrect" };
                    break;
                case LoginResult.WrongPassword:
                    result = new { success = "false", response = "Incorrect Password" };
                    break;

                default:
                    result = new { success = "false", response = "Invalid username/password" };
                    break;
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }

        return Json(result, JsonRequestBehavior.AllowGet);
    }

_Layout.cshtml

 <li class="nav-item">
      <a href='#' id="btnLogin" class="nav-link active" data-toggle="modal" data-target="#signInModal">                                                    Login
                                            </a>
                                        </li>

Answer 1

您正在使用按钮类型提交。所以它重定向到空白页面。使用按钮类型按钮，这样就不会将表单发布到空白页面。

<button type="button" id="btnSignIn" class="btn btn-primary btn-block">
       Sign In
</button>

在bootstrap模式上显示登录验证错误弹出不起作用

1 个答案: