Create Custom Modal Component Using Bootstrap in Blazor

This blog will show you how to create Confirmation Modal Dialog in blazor without using any third party. I am using the Microsoft scaffold application for this post, which includes bootstrap by default.
We are going to build the following things. As you can see in the next image, with the click of the delete button, I am opening a modal dialog. When the user clicks the Delete button, contact is removed, and when the user clicks cancel, it closes the modal without deleting the record.

Let’s start with the coding. I have created a ModalDialog.razor page in the Pages folder and added the bootstrap modal dialog with variables like ModalDisplay and ModalClass to control the behaviour of the modal. We will set the variable from the C# code based on the button. For example, we will assign the ModalDisplay property to the block when we want to show the Modal.

Pages/ModalDialog.razor

<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete Contact</h5>
        <button type="button" class="close" data-dismiss="modal" @onclick="() => Close()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>@ChildContent</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" @onclick="Delete">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
      </div>
    </div>
  </div>
</div>

@code {
  public string ModalDisplay = "none;";
  [Parameter]
  public string Name{get;set;}
  [Parameter]
  public EventCallback<string> OnDelete {get;set;}
  public string ModalClass = "";
  public bool ShowModal {
    get;
    set;
  }
  [Parameter]
  public string ChildContent {
    get;
    set;
  }
  public async Task Delete()
  {
    await OnDelete.InvokeAsync(Name);
  }
  public void Close()
  {
    ModalDisplay = "none";
    ModalClass = "";
    StateHasChanged();
  }
  public void Show()
  {
    ModalDisplay = "block;";
    ModalClass = "Show";
    StateHasChanged();
  }
}

Most of the code is self-explanatory and executes the EventCallBack. We are exposing event callback so that the parent component subscribes to the event.

Then I created a ContactList component referring to the ModalDialog component, as shown below.

Pages/ContactList.razor

@using Models

<h4>Contact List</h4>
<table>
    <thead>
        <th>Name</th>
        <th>Email</th>
    </thead>
    <tbody>
        @foreach (var item in contacts!)

        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Email</td>
                <button @onclick= "@(()=>OnConfirm(item.Name))">Delete</button>
            </tr>



        }
    </tbody>
</table>
<ModalDialog OnDelete="DeleteContact" @ref="modalDialog"></ModalDialog>

@code {

    private ModalDialog modalDialog;
    private bool showContacts = true;
    private List<Contact>? contacts = null;

  
    protected override void OnInitialized()
    {
        contacts = new List<Contact>(){
        new Contact(){Name="John ",Email="john@example.com"},
        new Contact(){Name="Bob",Email="bob@example.com"},
        new Contact(){Name="Bill",Email="bill@example.com"}
};

        base.OnInitialized();

    }

  public void OnConfirm(string name){
    
      modalDialog.Name=name;
      modalDialog.ChildContent=$"Do you want to delete {name}";
      modalDialog.Show();
    }
    public void DeleteContact(){
    
    var c=contacts?.Find(x=>x.Name==modalDialog.Name);
    contacts.Remove(c);
    StateHasChanged();
      modalDialog.Close();
    }
 

}

In theContactlist.razor page, I have added the ModalDialog.razor component and the OnDelete event. I have called the DeleteContact method of the ContactList.razor page. Also, on the button click event, I am invoking the public method of the ModalDialog class. You can refer to the following post to learn how to reference components and access their public method.

How to capture reference of another component in Blazor App

Models/Contact.cs

    public class Contact
    {

        public string Name { get; set; }
        public string Email { get; set; }
        
    }

Live Demo