Introduction to Blazor

MSDN Documentation > Web Development > .NET Web Development > Introduction to Blazor

Blazor is a free, open-source web framework that enables developers to build interactive client-side web UI with .NET and C#. Traditionally, rich client-side web UIs required JavaScript. Blazor allows you to use C# for the entire stack, from the server to the browser.

Key Concepts

Client-Side vs. Server-Side Rendering

Blazor offers two primary hosting models:

  • Blazor Server: UI updates are handled over a SignalR connection. The .NET logic runs on the server, and UI updates are sent to the browser. This is good for low-latency applications and when you need to access server-side resources.
  • Blazor WebAssembly (WASM): The .NET runtime is downloaded to the browser via WebAssembly. The C# code runs directly in the browser, offering a native client-side experience without needing a constant server connection for UI updates.

Components

Blazor applications are built using a component-based architecture. Components are self-contained pieces of UI and logic, typically defined in `.razor` files. These files combine HTML markup and C# code.

Here's a simple example of a Blazor component:


<p>The current count is: @CurrentCount</p>

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

@code {
    private int CurrentCount = 0;

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

Routing

Blazor has a built-in routing system that allows you to define which components respond to specific URL paths. You can use the @page directive to mark a component as a routable page.


@page "/counter"

<h3>Counter</h3>

<p>Current count: @CurrentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Increment</button>

@code {
    private int CurrentCount = 0;

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

Benefits of Blazor

  • Use C# for everything: Develop your entire web application using C# and .NET, reducing context switching.
  • Code sharing: Share code between your server and client applications.
  • Performance: Blazor WebAssembly can achieve near-native performance in the browser.
  • Ecosystem: Leverage the vast .NET ecosystem and NuGet packages.
  • Productivity: Fast build times and hot reload capabilities speed up development.
Note: Blazor is a powerful framework for building modern web applications. Consider the hosting model that best suits your application's requirements.

Getting Started

To start building Blazor applications, you'll need the .NET SDK installed. You can create a new Blazor project using the .NET CLI:


dotnet new blazorwasm -o MyBlazorApp
cd MyBlazorApp
dotnet run

This will create a new Blazor WebAssembly project and start a development server. You can then open your browser to the provided URL to see your application.

Tip: Explore the official Blazor documentation for more in-depth guides, API references, and advanced topics.

Further Reading