A Beginner's Guide to Blazor in C#

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

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

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