Razor Components - Blog da TreinaWeb Razor Components - Blog da TreinaWeb
Posts da Tag: Razor Components - Blog da TreinaWeb
Em um artigo passado, falei sobre o Razor Components. Este novo tipo de aplicação, presente no .NET Core 3.0. Como dito anteriormente, o Razor Components é uma evolução do Blazor. Uma forma de criar componentes web no C#. Uma analogia seria com os componentes de frameworks JavaScript, como React e Angular.
Assim como nesses frameworks, os componentes do Razor encapsulam toda a lógica. Podendo ser adicionados em qualquer aplicação ASP.NET.
Para compreender isso, vamos colocar a mão na massa.
Este artigo está sendo escrito com base nas definições do NET Core 3 Preview 3, então no futuro algumas informações não podem ser compatíveis com a versão mais atual do .NET Core. E os exemplos demostrados aqui, requerem esta versão do framework ou uma superior.
Estrutura de um componente Razor
Pelo terminal, é possível criar uma aplicação Razor Components com o comando abaixo:
dotnet new razorcomponents -n RazorApp
Na aplicação criada, você notará uma pasta chamada Components e dentro dela localizará arquivos com a extensão *.razor:
Esses arquivos são os componentes do Razor. Ao verificar o código de um componente, teremos:
O início (@page "/counter") define a URL do componente. Dentro dela há códigos HTML e um bloco com a anotação @functions:
Como o nome indica, no bloco desta anotação são definidas funções invocadas pelos componentes. Elas podem ser referenciadas no HTML do arquivo através da arroba (@) como no trecho abaixo:
Qualquer código definido neste ponto pode ser referenciado no HTML com a arroba, como é o caso da variável currentCount:
Ao executar a aplicação (dotnet run), podemos acessar o componente em /counter e visualizar o seu comportamento:
Criando um componente/página Razor
Agora que conhecemos um pouco da estrutura de um componente Razor vamos criar o nosso. Este primeiro componente será uma página, então dentro da pasta Components/Pages, adicione um arquivo chamado Posts.razor e nele adicione o código abaixo:
@using RazorApp.Services
@inject BlogService blogService
<h1 class="card-title">@post.Title</h1>
<p class="card-text">@post.Content</p>
Post[] posts;
posts = await blogService.GetPostsAsync();
Note que nesta página estamos definindo a listagem de posts:
Dados que virão de um service (BlogService), chamado na criação da página:
Assim, é necessário definir este service:
namespace RazorApp.Services
public Task<Post[]> GetPostsAsync()
return Task.FromResult<Post[]>(new Post[]
new Post { Title = "Post 1", Content = "Conteúdo do Post 1" },
new Post { Title = "Post 2", Content = "Conteúdo do Post 2" },
new Post { Title = "Post 3", Content = "Conteúdo do Post 3" },
new Post { Title = "Post 4", Content = "Conteúdo do Post 4" }
Que contém apenas dados de exemplo. Em uma aplicação real, esta informação poderia vir do banco e/ou uma API.
Também será necessário definir o model Post:
"Injetar" o service na classe Startup:
services.AddSingleton<BlogService>();
Por fim, no arquivo NavMenu.razor (presente na pasta Components/Shared), adicione um link para a página que acabamos de definir:
Ao acessar a aplicação, teremos acesso a esta página:
Criando um componente reutilizável
Agora que vimos como criar uma página, veremos como criar um componente reutilizável, que poderá ser adicionado em outras páginas e/ou componentes da aplicação.
Assim como o anterior, este componente será criado dentro da pasta Components/Pages, agora com o nome de LikeButton.razor e nele adicione o código abaixo:
<button onclick="@Liked"
class="btn @( likedCount == 0 ? "btn-outline-secondary" : "btn-outline-danger" )">
@likedCount
[Parameter] int InitialLikedCount { get; set; }
int likedCount = 0;
likedCount = InitialLikedCount;
void Liked()
likedCount++;
Neste componente estamos definindo um botão:
Este botão contém o ícone de coração do font-awesome, então é necessário adicionar a referência dela na página Index.cshml (localizada em Pages). No bloco @functions, é definido um parâmetro:
Que será atribuído a variável likedCount na inicialização da página:
Como é possível notar, ao definir [Parameter] , indicamos que o valor da variável irá como um atributo do componente.
Já no método Liked a variável likedCount é incrementada:
Para utilizar este componente, basta defini-lo em outra página como uma tag:
<LikedButton>
Faça isso no componente que criamos anteriormente:
Inicialmente não estamos passando o parâmetro para o componente, mesmo assim ele funciona:
Caso seja passado o parâmetro:
<LikeButton InitialLikedCount="5" />
O componente será inicializado com o valor informado:
Este é um exemplo simples de criação e reutilização de componentes, mas nele é possível notar o poder deste recurso. Tenho certeza que não irá demorar muito para termos componentes para ecossistemas específicos, como Bootstrap, Material, etc.