How can i return bootstrap modal as partial view on button click?

Question

I am trying to show a modal popup when user clicks on a button and i want to render the modal from controller. _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>

My Controller Action

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

I want to get the modal appear in details page when use clicks BookNow button 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>

rjs123431 · Accepted Answer · 2020-03-04 12:41:57Z

2

You can use Microsoft.AspNetCore.Mvc.ViewComponent, see https://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.1

You can try this:

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

answered Mar 4, 2020 at 12:41

rjs123431

6884 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MADMAX Over a year ago

Thanks ma that helped me, but is there any other way to load modal from server in my details view only after the booknow button is clicked?.

rjs123431 Over a year ago

Glad it helped. You can do it via ajax get on button click, and call .modal('show')

Collectives™ on Stack Overflow

How can i return bootstrap modal as partial view on button click?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related