Welcome to Blazor Server!
This tuttorial introduces you to the essentials of Blazor Server by walking you through building an online shop with a catalogue, shopping cart and check-out form.
To help you get started right away, we have prepared a free download project on GitHub.
To get the most out of this tutorial, you should already have a basic understanding of the following:
You build Blazor Server websites with components. Components are basic UI units that let you reuse sets of UI functionality.
A component can consists of:
In this example we have the following components:
App.razor
- the first component to load and the container for other components.ProductList.razor
- the list of products.ProductDetail.razor
- the details of the product.To create a blank project, you will need Visual Studio 2019 or later with ASP.NET Web and .NET 5 Runtime
After that, you will see the template for Blazor Server:
The first thing to do is to create a model of product. You will need to add class Product.cs
in Data
folder.
public class Product { public Guid Id { get; set; } public string Name { get; set; } public string Description { get; set; } }
In this step, you are going to create the first blazor component.This section guides you through creating and editing the Razor Component.
Share
folder and add a Razor Component named ProductDetai.razor
. To do this, right click on the Share
folder and select Add -> Razor Component.<div class="card"> <div class="card-title">Product name</div> <div class="card-body">Product description</div> <div class="card-footer"><button>Buy</button></div> </div>
ProductDetail.razor
is going to need 2 parameters. One parameter is the Product
and one is a boolean to indicate whether show the Buy button or not. We will add it to the @code
section, as follow:@code { [Parameter] public Product Product { get; set; } [Parameter] public bool ShowBuyButton { get; set; } private void Buy() { } }
@Product.Name
and @Product.Description
, as follow:@using Data <div class="card"> <div class="card-title"> @Product.Name </div> <div class="card-body"> @Product.Description </div> @if (ShowBuyButton) { <div class="card-footer"> <button @onclick="Buy">Buy</button> </div> } </div>
In this section, you have created a component to display product data.
To continue exploring Blazor Server and developing this website: