Как я могу проверить в модальном бутстрапе со стороны сервера?

У меня есть контроллер 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);
    }
}

Ответ 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>

Ответ 2

  • Во-первых, поскольку вы используете помощники @Ajax, вы должны установить и ссылаться на Microsoft jQuery Unobtrusive Ajax (здесь вы можете найти более старое, но все же уместное руководство: https://www.asp.net/mvc/overview/older-versions/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript).

  • Во-вторых, вы должны включить проверку на стороне клиента (см. руководство)

  • В-третьих, вам нужно указать в качестве UpdateTargetId существующий элемент DOM для обновления (я не вижу "loginModal" в образце кода). Я считаю, что этот идентификатор должен находиться внутри модального html-кода, иначе он будет воссоздавать модальный html и reset его статус. (Я бы переместил модальное определение в родительском представлении и дал частичное только определение формы).

Ответ 3

В общем:

  • Измените свой контроллер, чтобы вернуть результаты попытки входа в систему JSON.
  • Сделать отправкой кнопки на нее обычной кнопкой, чтобы она фактически не отправлялась.
  • Использование JQuery для создания объекта JSON
  • Используйте JQuery для отправки POST этого объекта JSON на ваш контроллер.
  • В своем AJAX проверьте возврат с контроллера и действуйте соответственно.
  • Добавьте небольшой div для отзывов пользователей
  • удалить ModelState.AddModelError("", "Invalid login attempt.");
  • В вашем контроллере попробуйте/поймайте свою логику, чтобы он всегда возвращал 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);