A mágica do ResolveURL

        Hoje eu vou falar sobre o comando respons√°vel por resolver os problemas de URL dentro do nosso projeto. Os testes que fiz foi um sucesso usando o projeto do tipo Web Application.
Muitas vezes, o que acontece em nosso projeto √© que, ao referenciar um url din√Ęmica ~/images/imagem.jpg a p√°gina que est√° fora da raiz do projeto n√£o aparece a imagem, principalmente se a p√°gina estiver dentro de duas pastas qualquer.
Se colocar outro endere√ßo din√Ęmico images/imagem.jpg tamb√©m n√£o vai aparecer se a p√°gina estiver dentro das pastas. Isso tudo em rela√ß√£o ao arquivo .MASTER por exemplo.
Note que na figura 1 eu tenho uma p√°gina .aspx que est√° dentro de duas pastas. 



Figura 1 - P√°gina dentre de pasta

No meu arquivo Site.Master eu preciso mostrar uma imagem, mas o arquivo está na pasta raiz, além de existir outras páginas .aspx na pasta raiz. O meu problema é que nas páginas que estão na raiz funcionam, mas na página que está dentro de pastas não funcionam. O que fazer nestes casos? Listagem 1.

[Code]
<div id="body">
<img src="images/teste/twitter.png"/>
</div>
[/Code]
Listagem 1 - Código MasterPage

Na p√°gina Default.aspx apareceu a imagem perfeitamente, sem qualquer problema referente ao caminho. Figura 2.


Figura 2 - Apareceu a imagem

O problema maior foi quando acessei a p√°gina que est√° dentro das pastas citadas anteriormente. A imagem n√£o apareceu. Figura 3.



Figura 3 - Acessando p√°gina dentro da pasta.

Note que o endereço da figura 2 e o endereço da figura 3 são diferentes, mas estão dentro do mesmo projeto. Para resolver o problema e para aparecer a imagem, tive que usar o comando ResolveURL. Listagem 2.

[Code]
<div id="body">
                
<img src=<%:ResolveUrl("images/teste/twitter.png") %> />
<br />
<img src="images/teste/twitter.png"/>
</div>

[/Code]
Listagem 2 - Colocando o código ResolveURL.
Se usar o til ~ antes do endereço da imagem também não aparece no browser. Listagem 3.
<div id="body">
                
<img src=<%:ResolveUrl("images/teste/twitter.png") %> />
<br />
<img src="~/images/teste/twitter.png"/>
</div>
Listagem 3 - Colocando til no endereço

Para resolver o meu problema de visualizar a mesma imagem colocada na página Master do projeto dentro de uma subpasta foi usar o ResolveURL com o endereço relativo da imagem. Listagem 4.

[Code]
<img src=<%:ResolveUrl("images/teste/twitter.png") %> />
[/Code]
Listagem 4 ‚Äď Endere√ßo relative

Deixando as duas linhas na Master Page automaticamente apareceu a imagem no primeiro e no segundo n√£o apareceu. Figura  4.




Figura 4 - A imagem apareceu.

Criando outra página dentro da pasta anterior, a imagem permaneceu visível sem qualquer problema. Figura 5.





Figura 5 - P√°gina anterior
N√£o sei se notou mas, agora no Visual Studio 11 Beta eu usei o : dois pontos dentro do parte HTML. <%: comando %>.

Note que, os endereços das páginas .aspx são diferentes e a imagem apareceu sem se importar com o endereço da página física. Em artigos anteriores, eu mostrei como criptografar URL e colocar endereços amigáveis.

Bom, fico por aqui e qualquer duvida pode entrar em contato pelo site pessoal www.mauriciojunior.org.