Durante mucho tiempo a la hora de incluir un enlace en mis aplicaciones ASP.NET simplemente utilizaba un control Hyperlink y en su propiedad NavigateUrl escribía la dirección URL. Por ejemplo:
<asp:Hyperlink ID=”ContactLink” runat=”server” NavigateUrl=”~/contact.aspx” Text=”Contacto” />
Este enlace se crea en el navegador como un elemento HTML anchor similar al siguiente:
<a id="ctl00_MainContainer_ContactLink" href="../contact.aspx">Contacto</a>
Este enlace no está tan mal, pero su atributo id es un poco extraño y en este caso particular, como se trata da una URL estática, es innecesario; en consecuencia podríamos evitarlo en pos de lograr un HTML más limpio.
Alguien podría decir: ¿por qué no podemos usar simplemente un elemento HTML anchor en lugar de un control Hyperlink?. Bien, un simple anchor podría estar bien en muchas situaciones:
<a href="/contact.aspx">Contacto</a>
Este enlace funcionaría bien en muchos sitios web, pero trae algunos problemas con los subdominios o subcarpetas. Por ejemplo: si nuestra aplicación ASP.NET está alojada en www.example.com/miapp, el enlace anterior apuntaría incorrectamente a www.example.com/contact.aspx en lugar de www.example.com/miapp/contact.aspx. Es por ello que preferimos usar Hyperlinks y usar el carácter de tilde “~” que nos asegura una URL correcta desde la raíz de nuestra aplicación.
Desafortunadamente no podemos usar la tilde “~” con un simple elemento HTML, pues la tilde se procesa y resuelve en el lado servidor. Un enlace como el siguiente no funcionaría:
<a href="~/contact.aspx">Contacto</a>
Escribiendo enlaces correctos y limpios
Una alternativa para resolver el problema usando el elemento anchor, es usar el método ResolveUrl de la siguiente forma:
<a href=’<%= ResolveUrl(“~/contact.aspx”)’ %>Contacto</a>
Este tipo de enlaces dá como resultado un HTML anchor sin el atributo ID, y funciona correctamente en cualquier sitio con subdominios y es independiente de la estructura de carpetas de nuestro sitio. El enlace siempre será correcto!. En el navegador se vería como:
<a href="../contact.aspx">Contacto</a>
Mejorando la escritura de los enlaces
Durante un buen tiempo empecé a escribir este tipo de enlaces, pero luego no me sentí muy conforme con la forma de hacerlo. No me parecía muy natural. Otras personas que están aprendiendo ASP.NET les suena complicado o confuso.
Entonces encontré otra forma de lograr el mismo resultado (HTML más limpio y claro), pero de una forma más intuitiva y elegante. El truco consiste en agregar el atributo runat=”server” al elemento HTML anchor y entonces podemos usar el caracter de tilde “~” en el href.
<a href="~/contact.aspx" runat=”server”>Contacto</a>
Esto dá como resultado un enlace HTML limpio y correcto:
<a href="../contact.aspx">Contacto</a>
La buena noticia es que esto podemos aplicarlo también con las imágenes e incluso con los elementos <link> que usamos para referenciar archivos CSS o Javascript en el <head> de nuestras páginas.
Espero les sirva!
Saludos, Gus
UPDATE:
Es una costumbre en ASP.NET que al usar controles de servidor proporcionemos un atributo ID al control. Sin embargo, no es obligatorio. Podríamos declarar controles de servidor SIN el atributo ID, como el siguiente:
<asp.HyperLink runat=”server” NavigateUrl=”~/contact.aspx” Text=”Contacto” />
Esto genera en el lado cliente un elemento anchor limpio sin el atributo ID:
<a href="../contact.aspx">Contacto</a>
