Blazor WebAssembly is a component-driven framework. Razor components are the fundamental building blocks of a Blazor WebAssembly application. They are classes that are implemented using a combination of C#, HTML, and Razor syntax. When the web app loads, the classes get downloaded into the browser as normal .NET assemblies (DLLs).

Using components

HTML element syntax is used to add one component to another component. The markup looks like an HTML tag where the name of the tag is the component type.

The following markup in the Pages/Index.razor file of the Demo project, which we will create later in this chapter, will render a SurveyPrompt instance:

<SurveyPrompt Title="How is Blazor working for you?" />

The preceding SurveyPrompt element includes an attribute parameter named Title.

Parameters

Component parameters...

In Blazor WebAssembly, routing is handled on the client, not on the server. As you navigate in the browser, Blazor intercepts that navigation and renders the component with the matching route.

The URLs are resolved relative to the base path that is specified in the wwwroot/index.html file. The base path is specified in the head element using the following syntax:

<base href="/" />

Unlike other frameworks that you may have used, the route is not inferred from the location of its file. For example, in the Demo project, the Counter component is in the /Pages/Counter folder, yet it uses the following route:

/counter

This is the @page directive used by the Counter component:

@page "/counter"

Route parameters

Route parameters can be used to populate the parameters of a component. The parameters of both the component and the route must have the same name, but they are not case-sensitive.

You can provide more than one...

Razor syntax is made up of HTML, Razor markup, and C#. Rendering HTML from a Razor component is the same as rendering HTML from an HTML file. Razor syntax uses both inline expressions and control structures to render dynamic values.

Inline expressions

Inline expressions start with an @ symbol followed by a variable or function name. This is an example of an inline expression:

<h1>Blazor is @Text!</h1>

In the preceding example, Blazor will interpret the text after the @ symbol as either a property name or a method name.

Control structures

Control structures also start with an @ symbol. The content within the curly brackets is evaluated and rendered to the output. This is an example of an if statement from the FetchData component in the Demo project that we will create later in this chapter:

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}

Conditionals

The following types of conditionals...

Hot Reload allows developers to edit the markup and C# code of a currently running app without requiring the app to be rebuilt or refreshed. Also, it does all of that while maintaining the app’s state.

You can use Hot Reload with or without the debugger. To trigger Hot Reload, you can either use the Hot Reload drop-down button on the toolbar or press Alt+F10.

This is the Hot Reload drop-down button that is accessed from the toolbar:

Figure 2.6: Hot Reload drop-down button

As you can see from the Hot Reload drop-down button, you can set Hot Reload to automatically be triggered whenever you save a file. There are more settings available via the Settings option on the menu. Hot Reload is supported for most changes to a component, including stylesheets. However, sometimes a change will require that the application be restarted.

This is a list of some of the activities that require a restart:

• Adding new local functions
• Adding...

The Blazor WebAssembly application that we are going to build in this chapter is a simple three-page application. Each page will be used to demonstrate one or more features of Razor components.

This is a screenshot of the completed Demo project:

Figure 2.8: Home page of the Demo project

The build time for this project is approximately 60 minutes.

Project overview

The Demo project that we are creating is based on one of the sample projects that are provided by the Blazor WebAssembly App project template. After we have used the template to create the project, we will examine the files in the sample project and update some of the files to demonstrate how to use Razor components. To elevate the development experience, we will enable Hot Reload. Finally, we will separate the code block of one of the components into a separate file to demonstrate how to use the code-behind technique to separate the markup from the code...

You should now be able to create a Blazor WebAssembly application.

In this chapter, we introduced Razor components. We learned about their parameters, naming conventions, life cycle, and structure. We also learned about routing and Razor syntax. Finally, we learned how to use Hot Reload.

After that, we used the Blazor WebAssembly App project template provided by Microsoft to create the Demo project. We examined each of the files in the Demo project. We added a parameter to the Counter component and examined how routing works. Finally, we practiced using Hot Reload.

The following questions are provided for your consideration:

1. Can Razor components include JavaScript?
2. What types of loops are supported by Razor syntax?
3. Can the parameter of a component be defined using a POCO?
4. Will Hot Reload render changes to CSS files?
5. How can a child component trigger an infinite loop?

The following resources provide more information concerning the topics in this chapter:

• For more information on Bootstrap, refer to https://getbootstrap.com.
• For more information on Razor syntax, refer to https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor.
• For more information on Hot Reload, refer to https://learn.microsoft.com/en-us/visualstudio/debugger/hot-reload.