Итак, я знаю, что мы можем выполнять ajax-запросы, используя $.ajax(), но в ASP.NET Core мы должны иметь возможность легко делать ajax-запросы через саму форму, используя вспомогательные теги. Я нашел этот сайт, объясняющий, как это сделать.
https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/
Однако. Когда я отправляю форму, она перенаправляет страницу, а не только выполняет запрос ajax.
Вот что я сделал:
Это содержимое файлов, которые я создал/изменил
Представления/Вход/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, и отображаются правильные данные.
@GaganDeep Только что попробовал. К сожалению, это не сработало
Проверьте консоль браузера на наличие ошибки при отправке формы.
@GaganDeep Нет ошибки. Всего 200 ответов. Я добавил небольшое редактирование, чтобы лучше понять, что происходит в данный момент.
Можете ли вы изменить имя своего метода onsuccess на onsuccesscall или что-то еще. Я знаю, что это предложение запрограммировано, но это случилось со мной однажды, если я правильно помню.
Кажется, что 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 скрипта, но я думаю, что эти скрипты не работали должным образом. Загрузка предоставленного вами файла решила мою проблему!
добавьте атрибут
[HttpPost]
к вашему методуSaveForm()
.