У меня еcть таблица с объектами введите сюда описание изображения
По кнопке удаления, я хочу удалить объект из БД. Но мне нужно подтвердить действие. Все отлично получается через переход после кнопки на отдельную страницу с отдельной моделью, но я решил что хочу сделать модальное окно(Взял из Bootstrap). Если кратно, то хочу понять как это можно сделать, что гуглить, и тд. Я пробовал сделать PartialAsync("DeletePage") где было моё представление с модальным окном и моделью, но получил ошибку что на странице с таблицей ничего не известно про модель модального окна.
Постарался максимально внятно объяснить мою цель, но боюсь что могут возникать вопросы, по-этому буду рад ответить чтобы уточнить что-либо)
P.S. Тот код который работает с отдельной страницей сейчас
//CODE List.cshtml:
@model ASPRestaurants.Pages.Restaurants.ListModel
@{
ViewData["Title"] = "List";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<div>
<form method="get" class="">
<div class="form-group">
<div class="input-group mt-4">
<input name="searchTerm" placeholder="What are you looking for?" type="search" class="form-control border-0 shadow box-shadow" asp-for="SearchTerm"/>
<span class="input-group-btn">
<button class="btn btn-outline-primary border-0 ms-2 shadow box-shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
</span>
</div>
</div>
</form>
<div class="mt-4 mb-4">
<table class="table table-borderless table-hover rounded box-shadow shadow">
<thead >
<tr class="shadow-sm box-shadow">
<th scope="col">Name</th>
<th scope="col">Location</th>
<th scope="col">Cuisine</th>
</tr>
</thead>
@foreach (var restaurants in Model.Restaurants)
{
<tr class="rounded">
<td>
<a asp-page="./Details" asp-route-restaurantId="@restaurants.Id" class="link-primary text-decoration-none fw-bold m-2">
@restaurants.Name
</a>
</td>
<td>@restaurants.Location</td>
<td>@restaurants.Cuisine</td>
<td class="text-center td-button" style="width: 16px">
<a asp-page="./Edit" asp-route-restaurantId="@restaurants.Id" class="btn btn-sm btn-outline-primary m-1 border-0 shadow box-shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</svg>
</a>
</td>
<td class="text-center td-button" style="width: 16px">
<a asp-page="./Delete" asp-route-restaurantId="@restaurants.Id" class="btn btn-sm btn-outline-primary m-1 border-0 shadow box-shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
</a>
</td>
</tr>
}
</table>
</div>
<a asp-page="./Edit" class="btn btn-primary">Add New</a>
</div>
//CODE Delete.cshtml:
@page "{restaurantId}"
@model ASPRestaurants.Pages.Restaurants.DeleteModel
@{
ViewData["Title"] = "Delete";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h2>Delete!</h2>
<div class="alert alert-danger">
Are you sure you want to delete @Model.Restaurant.Name?
</div>
<form method="post">
<button type="submit" class="btn btn-danger">Yes!</button>
<a asp-page="List" class="btn btn-primary" data-bs-dismiss="modal">Cancel</a>
</form>
<!-- Modal -->
@*<div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-static">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to delete @Model.Restaurant.Name?
</div>
<div class="modal-footer">
<form method="post">
<button type="submit" class="btn btn-danger">Yes!</button>
<a asp-page="List" class="btn btn-primary" data-bs-dismiss="modal">Cancel</a>
</form>
</div>
</div>
</div>
</div>*@
//CODE Delete.cshtml.cs:
using ASPRestaurants.Core;
using ASPRestaurants.Data;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace ASPRestaurants.Pages.Restaurants
{
public class DeleteModel : PageModel
{
private readonly IRestaurantData _restaurantData;
public DeleteModel(IRestaurantData restaurantData)
{
_restaurantData = restaurantData;
}
public Restaurant Restaurant { get; set; }
public IActionResult OnGet(int restaurantId)
{
Restaurant = _restaurantData.GetById(restaurantId);
if (Restaurant == null) RedirectToPage("./NotFound");
return Page();
}
public IActionResult OnPost(int restaurantId)
{
var restaurant = _restaurantData.Delete(restaurantId);
_restaurantData.Commit();
if (restaurant == null) RedirectToPage("./NotFound");
TempData["Message"] = $"{restaurant?.Name} deleted";
return RedirectToPage("./List");
}
}
}
