MSDN Community

Your hub for Microsoft Developer Network discussions and resources.

Blazor: Building Interactive Web UIs with .NET

📅 Published: 2023-10-27 👤 Author: Microsoft Docs Team 👁️ Views: 1.2M 💬 Discussions: 5.8K

Blazor is a free, open-source web framework that enables developers to create interactive client-side web UIs with C# and .NET. Unlike traditional JavaScript-based frameworks, Blazor allows you to leverage your existing .NET skills and tooling to build rich, dynamic web applications.

Key Concepts of Blazor

  • Component-Based Architecture: Blazor applications are built using Razor components, which are self-contained pieces of UI logic and markup.
  • Two Hosting Models:
    • Blazor Server: Components run on the .NET server, and UI updates are sent to the browser over a SignalR connection. This model keeps your code on the server.
    • Blazor WebAssembly: Components run directly in the browser using a WebAssembly compilation of .NET. This allows for true client-side execution without a server round trip for UI updates.
  • Razor Syntax: Blazor uses Razor syntax, a powerful templating engine that mixes HTML markup with C# code in .razor files.
  • Dependency Injection: Blazor has built-in support for dependency injection, making it easy to manage services and their lifecycles.

Getting Started with Blazor

To start building with Blazor, you'll need the .NET SDK (version 6.0 or later recommended). You can create a new Blazor project using the .NET CLI:

Blazor Server App Example 

dotnet new blazorserver -o MyBlazorApp
cd MyBlazorApp
dotnet run
Blazor WebAssembly App Example 

dotnet new blazorwasm -o MyBlazorWasmApp
cd MyBlazorWasmApp
dotnet run

Example: A Simple Counter Component

Here's a basic example of a Blazor component that increments a counter:

Counter.razor 

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Community Resources

The Blazor community is vibrant and growing. Here are some places to find help, share knowledge, and stay updated:

Blazor offers a powerful and productive way to build modern web applications with .NET. Explore its features, dive into the documentation, and join the community to start building your next web project!

Related Discussions