Как я могу вернуть bootstrap модальное как частичное представление при нажатии кнопки?

Question

Я пытаюсь показать модальное всплывающее окно, когда пользователь нажимает кнопку, и я хочу визуализировать модальное изображение из контроллера. _BookNow.cs html

@model Booking

 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Hello Lets Book Now</h4>
        </div>
        <div class="modal-body">

          <form asp-action="BookNow" asp-controller="Booking" method="POST">
           .......
          </form>

        </div>
      </div>
   </div>
 </div>

My Controller Action

      [HttpGet]
     public async Task<IActionResult> BookNow(int vId)
    {
        ViewBag.venueId = vId;
        return PartialView("_BookNow");
    }

Я хочу, чтобы модал появлялся на странице сведений при использовании нажатия кнопки BookNow Details.cs html

<a asp-controller="Booking" asp-action="BookNow" asp-route-vId="@Model.Venue.Id">
                    <div class="btn btn-primary btn-book"> <i class="fa fa-shopping-cart"></i> 
                     @(Model.IsBooked? "Booked" : "Book Now")
                    </div>
</a>

Answer 1

Вы можете использовать Microsoft.AspNetCore.Mvc.ViewComponent, см. https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.1

Вы можете попробовать это:

Представления / Бронирование / Компоненты / BookNow / BookNowViewComponent. cs

    public class BookNowViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(int vId)
        {
            ViewBag.venueId = vId;
            return View();
        }
    }

Представления / Бронирование / Компоненты / BookNow / Default.cs html

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Hello Lets Book Now</h4>
            </div>
            <div class="modal-body">

                <form asp-action="BookNow" asp-controller="Booking" method="POST">
                    .......
                </form>

            </div>
        </div>
    </div>
</div>

Details.cs html

<button type="button" data-toggle="modal" data-target="#myModal">Book Now</button>

@await Component.InvokeAsync("BookNow", new { vId = Model.Venue.Id })