Crie seu primeiro aplicativo Web com o ASP.NET Core usando o Blazor
Intro
Finalidade
Crie o seu primeiro aplicativo Web com ASP.NET Core usando o Blazor no Visual Studio Code.
Pré-requisitos
Nenhum.
macOS 12.0 ou versões posteriores.
Tempo até a conclusão:
10 a 15 minutos + tempo de download/instalação
Situação
Criar, usar e modificar um componente de contador simples.
Prefere o Visual Studio ou a CLI?
Se preferir, você também pode começar a usar o Blazor usando o Visual Studio ou a interface de linha de comando.
Baixar e instalar
Para criar o seu primeiro aplicativo do .NET, você precisará instalar o SDK do .NET, o Visual Studio Code e o Kit de Desenvolvimento em C#.
O que são o SDK do .NET, o Visual Studio Code e o Kit de Desenvolvimento em C#?
O SDK (Software Development Kit) do .NET é uma coleção gratuita e de software livre de ferramentas e bibliotecas que você precisará para criar e executar aplicativos usando C#. C# é a linguagem de programação moderna orientada a objeto que você usará para este tutorial.
O Visual Studio Code (VS Code) é o editor de código leve, gratuito e de software livre mais popular do mundo. É aqui que você escreverá o seu código em C#.
O Kit de Desenvolvimento em C# é um conjunto avançado de extensões do VS Code que facilita o desenvolvimento em C#. Ele ajuda você a escrever, testar e depurar o seu código à medida que você cria aplicativos.
O arquivo de Configuração do WinGet do .NET instalará o SDK do .NET 9, o VS Code e o Kit de Desenvolvimento em C# para você. Se você já tiver uma parte instalada, o WinGet irá ignorar essa etapa de instalação.
Para criar seu primeiro aplicativo .NET com o Visual Studio Code, configure seu ambiente:
-
1. Baixar e instalar o SDK do .NET:
Baixar o SDK do .NET 9 x64 (Intel)
Baixar o SDK do .NET 9 Arm64 (Apple Silicon)Se você estiver em um Mac com um chip Apple M1 ou M2, precisará instalar a versão Arm64 do SDK.
-
Baixe e instale o VS Code:
-
Abra o VS Code e selecione o botão Extensões na Barra de Atividades do VS Code à esquerda. Digite C# na barra de pesquisa, selecione Kit de Desenvolvimento em C# e, em seguida, selecione o botão Instalar na página de extensão do Kit de Desenvolvimento C#.
![Kit de desenvolvimento em C# do VS Code]()
Baixar e executar o arquivo de configuração
Clique no link a seguir para baixar o arquivo WinGet:
Abra a pasta downloads e clique duas vezes no arquivo para iniciar a instalação. Se você for solicitado a selecionar um aplicativo para executar o arquivo, selecione Gerenciador de Pacotes do Windows Cliente.
Um terminal será aberto e você deverá verá que o arquivo de Configuração do WinGet está pronto para instalar o SDK do .NET 9, o VS Code se você não o tiver e o Kit de Desenvolvimento em C#.
Leia o contrato de licença e concorde com ele digitando "y" no terminal e pressionando Enter.
Observação: você é responsável por entender as definições de configuração que está optando por executar. A Microsoft não é responsável pelo arquivo de configuração que você criou ou importou. Essa configuração talvez possa alterar as definições no Windows, instalar software, alterar configurações de software (incluindo configurações de segurança) e aceitar contratos de usuário para pacotes e serviços de terceiros em seu nome. Ao executar esse arquivo de configuração, você reconhece que entende e concorda com esses recursos e definições. Todos os aplicativos instalados são licenciados para você pelos respectivos proprietários. A Microsoft não é responsável nem concede licenças para pacotes ou serviços de terceiros.
O WinGet está instalando tudo o que você precisa para começar! O tempo de instalação dependerá das especificações do computador, da velocidade da rede e muito mais. Pode levar até 5 minutos, mas até 15 minutos para ser concluído.
Algumas etapas de instalação podem exigir permissões no nível do administrador para serem instaladas. Esteja em busca de prompts de UAC (Controle de Conta de Usuário) em seu barra de tarefas do Windows e clique nesse ícone. Para continuar a instalação, você deve selecionar Sim se solicitado.
Quando a instalação for concluída, você deverá ver a saída abaixo no terminal.
Verifique se tudo foi instalado corretamente
Agora que o seu ambiente está configurado, vá para Arquivar na Barra de Tarefas do Windows e digite Visual Studio Code. Clique no aplicativo para abrir o VS Code.
Depois de configurar seu ambiente, abra um novo terminal do VS Code. Na barra de ferramentas, selecione Terminal e, em seguida, Novo Terminal.
Observação: se você abrir VS Code por meio de um terminal, será necessário habilitar o de Confiança do Workspace.
Agora, abra um novo terminal acessando a barra de ferramentas e selecionando Terminal e Novo Terminal.
No terminal, execute o comando a seguir para verificar sua instalação.
dotnet
Se a instalação for bem-sucedida, você deverá ver uma saída semelhante à seguinte:
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Encontrou um erro?
Se você receber um erro o "dotnet" não é reconhecido como um comando interno ou externo, verifique se você abriu um novo terminal do VS Code. Se a reinicialização do VS Code ou a reinicialização do computador não resolver o problema, use o botão Encontrei um problema para obter ajuda para corrigir o problema.
Criar seu aplicativo
- Abra a paleta de comandos no VS Code pressionando CTRL+SHIFT+P.
- Abra a paleta de comandos no VS Code pressionando CMD+SHIFT+P.
- Digite .NET: para ver os comandos que você pode executar com o Kit de Desenvolvimento em C#.
- Localize e selecione .NET: Novo Projeto para criar um novo projeto .NET.
- Role para baixo e selecione Blazor Web App.
- Escolha o local da pasta em que você deseja salvar seu projeto.
- Nomeie o projeto
BlazorAppna paleta de comandos quando solicitado. Pressione Enter para confirmar.
Habilite a Confiança do Workspace marcando a caixa e selecionando Sim, eu confio nos autores.
Se você tiver uma Assinatura do Visual Studio, entre em sua conta. Se você não vir um prompt pop-up, clique no ícone C# na Barra de Status do VS Code na parte inferior direita da janela.
Na Barra Lateral, certifique-se de que o VS Code Explorer esteja aberto. Aqui, você verá a pasta BlazorApp e o Gerenciador de Soluções.Acompanhe o vídeo abaixo para: recolher a pasta BlazorApp, abrir o projeto Gerenciador de Soluções, abrir o projeto BlazorApp e arrastar e soltar o Gerenciador de Soluções mais para cima.
- Recolha a pasta
BlazorAppno VS Code Explorer. - Clique na divisa à esquerda do Gerenciador de Soluções para expandi-lo.
- Clique na divisa à esquerda do projeto do
BlazorAppno Gerenciador de Soluções para expandi-lo. - Arraste e solte o Gerenciador de Soluções abaixo de BlazorApp.
O seu projeto foi criado e carregado no Visual Studio Code. Dê uma olhada no conteúdo do seu projeto usando o Gerenciador de Soluções.
Vários arquivos foram criados para fornecer a você um aplicativo Blazor simples pronto para ser executado.
Program.csé o ponto de entrada para o aplicativo que inicia o servidor e onde você configura os serviços de aplicativo e middleware.-
Dentro do diretório
Components:- O
App.razoré o componente raiz do aplicativo. Routes.razorconfigura o roteador Blazor.- O diretório
Pagescontém algumas páginas da Web de exemplo para o aplicativo.
- O
BlazorApp.csprojdefine o projeto do aplicativo e suas dependências. Ele pode ser exibido clicando duas vezes no nó do projeto BlazorApp no Gerenciador de Soluções.- O arquivo
launchSettings.jsondentro do diretórioPropertiesdefine diferentes configurações de perfil para o ambiente de desenvolvimento local. Um número de porta é atribuído automaticamente na criação do projeto e salvo neste arquivo.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Executar seu aplicativo
Selecione o ícone Executar e depurar na Barra de Atividades no lado esquerdo do workspace.
Selecione o botão Executar e depurar.
O Visual Studio Code abrirá um menu de configurações de inicialização. Selecione C#: BlazorApp [Configuração Padrão].
Em seguida, você precisa selecionar um depurador. Selecione C#.
Aguarde até que o aplicativo seja iniciado no navegador. Após acessar a página a seguir, você terá executado com êxito seu primeiro aplicativo Blazor!
Você pode parar o aplicativo a qualquer momento clicando no botão Parar na barra de ferramentas superior.
Para executar novamente o aplicativo, selecione o menu suspenso à direita do botão Executar no canto superior direito e selecione Executar projeto associado a este arquivo.
A página exibida é definida pelo arquivo Home.razor localizado no diretório Components/Pages. Esta é a aparência do seu conteúdo:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.Ele já contém o código que o define como a página inicial e exibe o texto Hello, world! e Welcome to your new app. O componente PageTitle define o título da página atual para que ele seja exibido na guia do navegador.
Encontrou um erro?
Se você receber uma mensagem de erro dizendo "Sua conexão não é privada" com o código de erro NET::ERR_CERT_INVALID, tente reiniciar todas as janelas do navegador para que o novo certificado possa ser obtido pelo navegador e execute o aplicativo novamente.
Se o problema não for resolvido, selecione o botão Ocorreu um problema abaixo para obter ajuda para corrigir o problema.
Experimente o contador
No aplicativo em execução, navegue até a página Contador clicando na guia Contador na barra lateral à esquerda. A página a seguir deve ser exibida:
Selecione o botão Clique em mim para incrementar a contagem sem uma atualização de página. Incrementar um contador em uma página da Web normalmente requer escrever JavaScript, mas com o Blazor, você pode usar C#.
Você pode encontrar a implementação do componente Counter no arquivo Counter.razor localizado no diretório Components/Pages.
@page "/counter"
@rendermode InteractiveServer
<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++;
}
}Uma solicitação de /counter no navegador, conforme especificado pela diretiva @page na parte superior, faz com que o componente Counter renderize seu conteúdo. A diretiva @rendermode habilita a renderização interativa do servidor no componente para que ele possa manipular os eventos de interface do usuário do navegador.
Sempre que o botão clicar em mim é selecionado:
- O evento
onclické acionado. - O método
IncrementCounté chamado. - O
currentCounté incrementado. - O componente é renderizado para mostrar a quantidade atualizada.
Adicionar um componente
Cada um dos arquivos .razor define um componente de interface do usuário que pode ser reutilizado.
Abra o arquivo Home.razor no Visual Studio. O arquivo Home.razor já existe e foi criado quando você criou o projeto. Ele está localizado na pasta Components/Pages no diretório BlazorApp criado anteriormente.
Abra o arquivo Home.razor em um editor de texto dHome.razor sua escolha. O arquivo Home.razor já existe e foi criado quando você executou o comando dotnet new. Ele está localizado na pasta Components/Pages no diretório BlazorApp criado anteriormente.
Adicione um componente Counter à página Inicial do aplicativo adicionando um elemento <Counter /> ao final do arquivo Home.razor.
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />Execute novamente o aplicativo para ver as alterações. O componente Counter será exibido na página inicial.
Depois que essa alteração for salva, o comando dotnet watch aplicará a alteração ao aplicativo em execução para que o componente Counter seja exibido na home page.
Modificar um componente
Os parâmetros de componente são especificados usando atributos ou conteúdo filho, que permitem definir propriedades no componente filho. Defina um parâmetro no componente Counter para especificar o quanto ele é incrementado a cada clique no botão:
- Adicione uma propriedade pública para
IncrementAmountcom um atributo[Parameter]. - Altere o método
IncrementCountpara usarIncrementAmountao incrementar o valor decurrentCount.
O código a seguir mostra como obtê-lo. As linhas realçadas mostram as alterações.
@page "/counter"
@rendermode InteractiveServer
<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;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}Em Home.razor, atualize o elemento <Counter> para adicionar um atributo IncrementAmount que altera o valor do incremento para dez, conforme mostrado pela linha realçada no código a seguir:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />Aplique a alteração no aplicativo ao clicar no botão Recarga Dinâmica. O componente Home já tem seu respectivo contador que aumenta em dez cada vez que o botão Click me é selecionado, conforme mostrado na imagem a seguir. O componente Counter (Counter.razor) no /counter continua a ser incrementado em um.
O componente Home já tem seu respectivo contador que aumenta em dez cada vez que o botão Click me é selecionado, conforme mostrado na imagem a seguir. O componente Counter (Counter.razor) no /counter continua a ser incrementado em um.
Próximas etapas
Parabéns, você criou e executou seu primeiro aplicativo Blazor!
Continuar aprendendo
Agora que você tem as noções básicas, continue criando seu primeiro aplicativo Blazor com o módulo de aprendizado autoguiado do Blazor no Microsoft Learn onde você criará um aplicativo de lista de tarefas pendentes.
Microsoft Learn: crie um aplicativo de lista de tarefas pendentes do Blazor
Blazor para iniciantes
Saiba como criar um aplicativo Blazor completo do início ao fim:
Você também pode estar interessado em...
