Blazor

Introduction

Blazor is a framework for building interactive client-side web UI with .NET. Blazor allows you to create rich web UIs using C# instead of JavaScript. This tutorial will guide you through creating a Blazor application from scratch.

Setting Up the Development Environment

Before you start, ensure you have the following installed:

• Visual Studio 2019 or later
• .NET Core SDK

https://dotnet.microsoft.com/download/dotnet-core

Creating a New Blazor Project

Open Visual Studio and create a new project:

• Select "Create a new project".
• Choose "Blazor App" and click "Next".
• Name your project and select the location to save it. Click "Create".
• In the "Create a new Blazor app" dialog, select "Blazor Server App" or "Blazor WebAssembly App" and click "Create".

Understanding the Project Structure

The project template creates a simple project structure:

• Pages - Contains the Razor components.
• Shared - Contains shared components like the layout.
• wwwroot - Contains static files like CSS, JavaScript, and images.
• Program.cs - Contains the entry point of the application.
• Startup.cs - Configures services and the app's request pipeline.

Creating a Blazor Component

In this tutorial, we will create a simple component for a "Counter". Add a new Razor component named Counter.razor in the Pages folder:

@page "/counter"

Counter

Current count: @currentCount

Click me

@code {
    private int currentCount = 0;

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

Creating the Page

Now, create the page that will use the Counter.razor component. Update the Index.razor file in the Pages folder:

@page "/"

Welcome to Blazor!

Configuring the Application

Ensure that the Startup.cs file is correctly configured to use Blazor:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorComponents();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorComponents("/app");
        endpoints.MapFallbackToPage("/_Host");
    });
}

Running the Application

Run the application by pressing F5 or clicking the "Run" button in Visual Studio. Navigate to https://localhost:5001/ to see the Counter component in action.

Conclusion

Congratulations! You have created a simple Blazor application with a Counter component. This tutorial covered the basics of setting up a new project, creating a Blazor component, updating the page to use the component, configuring the application, and running the application. From here, you can extend the Blazor app with more features and integrate it with a backend service.