我如何 return bootstrap 模态作为按钮单击时的局部视图？

Question

我试图在用户单击按钮时显示模态弹出窗口，并且我想从控制器呈现模态。 _BookNow.cshtml

@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>

我的控制器操作

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

我想在使用点击立即预订按钮时让模态出现在详细信息页面中 Details.cshtml

<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

你可以试试这个：

Views/Booking/Components/BookNow/BookNowViewComponent.cs

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

Views/Booking/Components/BookNow/Default.cshtml

<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.cshtml

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

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