Nonpacie
@Nonpacie

Как заменить отдельную страницу со своей моделью на модальное окно в уже готовой странице?

У меня еcть таблица с объектами введите сюда описание изображения
60ea321922407182284328.png
По кнопке удаления, я хочу удалить объект из БД. Но мне нужно подтвердить действие. Все отлично получается через переход после кнопки на отдельную страницу с отдельной моделью, но я решил что хочу сделать модальное окно(Взял из 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");
        }
    }
}
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 1
BasiC2k
@BasiC2k
Решаю проблемы за деньги. Дорого.
Смотрите документацию к bootstrap по модальным окнам. Там есть и хорошо задокументированные примеры.
Если кратко:
1. Создаёте кнопку, с параметрами (пример): data-bs-toggle="modal" data-bs-target="#exampleModal"
2. В конец html кода страницы вставляете div модального окна, имеющего соответствующий кнопке id="exampleModal" Пока кнопка из п.1 не нажата, div невидим.
3. При нажатии кнопки из п.1 , отображается модальное окно. Отправка запроса на контроллер производится при нажатии кнопки ОК в модальном окне.
Всё.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы