Trabalhando em um projeto para a web, em ASP.NET e C#, me deparei com um problema que, acredito eu, seja muito comum entre os desenvolvedores: como trabalhar com masterpages em uma estrutura de diretórios complexa (multiníveis)?
Após alguns testes, encontrei uma solução que funcionou adequadamente. Não sei se é a melhor maneira de fazer isso e se você souber, envie para cá que eu publico. 
Para as MasterPages funcionarem corretamente com uma estrutura complexa de diretórios, é necessário seguir os passos a seguir:
Estrutura básica dos diretórios de exemplo:
[Root]
|
+—{Default.aspx}
|
+—{Default2.aspx}
|
+—[Css]
| |
| +—{estilo.css}
|
+—[MasterPages]
| |
| +—{MasterPage.master}
|
+—[Images]
| |
| +—{imagem1.jpg}
| |
| +—[Img1]
| |
| +—{imagem2.jpg}
|
+—[Dir1]
| |
| +—[Dir1a]
| | |
| | +—{Default.aspx}
| |
| +—{Default.aspx}
|
+—[Dir2]
|
+—{Default.aspx}
Para que todas as páginas, independente do nível de diretório em que estejam, acessem o estilo corretamente, é necessário colocar no <head> da MasterPage.master:
<head runat="server">
A chamada para a folha de estilos deverá ser feita levando-se em conta a referência do arquivo CSS em relação à MasterPage.master:
<link href="../Css/estilo.css" rel="stylesheet" type="text/css" />
Note que o path é informado em HTML normal, não em ASP.NET (”~”).
Dentro da folha de estilos, as chamadas às imagens deverão ser feitas com o caminho relativo do arquivo CSS ao diretório onde as imagens estão armazenadas:
.classe1
{
background: White url('../Images/imagem1.jpg') no-repeat;
}
Dentro das páginas, caso seja necessário designar uma imagem para um ImageButton, por exemplo, basta colocar o símbolo “~” no caminho da imagem que o compilador traça o caminho corretamente:
<asp:ImageButton runat="server" ImageUrl="~/Images/Img1/imagem2.jpg" />
Caso você utilize uma imagem simples (em HTML), utilize a mesma técnica acima e acrescente o runat=”server” à tag <img>:
<img src="~/Images/imagem1.jpg" runat="server" />
Para chamar páginas com o Response.Redirect(), é necessário utilizar também o “~”:
Response.Redirect("~/Dir1/Default.aspx");
Uma solução que resolveria o problema das imagens seria, ao invés de utilizar o “~”, colocar apenas a barra e fornecer o caminho completo relativo ao domínio. No entanto, caso você mude o sistema de diretório (colocando em um subdiretório do que está no momento, por exemplo), todos os caminhos deverão ser revisados, o que enterra a produtividade.
Este sistema “joga” todos os controles para o servidor, o que compromete um pouco a performance, porém o custo x benefício vale muito a pena.
Até a próxima!
2 Comentários
Realmente, alguns problemas ocorrem, já teve algum problema com javascript?
+—[Javascript]
| |
| +—{script01.js}
O masterpage não consegue pegar o nível correto.
Silvio,
Você já implementou alguma vez um sistema dentro de um portal utilizando a MasterPage geral e dois WebConfig?