ASP.NET Core 1.0: utilizando View Components

Artigo
17/01/2024

O objetivo deste artigo é demonstrar a implementação e o uso de View Components em projetos baseados no ASP.NET Core 1.0.

Introdução

Como já acontecia com as Partial Views em versões anteriores do ASP.NET MVC, os Views Components também foram concebidos de forma a favorecer o reuso e permitir a inclusão de conteúdo HTML em pontos específicos em páginas de um projeto. A diferença agora no ASP.NET Core 1.0 está na forma como estes componentes são definidos.

Um View Component dispensa a codificação de um novo Controller com uma Action associada ao processamento do item ou, mesmo, a alteração de uma construção pré-existente. A execução deste elemento acontecerá de forma assíncrona, possibilitando assim uma maior responsividade no acesso a Views que dependam destas estruturas.

A finalidade deste artigo é abordar o uso de View Components em projetos baseados no ASP.NET Core 1.0, com isto acontecendo nas próximas seções através da implementação de um exemplo prático.

Implementação

Para a construção do projeto descrito neste artigo foram utilizados como recursos:

O Microsoft Visual Studio Community 2015 Update 3 como IDE de desenvolvimento;
O .NET Core 1.0;
O ASP.NET Core 1.0.

O código-fonte da aplicação de exemplo foi disponibilizado no Technet Gallery, podendo ser baixado por meio do link:

https://gallery.technet.microsoft.com/Exemplo-de-utilizao-de-b310adec

Como primeiro passo será gerado um projeto do tipo ASP.NET Core Web Application (.NET Core) chamado TesteViewComponent:

Selecionar na sequência o template Web Application em ASP.NET Core Templates:

A próxima etapa consiste na implementação de um View Component chamado Lista. Este elemento receberá uma string com valores separados pelo caracter “|” (pipeline), produzindo como resultado uma lista HTML com os diferentes itens encontrados. A construção deste componente envolve:

Um tipo chamado ListaViewComponent, com este sendo responsável pelo processamento das chamadas ao View Component Lista;
Uma View chamada Default.cshtml, através da qual será gerado o HTML correspondente ao componente Lista.

Na imagem abaixo está a estrutura esperada para o View Component Lista:

Na listagem a seguir está a definição da classe ListaViewComponent. Analisando este tipo é possível observar que:

ListaViewComponent herda do tipo básico ViewComponent (namespace Microsoft.AspNetCore.Mvc);
O método InvokeAsync foi marcado com a palavra-chave async, devolvendo como resultado um instância do tipo IViewComponentResult (namespace Microsoft.AspNetCore.Mvc, gerada através da operação View) associada a uma Task (namespace System.Threading.Tasks). Será através desta operação que o View Component representado por ListaViewComponent será processado;
Um array de strings será obtido assincronamente em InvokeAsync, fazendo uso para isto do valor associado ao parâmetro sequencia a partir da operação FromResult da classe Task (o que exige o uso da palavra-chave await). Este resultado será então devolvido por meio de uma chamada ao método View ao final de InvokeAsync.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
 
namespace TesteViewComponent.ViewComponents
{
    public class  ListaViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(
            string sequencia)
        {
            var valores = await Task.FromResult(
                sequencia.Split(new char[] { '|' }));
            return View(valores);
        }
    }
}

Já na próxima listagem está o código correspondente à View Default.cshtml:

Analisando este conjunto de instruções é possível notar que a visualização para um View Component em nada difere de uma View tradicional;
O uso da instrução @model no início da View indica o tipo de objeto a ser manipulado por meio da propriedade Model (no caso, um array de strings). Um loop será executado a partir de Model, gerando assim uma lista não numerada com diferentes valores.

@model IEnumerable<string>
 
<style type="text/css">
    li {
        font-size: 22px;
    }
</style>
 
<ul>
    @foreach (var item in Model)
    {
        <li>@item</li>
    }
</ul>

Por fim, um último ajuste será realizado na View Index.cshtml de HomeController. O método InvokeAsync de Component será acionado, recebendo como parâmetros o nome do View Component (Lista), além de um de um objeto baseado em um tipo anônimo e cuja única propriedade corresponde ao valor esperado por ListaViewComponent:

<h2>Teste envolvendo o uso de View Components no ASP.NET Core 1.0</h2>
 
<p>
    <h2>Novas tecnologias:</h2>
</p>
@await Component.InvokeAsync("Lista",
    new { sequencia = ".NET Core 1.0|ASP.NET Core 1.0|AngularJS" })

Testes

Será necessário agora proceder com a execução do projeto TesteViewComponent a partir do Visual Studio. Na imagem a seguir está a tela inicial desta aplicação, com o resultado do processamento do View Component Lista (uma relação contendo 3 tecnologias):

Conclusão

A implementação de um View Component é um processo relativamente simples, guardando até certo ponto semelhanças no que se refere à forma como Partial Views eram construídas. Outros pontos a serem destacados são a capacidade de reuso destas novas estruturas, assim como o seu caráter assíncrono (contribuindo também, neste último caso, para a obtenção de aplicações mais responsivas).

Referências

ASP.NET Core 1.0 Documentation
http://docs.asp.net/en/latest/

Compartilhar via