Adding a Component to the Razor Class Library

Learn how to add the Dialog component in the Razor class library and how to use it in the ModalDialog app.

We'll cover the following

In order to share the Dialog component, we need to move it to the Razor class library that we just created and tested. We do this as follows:

  1. Right-click the ModalDialog\Shared\Dialog.razor file and select the “Copy” option from the menu.

  2. Right-click the MyComponents project and select the “Paste” option from the menu.

  3. Right-click the MyComponents\Dialog.razor file and select the “Rename” option from the menu.

  4. Rename the file to BweDialog.razor. In this case, Bwe stands for “Blazor WebAssembly by Example.”

    Tip: When naming components in a Razor class library, we should give them unique names to avoid ambiguous reference errors. Most organizations prefix all of their shared components with the same text. For example, a company named One Stop Designs (OSD) might prefix all of their shared components with Osd.

  5. Open the ModalDialog\Pages\Index.razor file.

  6. Rename the Dialog element to BweDialog.

  7. From the “Build” menu, select the “Build Solution” option.

  8. Return to the browser.

  9. Use “Ctrl + R” to refresh the browser.

  10. Click the “Show Dialog” button.

Test yourself

We have followed all the steps above, and the resulting project is given as follows. Press the “Run” button to execute it:

Get hands-on with 1200+ tech skills courses.