Carga Dinámica de CSS en ASP.NET

  • Article

Los descubrimientos descritos a continuación, surgieron de mi necesidad de cargar CSS dinámicamente sin estar creando numerosos temas dentro de una aplicación WEB ASP.NET. Esto es, separar la administración de CSS de los temas. Así un mismo tema podrá tener varios CSS a petición.

En primera instancia: Toda página que referencie un tema, SIEMPRE cargará todos los CSS incluidos en el mismo, independientemente de que en realidad los necesite, y del nivel de anidamiento en el que se encuentren ubicados. Poco eficiente no es así?

Como se sabe, los CSS finalmente son Links referenciados en el HEAD de la página que está referenciándolos. Entonces es cuestión de escribir dinámicamente allí la ruta del CSS que se desea cargar y listo.

Lo anterior se logra agregando un ASP.NET literal control dentro del HEAD, y en el load de la página ajustarlo con el valor que se desea.

Y listo!!!

A pesar de que existan varios CSS en la misma ruta de aquel que está siendo referenciado, solo el referenciado se descarga.

Ventajas?

  • Tener organizados varios CSS y no solo uno gigantesco con todo.
  • En cuanto a ancho de banda, si los CSS se dejan dentro de temas, por más separados que estén si son cargados por medio de referencia al tema desde la página, siempre bajan todos la primera vez que se llamen (luego quedan en el caché y no vuelven a descargarse si no se borra el caché o si no cambian en el server).

Conclusión:
Si se desea optimizar el tiempo de descarga, entonces es mejor no usar Themes para cargar los estilos, sino que estos se carguen independientemente usando el modelo de HEAD descrito anteriormente.

Ejemplo:

Dado que me han pedido mucho un ejemplo en código aquí va:

Aspx

 <html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Este es un ejemplo de texto"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Codebehind

 using System;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Literal1.Text = "<link href='Styles/Site.css' rel='stylesheet' type='text/css' />";
        }
    }
}