Blazor Basics Tutorial

Welcome to the Blazor Basics tutorial! This guide will introduce you to the fundamental concepts of Blazor, a .NET framework for building interactive client-side web UIs with C# and HTML.

What is Blazor?

Blazor allows you to build modern, interactive web applications without relying on JavaScript. You can use C# to write all your code, from server-side logic to client-side UI interactions.

Key Concepts

• Components: Blazor applications are built using reusable UI components. These components are self-contained units that encapsulate markup, styling, and C# logic.
• Razor Syntax: Blazor uses Razor syntax, which is an HTML-based templating language that allows you to embed C# code directly into your markup.
• Hosting Models: Blazor offers different hosting models:
  • Blazor Server: Components run on the server, and UI updates are handled over a SignalR connection.
  • Blazor WebAssembly: Components run directly in the browser using WebAssembly.

Creating Your First Blazor App

Let's get started by creating a simple Blazor application.

Prerequisites

Ensure you have the .NET SDK installed. You can download it from the official .NET website.

Steps

1. Open your terminal or command prompt.
2. Create a new Blazor project using the .NET CLI:

   dotnet new blazorserver -o MyBlazorApp

   This command creates a new Blazor Server project named MyBlazorApp.

3. Navigate into the project directory:

   cd MyBlazorApp

4. Run the application:

   dotnet run

Open your web browser and navigate to the address provided by the dotnet run command (usually https://localhost:5001 or http://localhost:5000). You should see your first Blazor application running!

Understanding Components

Blazor components are typically defined in .razor files. These files combine HTML markup with C# code in a single unit.

Example: A Simple Counter Component

Let's examine a basic counter component often found in Blazor templates.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

In this example:

• @page "/counter" defines the route for this component.
• @currentCount displays the value of the currentCount variable.
• @onclick="IncrementCount" attaches an event handler to the button's click event, calling the IncrementCount method.
• The @code block contains the C# logic for the component.

Next Steps

You've now got a basic understanding of Blazor. Continue exploring by learning about Blazor Components in more detail, handling forms, and implementing routing.