如何在单击按钮时返回引导模式作为部分视图

Question

当用户点击按钮时，我试图显示一个模式弹出窗口，并且我想从控制器呈现模式。_BookNow.chtml

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

我想在使用时单击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://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.1

你可以试试这个：

视图/预订/组件/BookNow

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

视图/预订/组件/BookNow

<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 })