Build Fast with ASP.NET Core Blazor Example: Step-by-Step Guide

Discovering a new web framework can be an exciting journey, and if you're delving into ASP.NET Core Blazor, you're in for a treat. Blazor, a framework for building web apps with .NET and C#, enables you to create interactive UI elements using .NET code. Let's explore some practical examples to help you grasp Blazor's power and beauty.

Before we dive into examples, let's ensure you have the basics sorted. You'll need the .NET SDK installed, along with Blazor's templates. Run `dotnet new -i Microsoft.AspNetCore.Blazor.Templates` to install the latest Blazor templates.

Blazor Components: The Building Blocks

Blazor components are the fundamental building blocks of a Blazor app. They consist of Razor markup and C# code, allowing you to combine HTML and C# in a single file. Let's create a simple "Hello, World!" component to get started.

Create a new Blazor project and navigate to the `app` folder. Create a new file called `Counter.razor`. It'll look like this:

Counter Component

A counter component is a perfect starting point. Here's a simple example:

• `@code`: A special C# statement used to define private fields, methods, etc.
• `CurrentCount`: A private field to store the current count value.
• `IncrementCount()`: A method to increment the count and force a re-render of the UI.

Counter.razor:

<h1>Counter</h1>
<p>Current count: @CurrentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int CurrentCount { get; set; }

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

Usage of Components

Now, let's use this counter component in another file:

NavBar.razor:

<div class="collapse" id="navbarHeader">
	<ul class="navbar-nav">
		<li class="nav-item"><Counter /></li>
	</ul>
</div>

Here, we've included our counter component within the navigation bar.

Interactive Forms

Blazor's interactive forms allow for real-time updates using the ` EditForm` component and two-way data binding. Let's create a form to display and update data.

WeatherForecastForm.razor:

Weather Forecast Form

This example showcases a simple form that fetches and displays weather data.

<EditForm Model="@weatherForecast" OnValidSubmit="HandleValidSubmit">
	<InputText @bind-Value="weatherForecast.Summary" />
	<ValidationMessage For="@(() => weatherForecast.Summary)" />
	<InputSelect @bind-Value="weatherForecast.TemperatureC">
		<option value="0">0</option>
		<option value="10">10</option>
	</InputSelect>
	<ValidationMessage For="@(() => weatherForecast.TemperatureC)" />
	<input type="submit" value="Submit" />
</EditForm>

@code {
    private WeatherForecast weatherForecast = new WeatherForecast();

    private void HandleValidSubmit()
    {
        // Process and display form data
    }

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

With this example, you've seen how to create interactive forms and bind data兩-way in Blazor.

Now that you've explored these examples, dive deeper into Blazor's capabilities, such as state management with centralized services and integration with JavaScript. Happy coding!