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

Итак, я знаю, что мы можем выполнять 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, поэтому я могу просто упустить что-то очевидное.

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

добавьте атрибут [HttpPost] к вашему методу SaveForm().

Gagan Deep 12.03.2019 13:34

@GaganDeep Только что попробовал. К сожалению, это не сработало

Robin van den Hurk 12.03.2019 14:35

Проверьте консоль браузера на наличие ошибки при отправке формы.

Gagan Deep 12.03.2019 14:38

@GaganDeep Нет ошибки. Всего 200 ответов. Я добавил небольшое редактирование, чтобы лучше понять, что происходит в данный момент.

Robin van den Hurk 12.03.2019 14:44

Можете ли вы изменить имя своего метода onsuccess на onsuccesscall или что-то еще. Я знаю, что это предложение запрограммировано, но это случилось со мной однажды, если я правильно помню.

Gagan Deep 12.03.2019 14:51
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
5
3 014
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кажется, что jquery.validate.unobtrusive.min.js, который вы процитировали, не работает.

Я сделал тестовую демонстрацию, и она работала хорошо. Я использовал Microsoft.jQuery.Unobtrusive.Ajax версии 3.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

Это сработало! Сначала я сделал это с помощью пакета NuGet и следовал руководству. Мне пришлось добавить 2 скрипта, но я думаю, что эти скрипты не работали должным образом. Загрузка предоставленного вами файла решила мою проблему!

Robin van den Hurk 13.03.2019 12:56

Другие вопросы по теме