如何在服務器端的模態引導程序中進行驗證？

Question

我有一個Account控制器，當在引導程序模式中輸入錯誤的用戶名/密碼時，我希望它返回一條消息“無效的登錄嘗試”。 從ActionResult Login()到模態。

我的_loginPartialView：

<div id="loginModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Login</h4>
        </div>
        <div class="modal-body">
            <section id="loginForm">
                @using (Ajax.BeginForm("Login", "Account", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "loginModal" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div style="text-align:right;">
                        <button type="submit" class="btn btn-primary btn-sm">Submmit</button>
                    </div>
                }

            </section>
        </div>
    </div>
</div>

<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>
    $(document).ready(function () {
        $('.launchLoginModal').click(function () {
            $('#loginModal').modal({
                keyboard: false
            });
        });
    });   
</script>

我的Account管理員：

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{
    var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
    switch (result)
    {
        case SignInStatus.Failure:
        default:
            ModelState.AddModelError("", "Invalid login attempt.");
            return PartialView("_LoginModalPartial", model);
    }
}

Answer 1

我添加了關於此的評論，但它可能有助於您的解決方案。 聽起來表單提交上的無效輸入導致在空白頁面上重定向模態內容？ 由於模態是局部視圖，因此請嘗試將腳本移動到_loginPartialView的頂部。 對於您在布局頁面中使用的任何捆綁包，情況也是如此。

<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>
<div id="loginModal" class="modal fade">
       ...
</div>

Answer 2

• 首先，既然你正在使用@Ajax助手，你應該安裝並引用Microsoft jQuery Unobtrusive Ajax（你可以在這里找到一個較舊但仍然相關的指南： https ： //www.asp.net/mvc/overview/older-versions/創建一個mvc-3-application-with-razor-and-unobtrusive-javascript ）。

• 其次，您應該啟用客戶端驗證（請參閱指南）

• 第三，您需要將UpdateTargetId指定為要更新的現有DOM元素（我在代碼示例中沒有看到“loginModal”）。 我相信這個id應該在modal html代碼中，否則它將重新創建模態html並重置其狀態。 （我會在父視圖中移動模態定義，並讓部分僅包含表單定義）。

Answer 3

通常：

1. 修改控制器以返回登錄嘗試的JSON結果
2. 將提交按鈕設為常規按鈕，使其實際上不提交。
3. 使用JQuery構建JSON對象
4. 使用JQuery將JSON對象發布到控制器
5. 在你的AJAX中，檢查從控制器返回並相應地采取行動
6. 添加一個小div以供用戶反饋
7. remove ModelState.AddModelError("", "Invalid login attempt.");
8. 在你的控制器中，嘗試/捕獲你的邏輯，這樣它總是將JSON返回到模態的ajax。 處理那里的錯誤（見下文）

（顯然，你可以使用任何選擇，比如“成功”等等。）

你的剃刀可能看起來像：

 // on login button click
    $('#btnSubmit').on('click', function() {   
        $("#loginForm").validate(); // using jqueryvalidate
        if ($('#loginForm').valid()){                       // if valid, submit
            // Get values from Modal and put into JSON object mimicking correct model
        var token = $('input[name="__RequestVerificationToken"]').val(); // this is required for the anti-forgery decoration and must be structured outside the model to be submitted
        var model = {
            Email: $('#Email').val(),
            Password: $('#Password').val()
            };
        var ajaxData = {
            __RequestVerificationToken: token,
            model: model
        }
             // send
        $.ajax({
            type: "GET",
            url: '@Url.Action("method", "controller")',
            data: ajaxData,
            success: function (msg) {
                 // ajax success, but see if the login was a success
                 if (msg.IsError == 'true'{ all good} 
                 else { 
                       if (msg.Message != 'success'){
                            $('#UserFeedback').val('Invalid Login') 
                       }
                      }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.info(errorThrown);
                // userfeedback
                $('#UserFeedback').html(errorThrown);

                });
            }
        });
        }
    });

您的控制器可以返回自定義視圖模型，如：

public class LoginCheckViewModel
{       
    [DisplayName("IsError")]
    public string IsError {get; set;}

    [DisplayName("Message")]
    public string Message { get; set; }        
}

你的控制器會像你一樣檢查登錄，但然后返回

myLoginCheckViewModel = new LoginCheckViewModel();
myLoginCheckViewModel.IsError = [true/false];
myLoginCheckViewModel.Message = [success/fail];
return Json(myLoginCheckViewModel, JsonRequestBehavior.AllowGet);