Referenciando Rutas absolutas en Master Page

633 views
Skip to first unread message

Kiquenet

unread,
Sep 9, 2017, 3:53:52 AM9/9/17
to AltNet-Hispano
Hola a todos.

En una aplicación ASP.NET (WebForms), podemos tener en una Master Page, rutas absolutas (no rutas relativas) de este tipo:

En el Head:

<link rel="stylesheet" type="text/css" href="css/style.css" >

<script type="text/javascript" src="/JS/main.js"></script>



En el Body:


<a href="/Public/Recursos/doc.pdf" target="_blank">Abrir documento</a>

<img src="/App_Themes/Images/login.jpg" width="20" border="0"/>



Podemos tener un sitio web en la raíz (/), o una aplicación web (o directorio virtual).

 

http://server:49759/ es el sitio web

http://server:49759/version2 es la aplicación web


Con la solución de /ruta no funcionaría para directorios virtuales, tendría que ser /version2/ruta



Podemos utilizar Page.ResolveClientUrl o Page.ResolveUrl:

<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>

<a href="<%= Page.ResolveUrl("~/Public/Recursos/doc.pdf") %>" target="_blank">Abrir documento</a>

 

<img src="<%= Page.ResolveUrl("~/App_Themes/Images/login.jpg") %>" width="20" border="0"/>

 

También lo podemos hacer si tenemos hacer si tenemos controles de servidor:

<a id="link1" runat="server" href="<%= Page.ResolveUrl("~/Public/Recursos/doc.pdf") %>" target="_blank">Abrir documento</a>

 

<img id="img1" runat="server" src="<%= Page.ResolveUrl("~/App_Themes/Images/login.jpg") %>" width="20" border="0"/>


Con controles ASP, podemos utilizar ~/ para obtener el root de la aplicación:

<asp:HyperLink ID="HLLogo" runat="server" NavigateUrl="~/Inicio.aspx">

                        <asp:Image ID="ImgLogo" runat="server" ImageUrl="~/App_Themes/Images/logo.png" Width="181" Height="45"  />

</asp:HyperLink>


Otras alternativas que he visto:

Añadir runat="server" al tag head
Utilizar <%# en lugar de <%= en la sección head: <script type="text/javascript" src="<%# ResolveUrl("~/YourScriptFolder/YourJQueryOrJavascript.js") %>"> </script>
Añadir en el Code Behing, en el evento Page_Load de la Master: Page.Header.DataBind();


O utilizar un ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">

    <Scripts> <asp:ScriptReference Path="~/jquery.js" /> </Scripts>

</asp:ScriptManager>

No sé ahora si ScriptManager permite añadir script en la sección head. ScriptManager debe estar bajo un form tag.


NOTA: Siendo la sección head con atributo runat=server, para los elementos <link> con  ruta relativa en href, se hace una resolución de URLs automática para la sección head.

Automatic URL Resolution in the <head> Section
While the <link> element's href attribute is relative, it's automatically converted to an appropriate path at runtime


OJO: Si el head tiene el atributo runat=server y utilizamos bloques de código ( <%= %>) obtenemos el error The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)

Aquí comentan varias soluciones, utilizar un asp:PlaceHolder la considero más simple
https://stackoverflow.com/questions/778952/the-controls-collection-cannot-be-modified-because-the-control-contains-code-bl


En definitiva, ¿Qué opción consideráis la más adecuada para las rutas absolutas en una Master Page?

Referencias:



Muchas gracias!

Kiquenet

unread,
Sep 10, 2017, 10:36:49 AM9/10/17
to AltNet-Hispano
Un añadido.

No se aplica ResolveUrl en estos casos:
 

<a id="link1" runat="server" href="~/Public/Recursos/doc.pdf" target="_blank">Abrir documento</a>

<img id="img1" runat="server" src="~/App_Themes/Images/login.jpg" width="20" border="0"/>


Lo correcto sería href o src="<%= Page.ResolveUrl("~/...



En estos casos tampoco aplica el ResolveUrl:

<asp:Image ID="Image2" runat="server" src="~/Images/preloader_login.gif" Width="64" Height="64" AlternateText="Loading..." />. Lo correcto sería con ImageUrl="~/Images/preloader_login.gif"


<asp:HyperLink ID="hlSso" runat="server" href="~/WebServices/SSO/SsoComparadorProductos.ashx">Comparador de productos</asp:HyperLink>. Lo correcto sería con NavigateUrl="~/WebServices/SSO/SsoComparadorProductos.ashx"


 

Un saludo.


Kiquenet

unread,
Sep 12, 2017, 2:16:07 AM9/12/17
to AltNet-Hispano
Otro añadido para complementar.

La Master Page puede definir (en el Page_Load) una variable javascript con la URL del sitio web.

            var csText = new StringBuilder();
            csText.AppendLine("<script type=\"text/javascript\">");
            csText.AppendFormat("URLBASE = '{0}'; CONFIG.urlbase  = '{0}'; </", base.ResolveUrl("~/"));
            csText.AppendLine("script>");
            Page.Header.Controls.Add(new LiteralControl(csText.ToString()));


En las páginas, en el código javascript podría utilizarse así:



<body id="page1" onload="MM_preloadImages(URLBASE + 'images/m2-2.gif', URLBASE + 'images/m4-4.gif', URLBASE + 'images/m1-1.gif');">

<a
href="/Nuestra-Experiencia.html" target="_self"
onmouseover="MM_swapImage('CP','', URLBASE + 'images/boton_experiencia2.jpg',1)"
onmouseout="MM_swapImgRestore()">


Reply all
Reply to author
Forward
0 new messages