Get started with ASP.NET Core Blazor

Get started with Blazor:

1. Install the latest .NET Core 3.0 SDK release.
2. Install the Blazor WebAssembly template by running the following command in a command shell:
   .NET Core CLI

   dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19465.2
   

3. Follow the guidance for your choice of tooling:
   • Visual Studio
   • 
     

   1. Install the latest Visual Studio with the ASP.NET and web development workload.

   2. Create a new project.

   3. Select Blazor App. Select Next.

   4. Provide a project name in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.

   5. For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. For a Blazor Server experience, choose the Blazor Server App template. Select Create.

   6. Press F5 to run the app.

    Note

   If you installed the Blazor Visual Studio extension for a prior preview release of ASP.NET Core Blazor (Preview 6 or earlier), you can uninstall the extension. Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.

---

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 with Blazor you can use C#.

Pages/Counter.razor:

CSHTML

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

    private 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 HTML syntax. For example, add the Counter component to the app's homepage by adding a <Counter /> element to the Index component.

Pages/Index.razor:

CSHTML

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Run the app. The homepage has its own counter provided by the Counter component.

Component parameters are specified using attributes or child content, which allow you to set properties on the child component. To add a parameter to the Counter component, update the component's @code block:

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

Pages/Counter.razor:

CSHTML

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

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

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

Pages/Index.razor:

CSHTML

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Run the app. The Index component has its own counter that increments by ten each time the Click me button is selected. The Counter component (Counter.razor) at /counter continues to increment by one.