A Beginner's Guide to Blazor in C#

Introduction

Blazor is a framework for building interactive web applications using C# and .NET instead of JavaScript. It allows developers to build rich, client-side web apps with the full power of C#. This technology empowers C# developers to create modern web applications without having to delve into JavaScript, HTML, or CSS as deeply as before.

Blazor is part of the .NET ecosystem, and it brings many of the benefits of .NET development to the web, such as reusable components, rich tooling, and a powerful language (C#). It leverages WebAssembly (Wasm) to run C# code directly in the browser and also allows for more traditional server-side interactions.

In this blog, we will cover the basics of Blazor for beginners, from setting up a Blazor project to understanding its fundamental concepts.

What is Blazor?

Blazor is a framework developed by Microsoft, which enables you to build interactive web UIs using C# instead of JavaScript. There are two main hosting models in Blazor.

1. Blazor WebAssembly (Client-side)
2. Blazor Server (Server-side)

Setting Up a Blazor Project

To start working with Blazor, you need to have the .NET SDK installed. Here’s how to get started.

Prerequisites

• .NET SDK: Download the latest .NET SDK from Microsoft's official .NET download page.
• IDE: It’s recommended to use Visual Studio, Visual Studio Code, or JetBrains Rider. Visual Studio provides great support for Blazor with templates and debugging tools.

Steps to Create a Blazor App

• Create a New Blazor App
• Run the Application

Blazor Project Structure

• Pages/: Contains Razor components for routing and views (e.g., Index.razor, Counter.razor).
• Shared/: Contains reusable components shared across different parts of the app.
• wwwroot/: Static files such as CSS, JS, and images.
• _Imports.razor: Provides global using directives for Razor components.
• Program.cs: Configures services and the Blazor application.

Basic Blazor Concepts

Blazor is based on Razor Components. These are UI building blocks composed of HTML and C# code. Let's go over some essential concepts.

1. Razor Syntax

Razor syntax is a combination of C# code and HTML markup, allowing dynamic rendering of content. You use the @ symbol to embed C# code within HTML.

Example

<h3>Hello, @name!</h3>

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

In this example, @name displays the value of the name variable in the HTML.

2. Components

Blazor components are reusable UI elements that consist of HTML markup, C# logic, and event handlers. Each component typically has a .razor file extension.

Example of a simple counter component

@page "/counter"

<h3>Counter</h3>

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

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

@code {  
    private int count = 0;  

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

In the above example,

• The @onclick directive binds the button click event to the IncrementCount method.
• The @count is a dynamic value that updates as the button is clicked.

3. Event Binding

In Blazor, event binding is done using the @ symbol followed by an event, such as @onclick, @oninput, etc.

Example

<button @onclick="HandleClick">Click me</button>

@code {  
    private void HandleClick()  
    {  
        Console.WriteLine("Button clicked!");  
    }  
}  

4. Data Binding

Blazor supports both one-way and two-way data binding.

• One-way data binding: Data flows from C# to the view.
• Two-way data binding: Data flows both ways (from view to C# and vice versa).

The @bind directive is used for two-way binding, where changes in the input field automatically update the name variable.

5. Routing in Blazor

Blazor has a built-in router that enables navigation between different pages or components. To define a route for a component, you use the @page directive.

For example, the Counter.razor component uses the route /counter.

@page "/counter"

<h3>Counter</h3>

<!-- Content here -->  

6. Dependency Injection

Blazor uses dependency injection (DI) for managing services like HTTP clients, databases, or logging. You can register services in the Program.cs file and inject them into components.

builder.Services.AddSingleton<WeatherService>();  

Then, inject the service into a component.

@inject WeatherService WeatherService  

<p>@WeatherService.GetWeather()</p>  

Benefits of Blazor

1. C# and .NET Across the Stack: You can use the same language and framework for both client-side and server-side code.
2. WebAssembly Support: Blazor WebAssembly runs C# code in the browser, enabling rich, client-side web apps without relying on JavaScript.
3. Reusable Components: Blazor components are modular, allowing for code reuse across your application.
4. Familiar Development Environment: If you already know C#, you don’t need to learn JavaScript or TypeScript to build modern web apps.
5. Strong Tooling: Visual Studio and Visual Studio Code offer robust support for Blazor development.

Conclusion

Blazor brings C# and .NET to the front end, allowing developers to build full-featured, modern web applications without diving into JavaScript. By leveraging the power of WebAssembly, Blazor WebAssembly makes it possible to run C# code directly in the browser, while Blazor Server allows for rich, real-time interactivity with minimal client overhead.

As you continue learning Blazor, explore its vast ecosystem of libraries, third-party tools, and best practices for building efficient, scalable web applications. Whether you choose Blazor WebAssembly or Blazor Server, Blazor is a powerful tool for modern web development with C#.

Happy coding