https://github.com/Behrouz-Goudarzi/AjaxTagHelper
AjaxTagHelper
Простое решение для использования ссылок и форм ajax с использованием Tag Helper в ядре aspnet
Сначала скопируйте класс AjaxTagHelper из папки Extensions в ваш проект.
Во-вторых, скопируйте файл AjaxTagHelper.js из папки js в wwwroot и добавьте его в свой проект.
Затем выполните следующие действия: Откройте файл viewImports и добавьте следующий код
@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper
Чтобы использовать Action Ajax, добавьте следующий код вместо тега.
<ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id"
class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
Delete
</ajax-action>
Используйте следующий код, чтобы использовать AJAX для отправки формы на сервер.
<div class="row">
<form id="frmCreate" class="col-sm-9">
<div class="row">
<div class="col-sm-4 form-control">
<input placeholder="Enter Name" name="Name" class="input-group" type="text" />
</div>
<div class="col-sm-4 form-control">
<input placeholder="Enter Family" name="Family" class="input-group" type="text" />
</div>
<div class="col-sm-4 form-control">
<input placeholder="Enter Email@site.com " name="Email" class="input-group" type="email" />
</div>
</div>
</form>
<div class="col-sm-3">
<ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
class="btn btn-sm btn-success">
Create
</ajax-button>
</div>
</div>
Наконец, добавьте скрипты, необходимые для его просмотра, проверьте код ниже
<script>
function SuccessCreate(data) {
console.log(data);
$("#tbodyPerson").append(data);
}
function SuccessDelete(data) {
$("#tr" + data.id).fadeOut();
}
</script>
<script src="~/js/AjaxHelper.js"></script>