MSDN Documentation

What is Blazor?

Blazor is an open-source, cross-platform framework that enables developers to create interactive web applications using C# and .NET. It offers two hosting models:

• Blazor Server: Hosted in an ASP.NET Core app, Blazor Server runs your UI code on the server, sending UI updates to the browser via SignalR.
• Blazor WebAssembly (WASM): Runs your C# code directly in the browser using WebAssembly. This allows for a rich client-side experience without requiring a server-side connection after initial load.

Blazor components are reusable pieces of UI logic. They are built using Razor syntax, which mixes HTML markup with C# code.

Key Benefits of Blazor

• Use C# for everything: Leverage your existing C# and .NET skills to build full-stack web applications.
• Share code: Easily share backend and frontend code, reducing duplication.
• Productivity: Benefit from the rich .NET ecosystem, including tooling, libraries, and familiar development patterns.
• Performance: Blazor WASM provides near-native performance for client-side execution. Blazor Server offers low-latency interaction.
• Modern tooling: Utilize Visual Studio, VS Code, and other familiar development tools.

Getting Started with Blazor

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

dotnet new blazorwasm -o MyBlazorApp
cd MyBlazorApp
dotnet run
            

This command creates a new Blazor WebAssembly project named `MyBlazorApp` and runs it.

Blazor Component Model

Blazor applications are composed of components. A component is a piece of UI, such as a page, a form, a menu, or any reusable UI element. Components are typically defined in files with a .razor extension.

Here's a simple example of a Blazor component:

@Message

Click Me

@code {
    private string Message { get; set; } = "Hello from Blazor!";

    private void UpdateMessage()
    {
        Message = "Button clicked!";
    }
}
            

In this example:

• The <p>@Message</p> displays the value of the Message property.
• The <button @onclick="UpdateMessage"> is an HTML button that, when clicked, calls the UpdateMessage method.
• The @code block contains C# code, defining the Message property and the UpdateMessage method.

Next Steps

Now that you have a basic understanding of Blazor, you can explore more advanced topics:

• Blazor Components Deep Dive
• Routing in Blazor
• Data Binding
• Forms and Validation

For comprehensive API reference and detailed guides, please visit the official Blazor API documentation.