```html Learn ASP.NET Core Blazor – MSDN

MSDN Learn

Build Interactive Web UI with Blazor

Learn how to create full‑stack web applications using C# and Razor components.

Get Started

What is Blazor?

Blazor is a framework for building interactive client‑side web UI with .NET. It runs either in the browser via WebAssembly or on the server via SignalR.

Client‑Side (WebAssembly)

Runs directly in the browser. No JavaScript required to write UI logic.

Server‑Side

Executes on the server, with UI updates sent over a real‑time connection.

Getting Started

First, install the .NET SDK and create a new Blazor project.

dotnet new blazorwasm -o MyBlazorApp
cd MyBlazorApp
dotnet run

Open http://localhost:5000 in your browser to see the default template.

Components

Components are the building blocks of Blazor. They combine HTML markup, C# code, and CSS.

Razor Syntax

Use @code blocks to define properties, event handlers, and lifecycle methods.

@page "/counter"
<h3>Counter</h3>
<button class="btn" @onclick="Increment">Click Me</button>
<p>Current count: @currentCount</p>

@code {
  private int currentCount = 0;
  void Increment() => currentCount++;
}

Parameters & Cascading

Pass data to components with [Parameter] and share data using cascading values.

Data Binding

Two‑way binding simplifies forms and UI interactions.

<InputText @bind-Value="name" placeholder="Enter your name"/>
<p>Hello, @name!</p>

@code {
  private string name = "";
}

Routing

Define routes with the @page directive and use the NavLink component for navigation.

<NavLink href="/fetchdata" class="nav-link">Fetch data</NavLink>

@page "/fetchdata"

<h3>Weather forecast</h3>
<table class="table">
  ...
</table>

Deploying Blazor Apps

Publish your app to Azure, IIS, or static site hosts.

dotnet publish -c Release

# For Azure Static Web Apps
az staticwebapp create --name MyBlazorApp --resource-group MyGroup \
  --source . --location "West US" --app-location "wwwroot"
```