Search⌘ K
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Adding the Dialog Component

Explore how to add a customizable Dialog component to your Blazor WebAssembly app. Learn to place the component in the Shared folder, apply isolated CSS styles for modal behavior, and test its functionality by adding it to the Home page. This lesson helps you build reusable UI elements essential for interactive web applications.

We'll cover the following...

The Dialog component will be shared. Therefore, we will add it to the Shared folder. We do this as follows:

  1. Right-click the Shared folder and select “Add, Razor Component” from the menu.
  2. Name the new component Dialog.
  3. Click the “Add” button.
  4. Replace the markup with the following markup:
C++
@if (Show)
{
     <div class="dialog-container">
         <div class="dialog">
             <div class="dialog-title">Title</div>
             <div class="dialog-body">Body</div>
             <div class="dialog-buttons">
                 <button class="btn btn-dark mr-2" >
                     OK
                 </button>
                 <button class="btn btn-danger">
                     Cancel
                 </button>
             </div>
         </div>
     </div>
}
@code {
     [Parameter] public bool Show { get; set; }
}

The Show property is used to show and hide the contents of the component. We have added a Dialog component, but it will not behave like a modal dialog box until the appropriate styles have been added to the project.

Adding a CSS

The preceding markup includes five classes ...