Get started with Blazor

By Daniel Roth and Luke Latham

Note

Blazor is an unsupported, experimental web framework that shouldn't be used for production workloads at this time.

Prerequisites:

To create your first Blazor project in Visual Studio:

  1. Install the latest Blazor Language Services extension from the Visual Studio Marketplace. This step makes Blazor templates available to Visual Studio.

  2. Make the Blazor templates available for use with the .NET Core CLI by running the following command in a command shell:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::0.9.0-preview3-19154-02
    
  3. Select File > New Project > Web > ASP.NET Core Web Application.

  4. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

  5. Choose the Blazor template and select OK.

  6. Press F5 to run the app.

Congratulations! You just ran your first Blazor app!

Blazor project

When the app is run, multiple pages are available from tabs in the sidebar:

  • Home
  • Counter
  • Fetch data

On the Counter page, select the Click me button to increment the counter without a page refresh. Incrementing a counter in a webpage normally requires writing JavaScript, but Blazor provides a better approach using C#.

Pages/Counter.cshtml:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

A request for /counter in the browser, as specified by the @page directive at the top, causes the Counter component to render its content. Components render into an in-memory representation of the render tree that can then be used to update the UI in a flexible and efficient way.

Each time the Click me button is selected:

  • The onclick event is fired.
  • The IncrementCount method is called.
  • The currentCount is incremented.
  • The component is rendered again.

The runtime compares the new content to the previous content and only applies the changed content to the Document Object Model (DOM).

Add a component to another component using an HTML-like syntax. Component parameters are specified using attributes or child content. For example, a Counter component can be added to the app's homepage by adding a <Counter /> element to the Index component.

In Pages/Index.cshtml, replace the Survey Prompt component with a Counter component:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Run the app. The homepage has its own counter.

To add a parameter to the Counter component, update the component's @functions block:

  • Add a property for IncrementAmount decorated with the [Parameter] attribute.
  • Change the IncrementCount method to use the IncrementAmount when increasing the value of currentCount.

Pages/Counter.cshtml:

@functions {
    int currentCount = 0;

    [Parameter] int IncrementAmount { get; set; } = 1;

    void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

Specify an IncrementAmount parameter in the Home component's <Counter> element using an attribute.

Pages/Index.cshtml:

<Counter IncrementAmount="10" />

Run the app. The homepage has its own counter that increments by ten each time the Click me button is selected.

Next steps

Build your first Razor Components app