.NET Core 3.0 - Criando componentes no Razor Components \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 08 Horas 34 Min 54 Seg Tempo restante da oferta: 08 34 54 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) .NET Core 3.0 - Criando componentes no Razor Components [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) [ .NET Core ](https://www.treinaweb.com.br/blog/categoria/net-core) # .NET Core 3.0 - Criando componentes no Razor Components Veja neste artigo como é a estrutura de um componente do Razor Componente e aprenda a criar um. [ Wladimilson M. Nascimento ](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS.png) Em um artigo passado, falei sobre o [Razor Components](https://www.treinaweb.com.br/blog/net-core-3-0-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. [ ![C# (C Sharp) Básico](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/csharp.svg) Curso C# (C Sharp) Básico Conhecer o curso ](https://www.treinaweb.com.br/curso/csharp-basico) 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](https://devblogs.microsoft.com/dotnet/announcing-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: ```dos 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**: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/13162825/razorapp-pasta-components.png) Esses arquivos são os componentes do Razor. Ao verificar o código de um componente, teremos: ```csharp @page "/counter" Counter Current count: @currentCount Click me @functions { int currentCount = 0; void IncrementCount() { currentCount++; } } ``` O início (`@page "/counter"`) define a URL do componente. Dentro dela há códigos HTML e um bloco com a anotação `@functions`: ```csharp @functions { int currentCount = 0; void IncrementCount() { currentCount++; } } ``` 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: ```html Click me ``` Qualquer código definido neste ponto pode ser referenciado no HTML com a arroba, como é o caso da variável `currentCount`: ```html Current count: @currentCount ``` Ao executar a aplicação (`dotnet run`), podemos acessar o componente em `/counter` e visualizar o seu comportamento: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/13170910/counter.gif) ## 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: ```csharp @page "/posts" @using RazorApp.Services @inject BlogService blogService Posts @if (posts == null) { Loading... } else { @foreach (var post in posts) { @post.Title @post.Content } } @functions { Post[] posts; protected override async Task OnInitAsync() { posts = await blogService.GetPostsAsync(); } } ``` Note que nesta página estamos definindo a listagem de posts: ```html @foreach (var post in posts) { @post.Title @post.Content } ``` Dados que virão de um service (`BlogService`), chamado na criação da página: ```csharp protected override async Task OnInitAsync() { posts = await blogService.GetPostsAsync(); } ``` Assim, é necessário definir este service: ```csharp namespace RazorApp.Services { public class BlogService { public Task GetPostsAsync() { return Task.FromResult(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. [ ![C# (C Sharp) Intermediário](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/csharp.svg) Curso C# (C Sharp) Intermediário Conhecer o curso ](https://www.treinaweb.com.br/curso/csharp-intermediario) Também será necessário definir o model `Post`: ```csharp public class Post { public string Title { get; set; } public string Content { get; set; } } ``` “Injetar” o service na classe `Startup`: ```csharp public void ConfigureServices(IServiceCollection services) { //Código omitido services.AddSingleton(); } ``` Por fim, no arquivo **NavMenu.razor** (presente na pasta *Components/Shared*), adicione um link para a página que acabamos de definir: ```html Posts ``` Ao acessar a aplicação, teremos acesso a esta página: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/13162825/pagina-posts.png) Simples, não é? ## 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: ```csharp @likedCount @functions { [Parameter] int InitialLikedCount { get; set; } int likedCount = 0; protected override void OnInit() { likedCount = InitialLikedCount; } void Liked() { likedCount++; } } ``` Neste componente estamos definindo um botão: ```html @likedCount ``` 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: ```csharp [Parameter] int InitialLikedCount { get; set; } ``` Que será atribuído a variável `likedCount` na inicialização da página: ```csharp protected override void OnInit() { likedCount = InitialLikedCount; } ``` 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: ```csharp void Liked() { likedCount++; } ``` Para utilizar este componente, basta defini-lo em outra página como uma tag: ```html ``` Faça isso no componente que criamos anteriormente: ```html @foreach (var post in posts) { @post.Title @post.Content } ``` Inicialmente não estamos passando o parâmetro para o componente, mesmo assim ele funciona: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/13170715/LikedButton.gif) Caso seja passado o parâmetro: ```html @foreach (var post in posts) { @post.Title @post.Content } ``` O componente será inicializado com o valor informado: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/03/13162824/pagina-posts-likedbutton.png) [ ![C# (C Sharp) Avançado](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/csharp.svg) Curso C# (C Sharp) Avançado Conhecer o curso ](https://www.treinaweb.com.br/curso/csharp-avancado) ## Conclusão 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. - [ #C# ](https://www.treinaweb.com.br/blog/tag/csharp) - [ #.NET Core 3.0 ](https://www.treinaweb.com.br/blog/tag/net-core-3-0) - [ #Razor Components ](https://www.treinaweb.com.br/blog/tag/razor-components) Autor ![Wladimilson M. Nascimento](//secure.gravatar.com/avatar/f0dd442f156a3eacd2880e9cd0eafbd1?d=mm) ## Wladimilson M. Nascimento Instrutor, nerd, cinéfilo e desenvolvedor nas horas vagas. Graduado em Ciências da Computação pela Universidade Metodista de São Paulo. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core) Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/enviando-e-mails-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Enviando e-mails no ASP.NET Core ](https://www.treinaweb.com.br/blog/enviando-e-mails-no-asp-net-core) O .NET possui um módulo nativo para o envio de e-mails. Entretanto, veja como facilitar este processo utilizando a biblioteca Coravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/14132313/o-que-e-o-asp-net-core-400x280.png) [ ASP .NET ](https://www.treinaweb.com.br/blog/categoria/asp-net) 7 anos atrás ## [ O que é o ASP.NET Core? ](https://www.treinaweb.com.br/blog/o-que-e-o-asp-net-core) Uma evolução do ASP.NET, o ASP.NET Core é uma plataforma leve, rápida e modular, que funciona em conjunto com a plataforma .NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/10/entity-framework-core-com-mysql-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Entity Framework Core com MySQL ](https://www.treinaweb.com.br/blog/entity-framework-core-com-mysql) Veja um exemplo de como se conectar ao MySQL no Entity Framework Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/30133314/swagger-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Documentando uma ASP.NET Core Web API com o Swagger ](https://www.treinaweb.com.br/blog/documentando-uma-asp-net-core-web-api-com-o-swagger) Aprenda a documentar uma aplicação ASP .NET Core Web API com o Swagger. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/google-400x280.jpg) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 10 anos atrás ## [ Google na .NET Foundation? SQL Server para Linux? Visual Studio para MacOS? Saiba como foi o Connect() ](https://www.treinaweb.com.br/blog/google-na-net-foundation-sql-server-para-linux-visual-studio-para-macos-saiba-como-foi-o-connect) Não conseguiu acompanhar a Connect() 2016 da Microsoft? Não tem problema, aqui no TreinaWeb te trazemos todas as incríveis novidade que foram apresentadas! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/01172547/NET-CORE-3-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ .NET Core 3.0 - Criando tarefas de segundo plano com Worker Service ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-tarefas-de-segundo-plano-com-worker-service) Você já quis criar tarefas em segundo plano com o .NET Core? Na versão 3.0 foi introduzido o template Worker Service que facilita a criação deste tipo de aplicação. Caso tenha passado por uma situação assim, neste artigo mostramos como você pode aproveitar este novo recurso do .NET Core 3.0. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/06113752/streaming-api-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ ASP.NET Core - Criando uma Streaming API ](https://www.treinaweb.com.br/blog/asp-net-core-criando-uma-streaming-api) Streaming não se resume apenas a conteúdo de media. Aprenda neste artigo como criar uma streaming API de dados no ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/clicando-publicando-lambda-com-net-core-cli-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Criando e publicando uma função AWS Lambda com o CLI do .NET Core ](https://www.treinaweb.com.br/blog/criando-e-publicando-uma-funcao-aws-lambda-com-o-cli-do-net-core) O .NET Core CLI, que já é uma ferramenta poderosa e com recursos fornecidos pela AWS, também permite criar e gerar funções Lambda. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/criando-aplicacoes-desktop-multiplataforma-com-asp-net-core-e-electron-net-400x280.png) [ ASP .NET ](https://www.treinaweb.com.br/blog/categoria/asp-net) 6 anos atrás ## [ Criando aplicações desktop multiplataforma com ASP.NET Core e Electron.NET ](https://www.treinaweb.com.br/blog/criando-aplicacoes-desktop-multiplataforma-com-asp-net-core-e-electron-net) Otimize a criação de aplicações desktop reutilizando códigos do ASP.NET Core, com a ajuda do Electron.NET. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Criando um Chat com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/criando-um-chat-com-asp-net-core-signalr) Continuando o estudo do SignalR, aprenda como criar um chat utilizando esta biblioteca de aplicações em tempo real do ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/03143715/CARTER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Criando uma API RESTful com o Carter e .NET Core ](https://www.treinaweb.com.br/blog/criando-uma-api-restful-com-o-carter-e-net-core) O Carter é um framework para .NET Core, que permite criar API RESTful de forma rápida, simples e elegante. O conheça neste artigo. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **08h 34min 54s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58