Blazor Tutorial

Introduction to Blazor

Blazor is a framework for building interactive web applications with .NET. Blazor allows you to create rich, modern web applications using C# instead of JavaScript. Blazor can run client-side in the browser using WebAssembly or server-side in ASP.NET Core.

Setting Up Your Environment

To get started with Blazor, you need to have the following tools installed:

• Visual Studio 2019 or later
• .NET Core SDK 3.1 or later

Once you have these tools installed, you can create a new Blazor project.

Understanding Blazor Components

Blazor applications are built using components. A component is a self-contained chunk of user interface (UI), such as a page, dialog, or form. Components are implemented using Razor syntax, which allows you to combine HTML markup with C# code.

Here's a simple example of a Blazor component:

<h3>Hello, world!</h3>

@code {
    private string name = "Blazor";
}

This component displays a heading with the text "Hello, world!" and a variable called name set to "Blazor".

Data Binding

Data binding in Blazor is a way to synchronize the UI with the underlying data. Blazor provides one-way data binding and two-way data binding.

One-Way Data Binding

One-way data binding is used to display data from the model in the UI. Here's an example:

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

@code {
    private int currentCount = 0;
}

Two-Way Data Binding

Two-way data binding allows the UI to update the model and vice versa. Here's an example:

<input @bind="name" />
<p>Hello, @name!</p>

@code {
    private string name = "Blazor";
}

Event Handling

Blazor provides a simple way to handle events, such as button clicks. Here's an example:

<button @onclick="IncrementCount">Click me</button>
<p>Current count: @currentCount</p>

@code {
    private int currentCount = 0;

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

Dependency Injection

Dependency injection (DI) is a technique for achieving Inversion of Control (IoC) between classes and their dependencies. Blazor supports DI to inject services into components.

Here's an example of using DI in a Blazor component:

@inject HttpClient Http

<p>Weather forecast data:</p>

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public string Summary { get; set; }
    }
}

Routing

Blazor uses a routing system to map URLs to components. You can define routes using the @page directive. Here's an example:

@page "/counter"

<h3>Counter</h3>
<button @onclick="IncrementCount">Click me</button>
<p>Current count: @currentCount</p>

@code {
    private int currentCount = 0;

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

Forms and Validation

Blazor provides built-in support for forms and validation. Here's an example of a simple form with validation:

<EditForm Model="person" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <p>
        <label>Name: <input @bind="person.Name" /></label>
        <ValidationMessage For="() => person.Name" />
    </p>
    <p>
        <label>Age: <input type="number" @bind="person.Age" /></label>
        <ValidationMessage For="() => person.Age" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    private Person person = new Person();

    private void HandleValidSubmit()
    {
        // Handle valid form submission
    }

    public class Person
    {
        [Required]
        public string Name { get; set; }
        [Range(0, 120)]
        public int Age { get; set; }
    }
}

Conclusion

Blazor is a powerful framework for building web applications with .NET. It allows you to use C# for both client-side and server-side development, providing a seamless development experience. This tutorial covered the basics of Blazor, including setting up your environment, creating components, data binding, event handling, dependency injection, routing, and forms with validation. With this knowledge, you can start building your own Blazor applications.