Creating the modal dialog project

The ModalDialog project will be created by using Microsoft’s Blazor WebAssembly App Empty project template to create an empty Blazor WebAssembly project. We will add a Dialog component that includes multiple sections and use CSS isolation to apply styles that make it behave like a modal dialog. We will use EventCallback parameters to communicate from the component back to the parent when a button is clicked. We will use RenderFragment parameters to allow Razor markup to be communicated from the parent back to the component. Finally, we will create a Razor class library and move the Dialog component into it so that the modal dialog can be shared with other projects.

Getting started with the project

We need to create a new Blazor WebAssembly app. We do this as follows:

1. Open Visual Studio 2022.
2. Click the Create a new project button.
3. Press Alt+S to enter the search for templates textbox.
4. Enter Blazor and press the Enter key.

The following screenshot...