Blazor Fundamentals
Learn the fundamentals of Blazor.
We'll cover the following...
In this lesson, we'll cover the fundamentals of a Blazor application. These concepts would be equally applicable to a Blazor application hosted inside a .NET MAUI app and a stand-alone Blazor WebAssembly application that can be deployed in browsers.
We'll use the following project to demonstrate the fundamentals of Blazor. This project is based on the standard Blazor MAUI project template.
<?xml version="1.0" encoding="UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiBlazorApp"
x:Class="MauiBlazorApp.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="PageBackgroundColor">#512bdf</Color>
<Color x:Key="PrimaryTextColor">White</Color>
<Style TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
</Style>
<Style TargetType="Button">
<Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="BackgroundColor" Value="#2b0b98" />
<Setter Property="Padding" Value="14,10" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>Razor components
Each file with the .razor extension is known as a Razor component. Typically, a Razor component can support a mixture of HTML, C# code, and special Razor syntax. We have several examples of Razor components in our project that have all of these elements defined. The Counter.razor file inside the Pages folder is a good representative example. The file is ...