Understanding Razor syntax

Blazor applications are composed of Razor components. As discussed in Chapter 3, User Interface Design with XAML, XAML is a language that has its roots in XML. UI elements based on XAML consist of XAML pages and their corresponding C# code-behind files. Razor components closely resemble this pattern, with the primary difference being that Razor employs HTML as its markup language and C# code can be directly embedded within the HTML. Alternatively, we can opt to separate the C# code into a code-behind file, thus maintaining a clear distinction between the UI and its underlying logic.

Code blocks in Razor

To create the simplest Razor component, it would appear as follows:

<h3>Hello World!</h3>
@code {
  // Put your C# code here
}

In the previous example, we can design our page similarly to an HTML page while incorporating programming logic within a code block. Razor pages or Razor components are generated as C# classes, with the...