Blazor Server Components Overview

Blazor Server Components are the main building blocks for Blazor Server websites. Each component consists of:

• An HTML template that declares what is rendered on the page
• A @code{} block class defines behaviour
• A CSS file that declares the CSS for the template (optional)
• A directive section that declares all directives are being used on the component (optional)

This topic describes how to create and configure a Razor Component.

As mentioned before, Blazor Server Component is called Razor Component. From now on, we will use the term Razor Component to refer to Blazor Server Component.

You can download the example code used in this topic on GitHub.

Prerequisites

To create a component, verify that you have met the following prerequisites:

1. Have at least Visual Studio 2019, .NET 5, .ASP.NET and .NET Cross-platform installed.
2. Create a blank Blazor Server project. If you don't have a project, you can create one using dotnet new blazorserver -n <ProjectName> -lang "C#" where <ProjectName> is the name of your Blazor Server website.

Creating a component

The easiest way to create a component is with the Visual Studio UI. You can also create a component manually.

Creating a component using the Visual Studio UI

To create a component using Visual Studio UI:

1. Navigate to Page folder, right-click and select Add => Razor Component.
2. Enter the component name and click Add.

Creating a component manually

Although Visual Studio UI is the easiest way to create a Razor Component, you can also create a component manually. This section describes how to create a component within an existing Blazor Server project.

To create a new component manually:

1. Navigate to Page folder within Blazor Server project.
2. Execute the command dotnet new razorcomponent -n <ComponentName>.

By default, this command creates a component file, <ComponentName>.razor.

Defining a component's template

The template is a block of HTML that tells Blazor Server how to render the component in your website. You can define a template for your component by adding HTML tags directly to the component.

Defining a component's style

You can declare component styles uses for it's template in three ways.

1. Reference to an external file
2. Create an isolated css file
3. Using the <style> tag

To declare the styles for a component in an external file, add a <link> tag to the HTML template of component.

<link href="css/helloworld.css" rel="stylesheet" />

To declare the isolated styles for a component, add a file named <ComponentName>.razor.css in the same folder of the component.

To declare the style within the component using the <style> tag.

<h1 class="welcome-internal">Welcome to Blazor School (internal css)</h1>
<style>
    .welcome-internal
    {
        color: green;
    }
</style>

Next steps

• To understand more about a component's lifecycle, see Component Lifecycle.
• For more information on Blazor Server directives, see Directives.
• For more information on Blazor Server dependency injection, see Dependency Injection.