Building Real-Life Applications with Blazor WebAssembly/

...

/

Adding the Dialog Component

Adding the Dialog Component

Learn how to add the Dialog component in the Blazor WebAssembly.

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:
Press + to interact
@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 ...