How to close Bootstrap modal in Blazor WASM?

Question

Hi,

In my Blazor WASM (.net 6) application, I am displaying a modal popup as follows.

<!-- Modal -->
<div class="modal fade bg-transparent" id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" 
     @ref="modalRef">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <form @onsubmit="SearchProducts" class="modal-content modal-body">
            <div class="input-group mb-2">
                <input type="text" class="form-control" id="inputModalSearch" @bind="searchTerm" placeholder="Search ...">
                <button type="submit" class="input-group-text bg-success text-light">
                    <i class="fa fa-fw fa-search text-white"></i>
                </button>
            </div>
        </form>
    </div>
</div>

I wonder how can I close the modal after retrieving Products?

private async Task SearchProducts()
{
    if (!string.IsNullOrWhiteSpace(searchTerm))
    {
        Products = await _productService.SearchProducts(searchTerm);        
    }
}

Can you please advise on how I can close the modal after retrieving the products?

Thank you!

Answer 1

you don't show the display code. typically you either remove the fade class, or add style="display:block;". you either add fade class or remove style.

note: the display should be done via Blazor code, not the bootstrap.js file (which you should not include with Blazor apps). the Blazor modal component should has a show property that is set by the parent component.

Answer 2

Can you please advise on how I can close the modal after retrieving the products?

How about:

(1) Add button like below to your modal and click it,

<button type="button" 
  class="btn btn-secondary" 
  data-bs-dismiss="modal">
  Close
</button>

or

(2) Use javascript mothods as shown below?

let divModal = document.getElementById('templatemo_search');
let myModal = new bootstrap.Modal(divModal);

myModal.show();

myModal.hide();

Answer 3

Hi @Cenk,

I suggest you create a small and reuseable ModalDialogComponent.

1.Create a component named ModalDialog.razor

<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @onclick="Close">
                </button>
            </div>
            <div class="modal-body">
                @ChildContent
            </div>
        </div>
    </div>
</div>
@if (showBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}
@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    private string modalDisplay = "none;";
    private string modalClass = string.Empty;
    private bool showBackdrop = false;
    public void Open()
    {
        modalDisplay = "block";
        modalClass = "show";
        showBackdrop = true;
    }
    public void Close()
    {
        modalDisplay = "none";
        modalClass = string.Empty;
        showBackdrop = false;
    }
}

2.Use the component in your main razor file

@page "/"
@inject ProductService _productService;

<button class="btn btn-primary" @onclick="() => ModalDialog.Open()">Click me!</button>
<ModalDialog @ref="@ModalDialog" Title="Hello World">
    <form @onsubmit="SearchProducts" class="modal-content modal-body">
        <div class="input-group mb-2">
            <input type="text" class="form-control" id="inputModalSearch" @bind="searchTerm" placeholder="Search ...">
            <button type="submit" class="input-group-text bg-success text-light">
                <i class="fa fa-fw fa-search text-white"></i>
            </button>
        </div>
    </form>
</ModalDialog>
@code {
    private ModalDialog ModalDialog { get; set; }
    private ElementReference modalRef;
    private string searchTerm;
    private List<Product> Products;
    private async Task SearchProducts()
    {
        if (!string.IsNullOrWhiteSpace(searchTerm))
        {
            Products = await _productService.SearchProducts(searchTerm);
            ModalDialog.Close();
        }
    }
   
}

If you do not want make the modal as a reuseable component, use the following code:

@page "/"
@inject ProductService _productService;
<button type="button" @onclick="() => Open()" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#templatemo_search">Search</button>
<div class="modal @modalClass" style="display:@modalDisplay; overflow-y: auto;"  id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
     @ref="modalRef">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <form @onsubmit="SearchProducts" class="modal-content modal-body">
            <div class="input-group mb-2">
                <input type="text" class="form-control" id="inputModalSearch" @bind="searchTerm" placeholder="Search ...">
                <button type="submit" class="input-group-text bg-success text-light">
                    <i class="fa fa-fw fa-search text-white"></i>
                </button>
            </div>
        </form>
    </div>
</div>
@code {
    private string modalDisplay = "none;";
    private string modalClass = string.Empty;
    private bool showBackdrop = false;
    private ElementReference modalRef;
    private string searchTerm;
    private List<Product> Products;
    public void Open()
    {
        modalDisplay = "block";
        modalClass = "show";
    }
    private async Task SearchProducts()
    {
        if (!string.IsNullOrWhiteSpace(searchTerm))
        {
            Products = await _productService.SearchProducts(searchTerm);
            modalDisplay = "none";
            modalClass = string.Empty;
        }
    }
   
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena