Events-MVC (example with htmx)
This commit is contained in:
Boris Milašinović
38
Events-MVC/Events.MVC/Views/People/Index.cshtml
Normal file
38
Events-MVC/Events.MVC/Views/People/Index.cshtml
Normal file
@@ -0,0 +1,38 @@
|
||||
@model Events.MVC.Models.People.PeoplePageViewModel
|
||||
|
||||
@{
|
||||
ViewData[Constants.ViewDataKeys.Title] = "People";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New person";
|
||||
ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-person-panel";
|
||||
}
|
||||
|
||||
<div class="d-flex flex-column gap-4">
|
||||
<section id="create-person-panel" class="collapse">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 mb-3">Add a new person</h2>
|
||||
<div id="create-person-form">
|
||||
<partial name="_CreatePersonForm" model='(Events.MVC.Models.People.PersonViewModel)ViewData[Constants.ViewDataKeys.CreatePersonModel]!' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<partial name="_PeopleList" model="Model" />
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.PersonCreated)), function () {
|
||||
var form = document.querySelector("#create-person-form form");
|
||||
if (form) {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
var panel = document.getElementById("create-person-panel");
|
||||
if (panel && window.bootstrap) {
|
||||
bootstrap.Collapse.getOrCreateInstance(panel).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
84
Events-MVC/Events.MVC/Views/People/_CreatePersonForm.cshtml
Normal file
84
Events-MVC/Events.MVC/Views/People/_CreatePersonForm.cshtml
Normal file
@@ -0,0 +1,84 @@
|
||||
@model Events.MVC.Models.People.PersonViewModel
|
||||
|
||||
<form
|
||||
asp-action="Create"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Create", "People")"
|
||||
hx-include="#people-state"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger small mb-3"></div>
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstName" class="form-label"></label>
|
||||
<input asp-for="FirstName" class="form-control" />
|
||||
<span asp-validation-for="FirstName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastName" class="form-label"></label>
|
||||
<input asp-for="LastName" class="form-control" />
|
||||
<span asp-validation-for="LastName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstNameTranscription" class="form-label"></label>
|
||||
<input asp-for="FirstNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="FirstNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastNameTranscription" class="form-label"></label>
|
||||
<input asp-for="LastNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="LastNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="Email" class="form-label"></label>
|
||||
<input asp-for="Email" class="form-control" />
|
||||
<span asp-validation-for="Email" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="ContactPhone" class="form-label"></label>
|
||||
<input asp-for="ContactPhone" class="form-control" />
|
||||
<span asp-validation-for="ContactPhone" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="BirthDate" class="form-label"></label>
|
||||
<input asp-for="BirthDate" type="date" class="form-control" />
|
||||
<span asp-validation-for="BirthDate" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="CountryCode" class="form-label"></label>
|
||||
<select asp-for="CountryCode" asp-items="Model.CountryOptions" class="form-select">
|
||||
<option value="">Select a country</option>
|
||||
</select>
|
||||
<span asp-validation-for="CountryCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="DocumentNumber" class="form-label"></label>
|
||||
<input asp-for="DocumentNumber" class="form-control" />
|
||||
<span asp-validation-for="DocumentNumber" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="AddressLine" class="form-label"></label>
|
||||
<input asp-for="AddressLine" class="form-control" />
|
||||
<span asp-validation-for="AddressLine" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="PostalCode" class="form-label"></label>
|
||||
<input asp-for="PostalCode" class="form-control" />
|
||||
<span asp-validation-for="PostalCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="City" class="form-label"></label>
|
||||
<input asp-for="City" class="form-control" />
|
||||
<span asp-validation-for="City" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="AddressCountry" class="form-label"></label>
|
||||
<input asp-for="AddressCountry" class="form-control" />
|
||||
<span asp-validation-for="AddressCountry" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-sm-auto">
|
||||
<button type="submit" class="btn btn-primary">Add person</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
150
Events-MVC/Events.MVC/Views/People/_PeopleList.cshtml
Normal file
150
Events-MVC/Events.MVC/Views/People/_PeopleList.cshtml
Normal file
@@ -0,0 +1,150 @@
|
||||
@model Events.MVC.Models.People.PeoplePageViewModel
|
||||
|
||||
<section class="card border-0 shadow-sm" id="people-list">
|
||||
<div class="card-body">
|
||||
<div id="people-state" class="d-none">
|
||||
<input type="hidden" name="page" value="@Model.People.PagingInfo.CurrentPage" />
|
||||
<input type="hidden" name="pageSize" value="@Model.People.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />
|
||||
<input type="hidden" name="countryFilter" value="@Model.CountryFilter" />
|
||||
</div>
|
||||
|
||||
<form
|
||||
asp-action="Index"
|
||||
method="get"
|
||||
class="d-flex justify-content-between align-items-start gap-3 flex-wrap flex-lg-nowrap mb-4"
|
||||
hx-get="@Url.Action("Index", "People")"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
onsubmit="var input=this.querySelector('[data-name-filter-input]'); var country=this.querySelector('[name=countryFilter]'); var filters=this.querySelector('[name=filters]'); var values=[]; if (input && input.value.trim()) { values.push('FullNameTranscription' + String.fromCharCode(64) + '=*' + input.value.trim()); } if (country && country.value) { values.push('CountryCode==' + country.value); } filters.value=values.join(','); this.querySelector('[name=page]').value='1';">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="pageSize" value="@Model.People.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />
|
||||
|
||||
<div class="d-flex align-items-center gap-3 pt-2">
|
||||
<h2 class="h5 mb-0">People list</h2>
|
||||
<span class="badge text-bg-light">@(Model.People.PagingInfo.IsFiltered ? $"{Model.People.PagingInfo.FilteredItemsCount} / {Model.People.PagingInfo.TotalItemsCount}" : Model.People.PagingInfo.TotalItemsCount.ToString())</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
||||
<input
|
||||
id="personNameFilter"
|
||||
value="@Model.People.PagingInfo.NameFilter"
|
||||
data-name-filter-input
|
||||
class="form-control"
|
||||
style="max-width: 18rem;"
|
||||
placeholder="Search by transcribed full name"
|
||||
aria-label="Filter by transcribed full name" />
|
||||
|
||||
<select name="countryFilter" asp-items="Model.CountryOptions" class="form-select" style="max-width: 14rem;" aria-label="Filter by country">
|
||||
<option value="">All countries</option>
|
||||
</select>
|
||||
|
||||
<button type="submit" class="btn btn-outline-primary">Filter</button>
|
||||
@if (Model.People.PagingInfo.IsFiltered)
|
||||
{
|
||||
<a
|
||||
asp-action="Index"
|
||||
asp-route-page="1"
|
||||
asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.People.PagingInfo.Sorts"
|
||||
asp-route-filters=""
|
||||
class="btn btn-outline-secondary"
|
||||
hx-get="@Url.Action("Index", "People", new { page = 1, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.Sorts, filters = string.Empty })"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true">
|
||||
Clear
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("Id")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("Id"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
ID@(Model.People.PagingInfo.IsSortedBy("Id") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("FirstNameTranscription")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("FirstNameTranscription"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
First name@(Model.People.PagingInfo.IsSortedBy("FirstNameTranscription") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("LastNameTranscription")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("LastNameTranscription"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Last name@(Model.People.PagingInfo.IsSortedBy("LastNameTranscription") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th></th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("BirthDate")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("BirthDate"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Birth date@(Model.People.PagingInfo.IsSortedBy("BirthDate") ? (Model.People.PagingInfo.IsDescending() ? " v" : " ^") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("CountryName")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("CountryName"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Country@(Model.People.PagingInfo.IsSortedBy("CountryName") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a asp-action="Index" asp-route-page="@Model.People.PagingInfo.CurrentPage" asp-route-pageSize="@Model.People.PagingInfo.ItemsPerPage" asp-route-sorts="@Model.People.PagingInfo.ToggleSort("RegistrationsCount")" asp-route-filters="@Model.People.PagingInfo.Filters" class="link-dark link-underline-opacity-0" hx-get="@Url.Action("Index", "People", new { page = Model.People.PagingInfo.CurrentPage, pageSize = Model.People.PagingInfo.ItemsPerPage, sorts = Model.People.PagingInfo.ToggleSort("RegistrationsCount"), filters = Model.People.PagingInfo.Filters })" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
Registrations@(Model.People.PagingInfo.IsSortedBy("RegistrationsCount") ? (Model.People.PagingInfo.IsDescending() ? " ↓" : " ↑") : "")
|
||||
</a>
|
||||
</th>
|
||||
<th class="text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (Model.People.Data.Count == 0)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="8" class="text-body-secondary">No people to display.</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var person in Model.People.Data)
|
||||
{
|
||||
<partial name="_PersonRow" model="person" />
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mt-4 gap-3 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<small class="text-body-secondary">Page @Model.People.PagingInfo.CurrentPage of @Model.People.PagingInfo.TotalPages</small>
|
||||
<form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2" hx-get="@Url.Action("Index", "People")" hx-target="#people-list" hx-swap="outerHTML" hx-push-url="true">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="sorts" value="@Model.People.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="filters" value="@Model.People.PagingInfo.Filters" />
|
||||
<select name="pageSize" class="form-select form-select-sm" style="width: auto;" aria-label="Items per page" onchange="this.form.requestSubmit()">
|
||||
@{
|
||||
int[] pageSizeOptions = [10, 20, 50, 100];
|
||||
}
|
||||
@foreach (var option in pageSizeOptions)
|
||||
{
|
||||
<option value="@option" selected="@(Model.People.PagingInfo.ItemsPerPage == option)">@option</option>
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<pager
|
||||
page-info="@Model.People.PagingInfo"
|
||||
page-action="Index"
|
||||
page-title="Enter a page number and press Enter"
|
||||
page-target="#people-list"
|
||||
page-swap="outerHTML"
|
||||
page-push-url="true">
|
||||
</pager>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
100
Events-MVC/Events.MVC/Views/People/_PersonEditRow.cshtml
Normal file
100
Events-MVC/Events.MVC/Views/People/_PersonEditRow.cshtml
Normal file
@@ -0,0 +1,100 @@
|
||||
@model Events.MVC.Models.People.PersonViewModel
|
||||
|
||||
<tr id="person-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td colspan="7">
|
||||
<form
|
||||
asp-action="Edit"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
hx-post="@Url.Action("Edit", "People", new { id = Model.Id })"
|
||||
hx-target="#person-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
@Html.AntiForgeryToken()
|
||||
<input asp-for="Id" type="hidden" />
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger small mb-2"></div>
|
||||
<div class="row g-2 align-items-start">
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstName" class="form-label"></label>
|
||||
<input asp-for="FirstName" class="form-control" />
|
||||
<span asp-validation-for="FirstName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastName" class="form-label"></label>
|
||||
<input asp-for="LastName" class="form-control" />
|
||||
<span asp-validation-for="LastName" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="FirstNameTranscription" class="form-label"></label>
|
||||
<input asp-for="FirstNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="FirstNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="LastNameTranscription" class="form-label"></label>
|
||||
<input asp-for="LastNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="LastNameTranscription" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="Email" class="form-label"></label>
|
||||
<input asp-for="Email" class="form-control" />
|
||||
<span asp-validation-for="Email" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="ContactPhone" class="form-label"></label>
|
||||
<input asp-for="ContactPhone" class="form-control" />
|
||||
<span asp-validation-for="ContactPhone" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="BirthDate" class="form-label"></label>
|
||||
<input asp-for="BirthDate" type="date" class="form-control" />
|
||||
<span asp-validation-for="BirthDate" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="CountryCode" class="form-label"></label>
|
||||
<select asp-for="CountryCode" asp-items="Model.CountryOptions" class="form-select">
|
||||
<option value="">Select a country</option>
|
||||
</select>
|
||||
<span asp-validation-for="CountryCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="DocumentNumber" class="form-label"></label>
|
||||
<input asp-for="DocumentNumber" class="form-control" />
|
||||
<span asp-validation-for="DocumentNumber" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="AddressLine" class="form-label"></label>
|
||||
<input asp-for="AddressLine" class="form-control" />
|
||||
<span asp-validation-for="AddressLine" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label asp-for="PostalCode" class="form-label"></label>
|
||||
<input asp-for="PostalCode" class="form-control" />
|
||||
<span asp-validation-for="PostalCode" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="City" class="form-label"></label>
|
||||
<input asp-for="City" class="form-control" />
|
||||
<span asp-validation-for="City" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="AddressCountry" class="form-label"></label>
|
||||
<input asp-for="AddressCountry" class="form-control" />
|
||||
<span asp-validation-for="AddressCountry" class="text-danger small"></span>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Save</button>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
hx-get="@Url.Action("Row", "People", new { id = Model.Id })"
|
||||
hx-target="#person-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
37
Events-MVC/Events.MVC/Views/People/_PersonRow.cshtml
Normal file
37
Events-MVC/Events.MVC/Views/People/_PersonRow.cshtml
Normal file
@@ -0,0 +1,37 @@
|
||||
@model Events.MVC.Models.People.PersonViewModel
|
||||
|
||||
<tr id="person-@Model.Id">
|
||||
<td>@Model.Id</td>
|
||||
<td>@Model.FirstNameTranscription</td>
|
||||
<td>@Model.LastNameTranscription</td>
|
||||
<td>@Model.FullName</td>
|
||||
<td>@Model.BirthDate?.ToString("dd.MM.yyyy.")</td>
|
||||
<td>@Model.CountryName</td>
|
||||
<td>@Model.RegistrationsCount</td>
|
||||
<td class="text-end">
|
||||
<div class="d-inline-flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
hx-get="@Url.Action("EditRow", "People", new { id = Model.Id })"
|
||||
hx-target="#person-@Model.Id"
|
||||
hx-swap="outerHTML">
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<form
|
||||
asp-action="Delete"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
class="d-inline"
|
||||
hx-post="@Url.Action("Delete", "People", new { id = Model.Id })"
|
||||
hx-include="#people-state"
|
||||
hx-target="#people-list"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Delete person '@Model.FullName'?">
|
||||
@Html.AntiForgeryToken()
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
Reference in New Issue
Block a user