Controlando path de imagens (e etc) na masterpage

 

Em nossos sites normalmente utilizamos uma masterpage na raiz do site e páginas que podem tanto estar na raiz como estarem em sub-pastas do site.

Um problema que normalmente incomoda os desenvolvedores web é como fazer referência a elementos estáticos dentro da masterpage. Isso é um problema pois a masterpage pode ser chamada tanto a partir de páginas que encontram-se na raiz como a partir de páginas que encontram-se em sub-pastas, exigindo assim que o path utilizado para fazer referência as imagens tenha que funcionar para ambos os casos.

A solução para esse problema possui muitas variantes, porque depende da forma como um site será publicado. Veja abaixo as opções :

Opção 1 : O site será publicado na raiz de um domínio

Configure o Visual Studio para rodar o seu site como raiz. Nas versões mais antigas isso era complicado (http://www.bufaloinfo.com.br/dicas.asp?cod=830 ), mas nas versões atuais, a partir do service pack para o 2005, se tornou bem simples, bastando alterar a propriedade virtual path para "/"

Para alterar a propriedade virtual path, selecione o site no solution explorer e abra a janela de propriedades.

Feita essa alteração, você poderá fazer referência a todos os elementos a partir da raiz, por exemplo, /images/minhafigura.gif

Opção 2 : O site será executado em um diretório virtual abaixo do domínio

Neste caso, utilize urls absolutas já incluindo o nome do diretório virtual para o qual será feito o deployment do site. Por exemplo, se o diretório for "meusite" então utilize /meusite/images/minhafigura.gif

Opção 3 : Desejo que meu site fique versátil com relação ao local de publicação

Este terceiro caso é, sem dúvida, o mais complexo. Se o site estiver em um diretório virtual ou na raiz, as URLs deveriam ser diferentes. Como fazer com que seja a mesma URL para ambos os casos e mais, fazer com que a mesma URL funcione que a página esteja na raiz do site ou em uma sub-pasta ? Como podem ver, temos 4 variáveis dificultando a questão.

Para objetos do servidor (asp:image ou outros objetos usando runat="server") existe uma saida simples : "~/" . Esse símbolo é utilizado no ASP.NET para representar a raiz da aplicação atual, qualquer que seja. Então se utilizarmos este símbolo nas URLs em objetos de servidor, o problema se resolve.

Mas acabamos criando outro. Não podemos transformar todas as imagens e outras referências em objetos de servidor, pois a cada transformação destas significa uma classe a mais criada no lado do servidor durante o processamento e isso não é nada bom.
Como resolver então ?

A melhor solução que encontrei foi utilizar um pequeno código ASP junto a cada referência, veja um exemplo :

<img id="Image1" src="<%=Request.ApplicationPath %>/Imagens/LogoHCL.gif" >

Este trecho de código ASP será processado e irá gerar o caminho correto da raiz da aplicação, tornando a aplicação flexivel para estar na raiz ou em um diretório virtual qualquer.
Além disso, por ser um caminho absoluto a partir da raiz da aplicação, este formato de URL fica flexivel para ser utilizado em páginas na raiz do site e páginas contidas em sub-pastas.
Este recurso pode ser aplicado com sucesso em qualquer URL.

Observe que este é o recurso extremo. Na opção 1, temos solução mais simples, na opção 2, temos solução mais simples, para server controls, temos solução mais simples, apenas para tags HTML contento URLs que desejamos que sejam altamente flexiveis é que necessitamos desta solução.

Já Cotei

Compare preços de Livros de ASP.NET no Já Cotei

Confira os treinamentos de ASP.NET no site BufaloInfo

Que tal visitar nossa loja de livros e analisar alguns Livros sobre Orientação a Objetos ?

Veja Também