Ajax-запрос через форму в ASP.NET Core

Question

Итак, я знаю, что мы можем выполнять ajax-запросы, используя $ .ajax (), но в ASP.NET Core мы должны быть в состоянии легко сделать ajax-запрос через саму форму, используя помощники тегов. Я нашел этот сайт, объясняющий, как это сделать.

https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/

Тем не менее. Когда я отправляю форму, она перенаправляет страницу, а не только выполняет запрос ajax.

Вот что я сделал:

1. Я создал новое веб-приложение ASP.NET Core
2. Выбранный тип MVC
3. Добавлен пакет Microsoft.jQuery.Unobtrusive.Ajax через NuGet
4. Добавлен новый контроллер MVC (Controllers / LoginController.cs)
5. Добавлен новый вид (Views / Login / Index.cshtml)
6. Добавлены скрипты в _layout.cshtml

Это содержимое файлов, которые я создал / изменил
Просмотров / Логин / Index.cshtml:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<form asp-controller="Login" asp-action="SaveForm"
      data-ajax-begin="onBegin" data-ajax-complete="onComplete"
      data-ajax-failure="onFailed" data-ajax-success="onSuccess"
      data-ajax="true" data-ajax-method="POST">
    <input type="submit" value="Save" class="btn btn-primary" />
</form>

<script>
    var onBegin = function () {
        alert("Begin");
    };

    var onComplete = function () {
        alert("Complete");
    };

    var onSuccess = function(context){
        alert(context);
    };

    var onFailed = function(context){
        alert(context);
    };
</script>

Контроллеры / LoginController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace AspTest.Controllers
{
    public class LoginController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        // I also tried making this async, but this didn't help
        public IActionResult SaveForm()
        {
            return Json(new { test = "this is a test" });
        }
    }
}

Часть, которую я изменил в Views / Shared / _Layout.cshtml

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
</environment>

(добавлены два сценария проверки jquery)

Я хотел бы обновить содержимое моей страницы без обновления страницы. Например, отобразить сообщение об ошибке, когда пользователь пытается войти с неверными учетными данными, не обновляя всю страницу.

У меня совсем нет опыта работы с ASP.NET, поэтому я могу просто упустить что-то очевидное.

Edit: Стоит отметить, что при перенаправлении страницы она перенаправляется в / Login / SaveForm, и отображаются правильные данные.

Answer 1

Кажется, что jquery.validate.unobtrusive.min.js, который вы указали, не работает. Я сделал тестовую демонстрацию, и она сработала хорошо. Я использовал Microsoft.jQuery.Unobtrusive.Ajax V3.2.6.

Сценарии jquery.unobtrusive-ajax, которые я использовал в _layout.cshtml

 <environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/lib/jquery/dist/jquery.unobtrusive-ajax.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

Вы можете скачать jquery.validate.unobtrusive.js с здесь и добавить его в свой wwwroot / lib / jquery / dist