Crie seu primeiro aplicativo Web com o ASP.NET Core usando o Blazor
Intro
Finalidade
Crie seu primeiro aplicativo Web com o ASP.NET Core usando o Blazor.
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.
Baixar e instalar
Se preferir, você também pode começar a usar o Blazor usando a versão da interface de linha de comando do tutorial.
Durante a instalação, a carga de trabalho ASP.NET e desenvolvimento Web deve estar selecionada (o link de instalação acima já pré-seleciona essa opção).
Já tem o Visual Studio 2022?
Se você já tiver o Visual Studio 2022, certifique-se de que ele esteja atualizado e de que a carga de trabalho necessária esteja instalada:
- Selecione a tecla Windows, digite Instalador do Visual Studio e pressione Enter.
- Se solicitado, permita que o instalador se atualize.
- Se uma atualização do Visual Studio 2022 estiver disponível, um botão para Atualizar será mostrado. Selecione-o para atualizar antes de modificar a instalação. Este tutorial só funciona com Visual Studio 2022 17.8 e versões posteriores.
- Localize sua instalação do Visual Studio 2022 e selecione o botão Modificar.
- Se ainda não estiver selecionado, selecione a carga de trabalho ASP.NET e desenvolvimento Web e selecione o botão Modificar. Caso contrário, basta fechar a janela de diálogo.
Para começar a criar aplicativos .NET, baixe e instale o SDK do .NET.
Download do SDK do .NET 8 x64 (Intel)
Download do SDK do .NET 8 Arm64 (Apple Silicon)
Se você estiver em um Mac com um chip Apple M1 ou M2, precisará instalar a versão Arm64 do SDK.
Verifique se tudo foi instalado corretamente
Depois de instalar, abra um novo terminal e execute o seguinte comando:
dotnet --versionSe a instalação tiver sido bem-sucedida, você deverá ver a versão 8.0.100 ou superior sendo exibida:
8.0.100Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Encontrou um erro?
Se você receber um erro zsh: comando não encontrado: dotnet, verifique se você abriu uma nova janela de terminal. Se o problema não for resolvido, use o botão Ocorreu um problema para obter ajuda para corrigir o problema.
Se você receber um erro dotnet: comando não encontrado, verifique se você abriu uma nova janela de terminal. Se o problema não for resolvido, use o botão Ocorreu um problema para obter ajuda para corrigir o problema.
Criar seu aplicativo
-
Inicie o Visual Studio e selecione Criar um novo projeto.
![O Visual Studio oferece quatro opções de introdução, a última é criar um novo projeto e o que desejamos usar]()
- Na janela Criar um novo projeto, digite Blazor na caixa de pesquisa e pressione Enter.
-
Selecione o modelo Blazor Web App e selecione Next.
![Caixa de diálogo do novo projeto do Visual Studio com Blazor Server App selecionado]()
- Na janela Configurar seu novo projeto, insira BlazorApp como o nome do projeto e selecione Avançar.
-
Na janela Informações adicionais, selecione .NET 8.0 (Suporte a Longo Prazo) na lista suspensa Framework se ainda não estiver selecionado e clique no botão Create.
Ao criar um Aplicativo Blazor Web, você pode selecionar entre várias opções, como ativar a autenticação, quais modos de renderização interativos ativar e quanto do aplicativo você quer que seja interativo. Para este aplicativo, verifique se os padrões estão selecionados do seguinte modo:
- Tipo de autenticação: nenhum
- Modo de renderização interativo: Servidor
- Local de interatividade: por página/componente
![Caixa de diálogo de informações adicionais do Visual Studio mostrando o .NET 8.0 no menu suspenso Framework.]()
Seu projeto é criado e carregado no Visual Studio. 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.
Em seu terminal, execute o seguinte comando para criar seu aplicativo:
dotnet new blazor -o BlazorAppEsse comando cria seu novo projeto do Aplicativo Web Blazor e o coloca em um novo diretório chamado BlazorApp na sua localização atual.
Navegue até o novo BlazorApp criado pelo comando anterior:
cd BlazorAppDê uma olhada no conteúdo do diretório do BlazorApp.
lsVários arquivos foram criados no diretório do BlazorApp, para oferecer a você um aplicativo simples e mais rápido que está pronto para execução.
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
- O
BlazorApp.csprojdefine o projeto do aplicativo e suas dependências. - 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.
Anote o caminho do diretório do BlazorApp, pois você o usará posteriormente no tutorial.
Se tudo estiver certo, selecione o botão Continuar abaixo para ir para a próxima etapa.
Executar seu aplicativo
Clique no botão Iniciar depuração (seta verde) na barra de ferramentas de depuração no Visual Studio para executar seu aplicativo.
Depois que o aplicativo estiver em execução, você poderá aplicar alterações de código ao aplicativo em execução clicando no botão Recarga Dinâmica.
Você pode parar o aplicativo a qualquer momento clicando no botão Parar na barra de ferramentas superior.
Na primeira vez que você executar um aplicativo Web no Visual Studio, ele criará um certificado de desenvolvimento para hospedar o aplicativo em HTTPS e, em seguida, solicitará que você confie no certificado. Recomendamos que você concorde em confiar no certificado. O certificado será usado somente para desenvolvimento local e sem ele a maioria dos navegadores reclamarão sobre a segurança do site.
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!
Em seu terminal, execute o seguinte comando:
dotnet watchO comando dotnet watch criará e iniciará o aplicativo e, em seguida, atualizará o aplicativo sempre que você fizer alterações de código. Você pode parar o aplicativo a qualquer momento selecionando Ctrl+C.
Aguarde que o aplicativo exiba que está ouvindo em http://localhost:<port number> e que o navegador seja iniciado nesse endereço.
Aguarde até que o aplicativo exiba que ele está escutando em http://localhost:<port number> e abra um navegador e navegue até esse endereço.
Depois de acessar a página a seguir, você terá executado com êxito seu primeiro aplicativo Blazor!
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 />Clique na Recarga Dinâmica para aplicar a alteração ao aplicativo em execução. O componente Counter será exibido na home page.
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...
