Search⌘ K
AI Features
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
...
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 ...