How to replace a separate page with your model with a modal window in an already finished page?

Question

ASP.NET

I have a table with objects enter image description here

On the delete button, I want to delete an object from the database. But I need to confirm the action. Everything works fine through the transition after the button to a separate page with a separate model, but I decided that I want to make a modal window (I took it from Bootstrap). If multiple, then I want to understand how this can be done, what to google, and so on. I tried to do PartialAsync("DeletePage") where my view was with a modal window and a model, but I got an error that the page with the table does not know anything about the model of the modal window.

I tried to explain my goal as clearly as possible, but I'm afraid that questions may arise, so I'll be happy to answer to clarify anything)

PS The code that works with a separate page now

//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");
        }
    }
}

Answer 1

See the bootstrap documentation for modal windows. There are also well-documented examples.
In short:
1. Create a button with parameters (example): data-bs-toggle="modal" data-bs-target="#exampleModal"
2. At the end of the html code of the page, insert a div of the modal window that has the corresponding id= button "exampleModal" Until the button from step 1 is pressed, the div is invisible.
3. When you click the button from step 1, a modal window is displayed. The request is sent to the controller when the OK button is pressed in the modal window.
Everything.