Get started with ASP.NET Core BlazorGet started with ASP.NET Core Blazor

Por Daniel Roth e Luke LathamBy Daniel Roth and Luke Latham

Importante

Webassembly mais incrivelmente em visualizaçãoBlazor WebAssembly in preview

Há suporte para o servidor mais incrivelmente no ASP.NET Core 3,0.Blazor Server is supported in ASP.NET Core 3.0. Webassembly mais incrivelmente está em versão prévia para ASP.NET Core 3,1.Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Get started with Blazor:Get started with Blazor:

  1. Install the .NET Core 3.1 Preview SDK.Install the .NET Core 3.1 Preview SDK.

  2. Install the Blazor WebAssembly template by running the following command in a command shell.Install the Blazor WebAssembly template by running the following command in a command shell. The Microsoft.AspNetCore.Blazor.Templates package has a preview version while Blazor WebAssembly is in preview.The Microsoft.AspNetCore.Blazor.Templates package has a preview version while Blazor WebAssembly is in preview.

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2
    
  3. Follow the guidance for your choice of tooling:Follow the guidance for your choice of tooling:

    1.1. Install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload.Install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload.

    2.2. Crie um novo projeto.Create a new project.

    3.3. Select Blazor App.Select Blazor App. Selecione Avançar.Select Next.

    4.4. Forneça um nome ao projeto no campo Nome do projeto ou aceite o nome do projeto padrão.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.Confirm the Location entry is correct or provide a location for the project. Selecione Criar.Select Create.

    5.5. For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template.For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. For a Blazor Server experience, choose the Blazor Server App template.For a Blazor Server experience, choose the Blazor Server App template. Selecione Criar.Select Create. For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Modelos de Hospedagem de Blazor ASP.NET Core.For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Modelos de Hospedagem de Blazor ASP.NET Core.

    6.6. Pressione Ctrl+F5 para executar o aplicativo.Press Ctrl+F5 to run the app.

    Observação

    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.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.Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.


  1. Install the latest .NET Core 3.0 SDK release.Install the latest .NET Core 3.0 SDK release.

  2. Optionally install the Blazor WebAssembly template by installing the .NET Core 3.1 Preview SDK and then running the following command in a command shell:Optionally install the Blazor WebAssembly template by installing the .NET Core 3.1 Preview SDK and then running the following command in a command shell:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2
    
  3. Follow the guidance for your choice of tooling:Follow the guidance for your choice of tooling:

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

    2.2. Optionally install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload for Blazor WebAssembly app development.Optionally install Visual Studio 16.4 Preview 2 or later with the ASP.NET and web development workload for Blazor WebAssembly app development.

    3.3. Crie um novo projeto.Create a new project.

    4.4. Select Blazor App.Select Blazor App. Selecione Avançar.Select Next.

    5.5. Forneça um nome ao projeto no campo Nome do projeto ou aceite o nome do projeto padrão.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.Confirm the Location entry is correct or provide a location for the project. Selecione Criar.Select Create.

    6.6. For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template.For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. For a Blazor Server experience, choose the Blazor Server App template.For a Blazor Server experience, choose the Blazor Server App template. Selecione Criar.Select Create. For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Modelos de Hospedagem de Blazor ASP.NET Core.For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Modelos de Hospedagem de Blazor ASP.NET Core.

    7.7. Pressione F5 para executar o aplicativo.Press F5 to run the app.

    Observação

    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.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.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:Multiple pages are available from tabs in the sidebar:

  • HomeHome
  • ContadorCounter
  • Fetch dataFetch data

Na página Contador, selecione o botão Clique aqui para incrementar o contador sem uma atualização de página.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#.Incrementing a counter in a webpage normally requires writing JavaScript, but with Blazor you can use C#.

Pages/Counter.razor:Pages/Counter.razor:

@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.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.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:Each time the Click me button is selected:

  • The onclick event is fired.The onclick event is fired.
  • O método IncrementCount é chamado.The IncrementCount method is called.
  • The currentCount is incremented.The currentCount is incremented.
  • The component is rendered again.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).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.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.For example, add the Counter component to the app's homepage by adding a <Counter /> element to the Index component.

Pages/Index.razor:Pages/Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Execute o aplicativo.Run the app. The homepage has its own counter provided by the Counter component.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.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:To add a parameter to the Counter component, update the component's @code block:

  • Add a public property for IncrementAmount with a [Parameter] attribute.Add a public property for IncrementAmount with a [Parameter] attribute.
  • Altere o método IncrementCount para usar o IncrementAmount ao aumentar o valor de currentCount.Change the IncrementCount method to use the IncrementAmount when increasing the value of currentCount.

Pages/Counter.razor:Pages/Counter.razor:

@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.Specify the IncrementAmount in the Index component's <Counter> element using an attribute.

Pages/Index.razor:Pages/Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Execute o aplicativo.Run the app. The Index component has its own counter that increments by ten each time the Click me button is selected.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.The Counter component (Counter.razor) at /counter continues to increment by one.

Próximas etapasNext steps

Crie seu primeiro aplicativo Blazor

Recursos adicionaisAdditional resources