Getting started with Blazor Server

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.

Prerequisites

To get the most out of this tutorial, you should already have a basic understanding of the following:

Take a tour of the example website

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:

HTML tags that determine UI.
@code { } that handles data and functionality.
CSS that defines the look and feel.

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.

Blazor Tutorial - Online shop example

Create a blank project

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:

Create the product model

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; }
}

Create the product detail component

In this step, you are going to create the first blazor component.This section guides you through creating and editing the Razor Component.

Head to the Share folder and add a Razor Component named ProductDetai.razor. To do this, right click on the Share folder and select Add -> Razor Component.

Define the template for for product details, as follow:

<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>

The 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()
    {

    }
}

You need to create a binding for Product and html template, whenever the Product changes, the template gets updated as well. Change the Product name and Product description of the description to @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>

What's next

In this section, you have created a component to display product data.

To continue exploring Blazor Server and developing this website:

Continue to Passing Data to Child Component to create a product list page.

Learn Blazor On the Go Invest in Our Future