Blazor

Overview

Microsoft Blazor is a powerful framework for building interactive web applications using C# and .NET. Blazor WebAssembly (WASM) enables developers to create dynamic, single-page applications (SPAs) that run entirely in the browser, offering a modern alternative to JavaScript-heavy frameworks like Angular and React. This tutorial walks you through the process of creating a dynamic WASM website with Blazor.

Prerequisites

To follow this tutorial, you’ll need:

.NET SDK installed on your machine.
A code editor such as Visual Studio or Visual Studio Code.
Basic knowledge of C# and web development.

Step 1: Create a Blazor WebAssembly Project

Open a terminal or command prompt.
Run the following command to create a new Blazor WebAssembly project:
```
dotnet new blazorwasm -o DynamicBlazorApp
```
This command creates a project named DynamicBlazorApp in a new directory.
Navigate to the project directory:
```
cd DynamicBlazorApp
```
Build and run the project to ensure everything is set up correctly:
```
dotnet run
```
Open your browser and navigate to https://localhost:5001 (or the URL displayed in the terminal). You’ll see the default Blazor template website.

Step 2: Understand the Project Structure

A Blazor WebAssembly project includes the following key components:

Pages: Contains Razor files (.razor) that define the UI and logic for each page.
wwwroot: Holds static files like CSS, JavaScript, and images.
Shared: Stores reusable components.
Program.cs: The entry point of the application.

Step 3: Create a Dynamic Component

Blazor’s component-based architecture allows you to build reusable and dynamic UI elements. Let’s create a simple counter component.

In the Pages folder, create a new Razor component named DynamicCounter.razor:

@page "/dynamic-counter"

<h3>Dynamic Counter</h3>

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

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

@code {
    private int count = 0;

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

Add a navigation link to this new component in the NavMenu.razor file (located in the Shared folder):

<li class="nav-item px-3">
    <NavLink class="nav-link" href="dynamic-counter">
        <span class="oi oi-plus" aria-hidden="true"></span> Dynamic Counter
    </NavLink>
</li>

Run the application and navigate to /dynamic-counter. You’ll see a dynamic counter that updates when you click the button.

Step 4: Fetch Data from an API

To make the application more dynamic, let’s fetch data from a public API and display it.

Create a new Razor component named FetchDataFromApi.razor in the Pages folder:

@page "/fetch-data"

<h3>Fetch Data</h3>

<ul>
    @if (items == null)
    {
        <p>Loading...</p>
    }
    else
    {
        @foreach (var item in items)
        {
            <li>@item</li>
        }
    }
</ul>

@code {
    private List<string> items;

    protected override async Task OnInitializedAsync()
    {
        // Simulate fetching data from an API
        await Task.Delay(1000);
        items = new List<string> { "Item 1", "Item 2", "Item 3" };
    }
}

Add a navigation link to the NavMenu.razor file for this component:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetch-data">
        <span class="oi oi-data-transfer-download" aria-hidden="true"></span> Fetch Data
    </NavLink>
</li>

Run the application and navigate to /fetch-data to see the fetched data.

Step 5: Styling the Application

Blazor WebAssembly uses Bootstrap by default. To customize styles:

Open wwwroot/css/app.css.

Add your custom styles. For example:

.custom-header {
    color: #0078d7;
    font-size: 24px;
    font-weight: bold;
}

Apply the style in your components:

<h3 class="custom-header">Welcome to Blazor</h3>

Conclusion

With Microsoft Blazor, creating dynamic, client-side web applications is straightforward and efficient. In this tutorial, we explored setting up a Blazor WebAssembly project, building dynamic components, fetching data, and styling your app. Blazor’s C#-based approach simplifies development and offers a powerful alternative to JavaScript frameworks.

Explore advanced topics such as authentication, state management, and performance optimization to build production-ready Blazor applications!

Building Dynamic WASM Websites with Microsoft Blazor