Blazor component: Razor tutorial and example

Razor components, also known as Blazor components are used for rendering a Blazor app.

This example will show what files are created when creating a Blazor WebAssembly app in Visual Studio using the default template.

In-addition, this tutorial will demonstrate how to create a component and how to set a parameter attribute within one.

Creating a Blazor WebAssembly app

When creating a Blazor WebAssembly application, a number of files with the .razor extension are created.

The filename represents the ID of the Razor component. For example, the Index.razor component has an ID of Index.

A Program.cs file is also created. Inside that, it launches the Blazor WebAssembly app off the App component.

// Program.cs
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using RoundTheCode.BlazorComponent;
 
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app"); // Launches the Blazor WebAssembly app
builder.RootComponents.Add<HeadOutlet>("head::after");
 
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
await builder.Build().RunAsync();

Component files

The App component uses the routeData instance for routing. It also states the default layout to use, which is the MainLayout component.

<!-- App.razor -->
<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>

<!-- MainLayout.razor -->
<div class="page">
	<div class="sidebar">
		<NavMenu />
	</div>

	...
</div>

<!-- NavMenu.razor -->
<div class="top-row ps-3 navbar navbar-dark">
	<div class="container-fluid">
		<a class="navbar-brand" href="">RoundTheCode.BlazorComponent</a>
		<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
			<span class="navbar-toggler-icon"></span>
		</button>
	</div>
</div>
 
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
	<nav class="flex-column">
		<div class="nav-item px-3">
			<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
				<span class="oi oi-home" aria-hidden="true"></span> Home
			</NavLink>
		</div>
		<div class="nav-item px-3">
			<NavLink class="nav-link" href="counter">
				<span class="oi oi-plus" aria-hidden="true"></span> Counter
			</NavLink>
		</div>
		<div class="nav-item px-3">
			<NavLink class="nav-link" href="fetchdata">
				<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
			</NavLink>
		</div>
	</nav>
</div>
 
@code {
	private bool collapseNavMenu = true;

	private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

	private void ToggleNavMenu()
	{
		collapseNavMenu = !collapseNavMenu;
	}
}

<!-- MainLayout.razor -->
<div class="page">
	...
	<main>
		<div class="top-row px-4">
			<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
		</div>

		<article class="content px-4">
			@Body
		</article>
	</main>
</div>

<!-- Index.razor -->
@page "/"
 
<PageTitle>Index</PageTitle>
 
<h1>Hello, world!</h1>
 
Welcome to your new app.
 
<SurveyPrompt Title="How is Blazor working for you?" />

Creating a Razor component

In Visual Studio, creating a Razor component is relatively simple. Right-click on a folder in the Solution Explorer, and go to Add and Razor Component...

Give it a name. In this instance, we want to create a component that represents the news. So, we'll name it News.razor.

That goes ahead and creates the Razor component. As we want to render this component to /news, we need to include the @page directive and set the parameter to /news.

<!-- News.razor -->
@page "/news"
<h3>News</h3>

Setting a parameter attribute

We now want to show the news headlines by referencing a separate Razor component. For this, we create a new shared Razor component, and call it NewsHeadlines.razor.

As this component is not going to be routed to a page, we don't need to include the @page directive.

To reference it in the News component, we simply add the ID of the component, separated with the < and >. As the file is called NewsHeadlines.razor, the ID of the component is NewsHeadlines.

<!-- News.razor -->
@page "/news"
<h3>News</h3>
<NewsHeadlines />

For the NewsHeadlines component, we want to set a title for it. As this component might be shared across multiple components, we want to set a different title depending on which component it's being referenced from.

To do that, we will set a Title property in the NewsHeadlines component, and mark it with the [Parameter] attribute.

Marking this property with a parameter attribute allows us to set the value of it when it's referenced from another component.

The final thing to do is to render the Title property to the NewsHeadlines component. This is done by calling @Title.

<!-- NewsHeadlines.razor -->
@Title
 
@code {
	[Parameter]
	public string Title { get; set; }
}

Now that the title has been set as a parameter, we can append the Title attribute when referencing the NewsHeadlines component.

<!-- News.razor -->
@page "/news"
<h3>News</h3>
<NewsHeadlines Title="My latest headlines" />

This also means that we can reference the NewsHeadlines component across multiple Razor components and change the title where necessary.

Watch the video

Watch our video where we show how Razor components work, how to create one, and how to set a parameter attribute. As a bonus, we'll demonstrate how to set a parameter from a querystring.

Learn more about Razor components

We have only scratched the surface when it comes to Razor components. With our building your first app in Blazor WebAssembly online course, we go into components in more detail and talk about parameters, as well as the @code block and other built-in components.

In-addition, our Blazor WebAssembly foundation skills online course looks more into configuration, API integration, logging and deployment.

Both of these courses are essential for building a Blazor WebAssembly app and understanding how the framework works.