Introdução ao ASP.NET Core mais incrivelmenteGet 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.Blazor WebAssembly is in preview.

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

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

  2. Instale os modelos mais poficados executando o seguinte comando em um shell de comando:Install the Blazor templates by running the following command in a command shell:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19457.4
    
  3. Siga as orientações para sua escolha de ferramentas:Follow the guidance for your choice of tooling:

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

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

    3 .3. Selecione aplicativo mais incrivelmente.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 mais experiente, escolha o modelo de aplicativo Webassembly mais incrivelmente .For a Blazor WebAssembly experience, choose the Blazor WebAssembly App template. Para uma experiência de servidor mais incrivelmente, escolha o modelo de aplicativo de servidor mais experiente.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 mais incrivelmente, um servidor mais incrivelmente e um Webassemblyde mais ou mais, 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 F5 para executar o aplicativo.Press F5 to run the app.

    Observação

    Se você instalou a extensão do Visual Studio para uma versão prévia anterior do ASP.NET Core mais recente (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 mais bem em um shell de comando agora é suficiente para trazer 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 os componentes do Razor C#fornecem uma abordagem melhor usando o.Incrementing a counter in a webpage normally requires writing JavaScript, but Razor components provide a better approach using 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 para /counter no navegador, conforme especificado @page pela diretiva na parte superior, faz com que o Counter componente 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 onclick evento é 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 Counter componente à página inicial do aplicativo adicionando um <Counter /> elemento ao Index componente.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 Counter componente.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 Counter componente, atualize o bloco do @code componente:To add a parameter to the Counter component, update the component's @code block:

  • Adicione uma propriedade pública para IncrementAmount com um [Parameter] atributo.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 noelemento<Counter> do componenteusandoumatributo.IndexSpecify 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 Index componente tem seu próprio contador que é incrementado em dez cada vez que o botão Click me está selecionado.The Index component has its own counter that increments by ten each time the Click me button is selected. O Counter componente (Counter. Razor) em /counter continua a incrementar um.The Counter component (Counter.razor) at /counter continues to increment by one.

Próximas etapasNext steps

Como criar seu primeiro aplicativo Blazor

Recursos adicionaisAdditional resources