Create a Component

Blazor components are Razor files. The term Razor file is used to describe code files in both MVC and Blazor. You need to use the MVC razor templates for MVC and the Blazor razor templates for Blazor. If you have used Razor files in MVC you know that they have a file type of cshtml because they are a combination of C# and HTML. Blazor razor files use the same basic syntax as cshtml and the code is very familiar. But the base classes are not the same.

In the templates list, you see Razor Page, Razor View, Razor Layout etc. If you select them, you will see that the file type to be created is cshtml. These are MVC razor files. They are not Blazor razor files.

The two templates at the top, Blazor Component and a Razor Component with the Blazor icon are what we use for Blazor components. The Blazor Component creates 3 files with different extensions (.razor, .razor.cs, .razor.css) that are combined to create a single component. The Razor Component with the Blazor icon, creates just the .razor file.  

Use the Blazor Component template to create a component in the Pages assembly named PageLoading.

Copy or enter the code on the right.

Then replace the code in the home page with <PageLoading>.

Test the app.

The colors defined in the home page div are inherited by the div in the PageLoading component, but not by the dialog. The dialog element does not inherit colors.

The common name of the C# class becomes the tag name for the markup. It is possible that we can have two components with the same common name. We could have:

BlazorWorkbench.Pages.Components.PageLoading

And

Jmh.Blazor.Shared.Components.PageLoading

If we were to add a tag <PageLoading> to a page, we will have a name conflict. We want to use the Blazor Workbench version. So the tag can be changed to identify which one to use:

<BlazorWorkbench.Pages.Components.PageLoading>

Or

<Pages.Components.PageLoading>

You could also add a using statement to indicate which class to use for the common name so you do not have to modify the tag.

@using PageLoading=BlazorWorkbench.Pages.Components.PageLoading

Comment: Name Space standards

You may have noticed that the code included CSS class names with upper case letters and said this is wrong, CSS class names should always be lower case. The next lesson will explain this.

When creating library assemblies, it is a good idea to have a source prefix to indicate who created the assembly. Many of Microsoft’s library names start with (Microsoft.).

However, many libraries and apps only have an app name. The Blazor libraries start with (Blazor.). If you were to create your own assembly and start its name with (Blazor.), you would be inside of the Blazor namespace. That’s why I have BlazorWorkspace in the project names and not Blazor.Workspace.

I use the application name as the root prefix for assemblies that are used exclusively for one application. Assemblies that are used in more than one application I always have an organization name to identify the source of the library. The prefix is either the name of an organization or individual. In many GitHub projects the name or initials of the developer makes up the prefix.