Introdução ao 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.

Introdução ao Blazor:Get started with Blazor:

  1. Instale o SDK da versão prévia do .NET Core 3,1.Install the .NET Core 3.1 Preview SDK.

  2. Instale o modelo WebassemblyBlazor executando o comando a seguir em um shell de comando.Install the Blazor WebAssembly template by running the following command in a command shell. O Microsoft. AspNetCore.Blazor. O pacote de modelos tem uma versão de visualização enquanto Blazor Webassembly está em visualização.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-preview2.19528.8
    
  3. Siga as orientações para sua escolha de ferramentas:Follow the guidance for your choice of tooling:

    1 .1. Instale o Visual Studio 16,4 Preview 2 ou posterior com a ASP.net e a carga de trabalho de desenvolvimento Web .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. Selecione Blazor aplicativo.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. Confirme se a entrada de local está correta ou forneça um local para o projeto.Confirm the Location entry is correct or provide a location for the project. Selecione Criar.Select Create.

    5 .5. Para obter uma experiência de Webassembly Blazor, escolha o modelo de aplicativoBlazor Webassembly .For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. Para obter uma experiência de Blazor Server, escolha o modelo de aplicativoBlazor Server .For a Blazor Server experience, choose the Blazor Server App template. Selecione Criar.Select Create. Para obter informações sobre os dois modelos de hospedagem Blazor, Blazor Server e Blazor Webassembly, consulte Modelos de hospedagem mais amASP.NET Core.For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Modelos de hospedagem mais amASP.NET Core.

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

    Observação

    Se você instalou a extensão do Blazor Visual Studio para uma versão prévia anterior do ASP.NET Core Blazor (visualização 6 ou anterior), você pode desinstalar a extensã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. Instalar os modelos de Blazor em um shell de comando agora é suficiente para retonar os modelos no Visual Studio.Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.


  1. Instale a versão mais recente do SDK do .NET Core 3,0 .Install the latest .NET Core 3.0 SDK release.

  2. Opcionalmente, instale o modelo WebassemblyBlazor instalando o SDK do .NET Core 3,1 Preview e, em seguida, executando o seguinte comando em um shell de comando: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-preview2.19528.8
    
  3. Siga as orientações para sua escolha de ferramentas:Follow the guidance for your choice of tooling:

    1 .1. Instale o Visual Studio mais recente com a ASP.net e a carga de trabalho de desenvolvimento Web .Install the latest Visual Studio with the ASP.NET and web development workload.

    2 .2. Opcionalmente, instale o Visual Studio 16,4 Preview 2 ou posterior com o ASP.net e a carga de trabalho de desenvolvimento Web para o desenvolvimento de aplicativos Webassembly Blazor.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. Selecione Blazor aplicativo.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. Confirme se a entrada de local está correta ou forneça um local para o projeto.Confirm the Location entry is correct or provide a location for the project. Selecione Criar.Select Create.

    6 .6. Para obter uma experiência de Webassembly Blazor, escolha o modelo de aplicativoBlazor Webassembly .For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. Para obter uma experiência de Blazor Server, escolha o modelo de aplicativoBlazor Server .For a Blazor Server experience, choose the Blazor Server App template. Selecione Criar.Select Create. Para obter informações sobre os dois modelos de hospedagem Blazor, Blazor Server e Blazor Webassembly, consulte Modelos de hospedagem mais amASP.NET Core.For information on the two Blazor hosting models, Blazor Server and Blazor WebAssembly, see Modelos de hospedagem mais amASP.NET Core.

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

    Observação

    Se você instalou a extensão do Blazor Visual Studio para uma versão prévia anterior do ASP.NET Core Blazor (visualização 6 ou anterior), você pode desinstalar a extensã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. Instalar os modelos de Blazor em um shell de comando agora é suficiente para retonar os modelos no Visual Studio.Installing the Blazor templates in a command shell is now sufficient to surface the templates in Visual Studio.


Várias páginas estão disponíveis em guias na barra lateral:Multiple pages are available from tabs in the sidebar:

  • HomeHome
  • ContadorCounter
  • Buscar dadosFetch 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. Incrementar um contador em uma página da Web normalmente requer a escrita de JavaScript, mas com Blazor C#você pode usar.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++;
    }
}

Uma solicitação de /counter no navegador, conforme especificado pela diretiva @page na parte superior, faz com que o componente Counter processe seu conteúdo.A request for /counter in the browser, as specified by the @page directive at the top, causes the Counter component to render its content. Os componentes são renderizados em uma representação na memória da árvore de renderização que pode ser usada para atualizar a interface do usuário de maneira flexível e eficiente.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.

Sempre que o botão clicar em mim estiver selecionado:Each time the Click me button is selected:

  • O evento onclick é acionado.The onclick event is fired.
  • O método IncrementCount é chamado.The IncrementCount method is called.
  • O currentCount é incrementado.The currentCount is incremented.
  • O componente é renderizado novamente.The component is rendered again.

O tempo de execução compara o novo conteúdo com o conteúdo anterior e aplica apenas o conteúdo alterado para o Modelo de Objeto do Documento (DOM).The runtime compares the new content to the previous content and only applies the changed content to the Document Object Model (DOM).

Adicione um componente a outro componente usando a sintaxe HTML.Add a component to another component using HTML syntax. Por exemplo, adicione o componente Counter à página inicial do aplicativo adicionando um elemento <Counter /> ao componente Index.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. A Home Page tem seu próprio contador fornecido pelo componente Counter.The homepage has its own counter provided by the Counter component.

Os parâmetros de componente são especificados usando atributos ou conteúdo filho, que permitem definir propriedades no componente filho.Component parameters are specified using attributes or child content, which allow you to set properties on the child component. Para adicionar um parâmetro ao componente Counter, atualize o bloco @code do componente:To add a parameter to the Counter component, update the component's @code block:

  • Adicione uma propriedade pública para IncrementAmount com um atributo [Parameter].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;
    }
}

Especifique o IncrementAmount no elemento <Counter> do componente Index usando um atributo.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. O componente Index tem seu próprio contador que é incrementado em dez cada vez que o botão Click me é selecionado.The Index component has its own counter that increments by ten each time the Click me button is selected. O componente Counter (Counter. Razor) em /counter continua a incrementar um.The Counter component (Counter.razor) at /counter continues to increment by one.

Próximas etapasNext steps

Crie seu primeiro aplicativo Blazor

Recursos adicionaisAdditional resources