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 framework web de front-end .NET que suporta renderização pelo servidor e interatividade do cliente num modelo único 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 .NET mais recente em Download .NET.

Criar um Blazor Web App

Abra uma linha de comandos num local apropriado para a aplicação de exemplo e utilize o seguinte comando para criar um Blazor Web Apparquivo. 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 de destino do aplicativo:

dotnet watch

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

Alterar a aplicação

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 ter que reconstruir o aplicativo para refletir as alterações no navegador.

O componente CounterRazor que renderiza a página web 'Counter' está localizado em Components/Pages/Counter.razor no projeto. Razor é uma sintaxe para combinar marcação HTML com código C# projetado para produtividade do desenvolvedor.

Abra o Counter.razor arquivo em um editor de texto e observe 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> tags:

<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, o que ocorre quando um clique no botão executa um método C# chamado IncrementCount:

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

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

• A variável currentCount contadora é estabelecida com um valor inicial de zero.
• O IncrementCount método é definido. O código dentro do método incrementa a currentCount variável em 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 chamada.

- 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 ao aplicativo no navegador e selecione o botão Click me na página do Contador. Testemunhe como o contador agora aumenta de seu valor existente de um para um valor de onze. Cada vez que o botão é selecionado, o valor aumenta em dez.

Encerrar a aplicação

Siga estes passos:

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

Congratulations! Você concluiu este tutorial com sucesso.

Próximos passos

Neste tutorial, você aprendeu como:

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

Para saber mais sobre os fundamentos do ASP.NET Core, consulte o seguinte:

ASP.NET Visão geral dos fundamentos principais

Tutoriais adicionais

Tipo de aplicativo	Scenario	Tutorials
Aplicação Web	Novo servidor e cliente de desenvolvimento web com Blazor	Criar uma aplicação de Blazor lista de tarefas e Criar uma aplicação de banco de dados de Blazor filmes (Visão Geral)
Web API	Processamento de dados baseado em servidor com APIs mínimas	Tutorial: Crie uma API Mínima com ASP.NET Core
Aplicativo de Chamada de Procedimento Remoto (RPC)	Serviços contratuais usando buffers de protocolo	Criar um cliente e um servidor gRPC .NET no ASP.NET Core
Aplicação em tempo real	Comunicação bidirecional servidor/cliente	Introdução ao ASP.NET Core SignalR

Recursos adicionais

• Introdução ao .NET
• Estúdio Visual
• Código do Visual Studio
• Comunidade de desenvolvedores .NET
• .NET TV ao vivo