Built-in Razor Components
Learn how to use built-in Razor components.
Blazor has a whole range of built-in Razor components that can be used for various purposes. There are several categories of these components and we will cover them in this lesson. We have several examples of these components in the project setup below:
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Authentication and authorization
These components are used to secure resources so that only authenticated and authorized users can access them. We will examine the usage of these components in more detail in a future lesson when we will cover application security.
Authentication and authorization in Blazor are done by embedding a specific resource in the AuthorizeView component. This Razor component has two subcomponents:
AuthorizedNotAuthorized
Authorized component
The Authorized component is a placeholder for the protected content. Only authenticated and authorized users (i.e., users with sufficient permissions) can access this content.
NotAuthorized component
The NotAuthorized element is a placeholder for the content that is shown to users who haven’t logged in, users who enter incorrect login details, or users who don’t have sufficient permissions to view the content.
Input controls
These controls represent interactive elements, such as buttons, checkboxes, input fields, and so on. They can provide a replacement for the standard HTML form elements. They are less verbose than HTML elements and can be easily configured directly from C# code. The following elements are available.
EditForm
This element represents a submittable form. We have an example of it on line 12 in the Index.razor file that can be found in the Pages folder.
The form can be associated with a specific field or property via the Model attribute. This object can be a class, a struct, a record, etc. In the example above, we are using the car field of the Car type, which is defined on line 70 of the Razor component file.
<EditForm Model="@car" OnValidSubmit="@HandleSubmit">...</EditForm>