O armazenamento de imagens em um cache local é uma técnica adotada por diversos browsers, sendo que tal prática visa uma melhor performance no carregamento de páginas Web. Por mais que existam benefícios na adoção desta abordagem, há situações nas quais a atualização de imagens já existentes pode acarretar alguns problemas. O mais frequente quando isto acontecer é que os usuários continuem a visualizar a versão anterior de uma figura, o que obrigará os mesmos a realizar um refresh forçado da página a partir do navegador em uso.

Uma solução bastante utilizada para se contornar este problema consiste em adicionar uma espécie de “token” (uma string baseada em uma data/hora ou em um GUID, por exemplo) ao endereço de uma imagem; o comum é que tal valor passe por uma atualização a cada nova modificação no conteúdo da figura considerada. Levando em conta tudo isto foi incorporada uma Tag Helper ao ASP.NET Core 1.0 com o intuito simplificar este processo: trata-se do atributo “asp-append-version”, o qual deve ser empregado em conjunto com a tag “img” para a exibição de imagens.

Na Listagem 1 está o código da View Index.cshtml de uma aplicação de testes, sendo possível observar no mesmo um exemplo deste novo recurso:

...

<h2>Exemplo de utilização - Image Tag Helper:</h2>

<img src="~/images/visual-studio.png"
     asp-append-version="true" />

Listagem 1: View Index.cshtml

OBSERVAÇÃO: o exemplo descrito neste artigo foi criado com base no Release Candidate 1 do ASP.NET Core 1.0.

Na Imagem 1 é possível observar a tela inicial da aplicação de exemplo (View Index.csthml), com esta já contemplando a imagem incluída para testes (destacada em vermelho):

aspnet-imagetaghelper-01
Imagem 1. Tela com exemplo de utilização do recurso Image Tag Helper

Ao visualizar o código gerado para a View Index nota-se que um parâmetro foi adicionado ao endereço da figura visual-studio.png, conforme indicado na Imagem 2:

aspnet-imagetaghelper-02
Imagem 2. Exemplo de utilização do recurso Image Tag Helper

Após mudanças na figura visual-studio.png, além da abertura da página de testes em uma nova janela, o conteúdo atualizado será exibido corretamente (Imagem 3):

aspnet-imagetaghelper-03
Imagem 3. Tela após a atualização da imagem de exemplo

Analisando o código gerado será possível constatar que um novo valor foi combinado ao endereço do arquivo visual-studio.png (Imagem 4):

aspnet-imagetaghelper-04
Imagem 4. Código gerado após a atualização da imagem

E assim concluo este post que apresentou mais uma das novidades que integram o ASP.NET Core 1.0. Espero que este conteúdo possa ter sido útil.

Até uma próxima oportunidade!

Referências

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

ASP.NET Core – GitHub
https://github.com/aspnet/Home

Renato Groffe

Atua como consultor em atividades voltadas ao desenvolvimento de softwares há mais de 13 anos. Bacharel em Sistemas de Informação, com especialização em Engenharia de Software. Microsoft Certified Technology Specialist (Web, WCF, Distributed Applications, ADO.NET, Windows Forms), Microsoft Specialist (HTML5 with JavaScript and CSS3, Developing ASP.NET MVC 4 Web Applications), Oracle Certified Associate (PL/SQL), Sun Certified (SCJP, SCWCD), ITIL Foundation V2, Cobit 4.1 Foundation.

Facebook Google+ 

Comentários

comentarios