Introdução ao ASP.NET Core

Este tutorial mostra como criar, executar e modificar um ASP.NET Core Blazor Web App usando a CLI do .NET. Blazor é uma estrutura web de front-end do .NET que dá suporte à renderização do lado do servidor e à interatividade do cliente em um único modelo de programação.

Você aprenderá a:

• Crie um Blazor Web App.
• Execute o aplicativo.
• Altere o aplicativo.
• Desligue o aplicativo.

Prerequisites

Obtenha e instale o SDK do .NET mais recente no download do .NET.

Criar um Blazor Web App

Abra um shell de comando em um local adequado para o aplicativo de exemplo e use o comando a seguir para criar um Blazor Web App. A -o|--output opção cria uma pasta para o projeto e nomeia o projeto BlazorSample:

dotnet new blazor -o BlazorSample

Executar o aplicativo

Altere o diretório para a BlazorSample pasta com o seguinte comando:

cd BlazorSample

O dotnet watch comando executa o aplicativo e abre o navegador padrão na página inicial do aplicativo.

dotnet watch

Usando a navegação na barra lateral do aplicativo, visite a página Contador, onde você pode selecionar o botão Click me para incrementar o contador.

Alterar o aplicativo

Deixe o navegador aberto com a página Contador carregada. Usando o dotnet watch comando para executar o aplicativo, você pode fazer alterações na marcação e no código do aplicativo sem precisar recompilar o aplicativo para refletir as alterações no navegador.

O componente CounterRazor que renderiza a página da Web do contador está localizado em Components/Pages/Counter.razor no projeto. O Razor é uma sintaxe para a combinação de marcação HTML com o código C# projetada para melhorar a produtividade do desenvolvedor.

Abra o Counter.razor arquivo em um editor de texto e anote algumas linhas interessantes que renderizam o conteúdo e fazem o recurso de contador do componente funcionar.

Components/Pages/Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

O arquivo começa com uma linha que indica o caminho relativo do componente (/counter):

@page "/counter"

O título da página é definido por <PageTitle> marcas:

<PageTitle>Counter</PageTitle>

Um título H1 é exibido:

<h1>Counter</h1>

Um elemento de parágrafo (<p>) exibe a contagem atual, que é armazenada em uma variável chamada currentCount:

<p role="status">Current count: @currentCount</p>

Um botão (<button>) permite que o usuário incremente o contador, que ocorre quando um clique de botão executa um método C# chamado IncrementCount:

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

O @code bloco contém o código C# que o componente executa:

• A variável currentCount de contador é estabelecida com um valor inicial de zero.
• O IncrementCount método é definido. O código dentro do método incrementa a currentCount variável por um cada vez que o método é invocado.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Vamos alterar o incremento do contador no método IncrementCount.

Altere a linha para que currentCount seja incrementado por um valor de dez cada vez que IncrementCount for chamado.

- currentCount++;
+ currentCount += 10;

Salve o arquivo.

Assim que você salva o arquivo, o aplicativo em execução é atualizado automaticamente porque você usou o dotnet watch comando. Volte para o aplicativo no navegador e selecione o botão Click me na página do Contador. Veja como o contador agora incrementa de seu valor atual de um para onze. Cada vez que o botão é selecionado, o valor é incrementado em dez.

Desligar o aplicativo

Siga estas etapas:

• Feche a janela do navegador.
• Para desligar o aplicativo, pressione Ctrl+C no shell de comando.

Congratulations! Você concluiu este tutorial com êxito.

Próximas etapas

Neste tutorial, você aprendeu a:

• Crie um Blazor Web App.
• Execute o aplicativo.
• Altere o aplicativo.
• Desligue o aplicativo.

Para saber mais sobre os conceitos básicos do ASP.NET Core, confira o seguinte:

Visão geral dos conceitos básicos do ASP.NET Core

Tutoriais adicionais

Tipo de aplicativo	Scenario	Tutorials
Aplicativo Web	Novo servidor e desenvolvimento da Web do cliente com Blazor	Criar um Blazor aplicativo de lista de tarefas e Criar um Blazor aplicativo de banco de dados de filmes (Visão geral)
Web API	Processamento de dados baseado em servidor com APIs mínimas	Tutorial: Criar uma API mínima com o ASP.NET Core
Aplicativo RPC (Chamada de Procedimento Remoto)	Serviços Contract-First usando Buffers de Protocolo	Criar um cliente e um servidor .NET gRPC no ASP.NET Core
Aplicativo em tempo real	Comunicação bidirecional de servidor/cliente	Introdução ao ASP.NET CoreSignalR

Recursos adicionais

• Introdução ao .NET
• Visual Studio
• Código do Visual Studio
• Comunidade de desenvolvedores do .NET
• .NET Live TV