ASP. NET MVC - Использование Ajax с Jquery для входа

Question

Мне нужно изменить свой метод и представление входа в систему для получения AJAX запросов.

Как мне поступить, нажав кнопку отправки, вызов контроллера, выполнение проверок и последующую отправку этой информации?

Ответы, которые я нашел, не очень помогли для этого решения.

Сейчас я начинаю работать с Jquery, но я никогда не использовал ajax запросов

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{

    ISecurityContext contextoCA = ISecurityContext.GetContext();
    contextoCA.UserAuthenticator.Logon(model.Email, model.Password);

    User ActualUser= ISecurityContext.GetContext().CurrentLoggedUser;

    IApplicationEnvironmentAuthorizer environmentAuthorizer= contextoCA.ApplicationEnvironmentAuthorizer;

    bool hasAuthorization= environmentAuthorizer.HasAnyAuthorization();


    if (Request.Browser.Browser == "InternetExplorer")
    {
        ModelState.AddModelError("", "IE is not Supported");
    }

    if (!ModelState.IsValid)
    {
        return View(model);
    }            
    if (ActualUser== null)
    {
        ModelState.AddModelError("", "User not Found.");

    }
    if (!hasAuthorization)
    {
        ModelState.AddModelError("", "No authorization profile configured for this user.");
    }
    else
    {                
            return RedirectToAction("Index", "Home");               
    }

        return View(model);
}

Вид

@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group" style="padding-top: 10px;">
    <div class="input-group mb-4">
        <span class="input-group-text"><i class="fa fa-user"></i> </span> @Html.TextBoxFor(m => m.Email, new { placeholder = "Email", @class = "form-control col" })
        <div class="col-md-12">
            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="input-group mb-4">
        <div class="input-group">
            <span class="input-group-text" style="padding-left:15px"><i class="fa fa-unlock-alt"></i> </span> @Html.PasswordFor(m => m.Password, new { placeholder = "Senha", @class = "form-control" })
            <div class="col-12">
                @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="checkbox">
        @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe)
    </div>
</div>
@*
<div class="form-group col-sm-7 " id="padding">
    <button type="submit" value="Entrar" class="btn btn-primary btn-sm btn-block">Entrar</button>
</div>*@
<div class="d-flex justify-content-center mt-3 login_container">
    <button type="submit" value="Entrar" name="button" id="test" class="btn login_btn">Entrar</button>
</div>
}

Answer 1

Вы смотрели на расширение формы Ajax в MVC?

 @using (Ajax.BeginForm(actionName: "Login", 
                        controllerName: "Account", 
                        routeValues: null,
                        ajaxOptions: new AjaxOptions
                        {
                            HttpMethod = "POST",
                            OnFailure = "some JavaScript function",
                            OnSuccess = "some JavaScript function"
                        },
                        htmlAttributes:  new { @class = "form-horizontal", role = "form" }
            ))
        {
                     {
            @Html.AntiForgeryToken()

            //HTML FORM goes here.
        }

Вам также необходимо установить jQuery ненавязчивый ajax плагин и ссылку это, на ваш взгляд, работает выше.

Answer 2

Прежде всего, решение очень просто .

Шаг 1:

Создайте форму входа

Шаг 2:

Отправьте форму, используя ajax.

Шаг 3:

Подтвердите пользователя и отправьте ответ.

Шаг 4:

Используйте этот ответ на ajax, чтобы перенаправить пользователя на нужную страницу.

Это простой пример, не лучшая практика для использования в производстве.

<script>
$('form').submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "path to controler method",
        data: "form data", //form.serialize() or custom data
        success: function(response){
            console.log(response);
            window.location.href = "desired page url";
        }
    });
}

</script>

Пожалуйста, дайте мне знать, если вам нужно больше объяснений на мой ответ.