Representación de hoja de estilos de tema ASP.NET

Question

Cuando se representa una página con tema, las etiquetas de enlace de las hojas de estilo en el tema dado se representan justo antes de la etiqueta de cabecera de cierre. ¿Alguien sabe de una manera de cambiar eso? ¿Hay alguna forma de que pueda colocar esas etiquetas justo después de la etiqueta de apertura?

Sé que puede ser un problema con jquery simplemente seleccionando todas las etiquetas de enlace y colocándolas justo después de la etiqueta de encabezado de apertura, pero ¿hay alguna manera de configurarlo en el extremo del servidor?

Aclaración Vamos a decir que tengo un archivo css sola (themed.css) en mi tema. En ese archivo CSS, tengo una definición de estilo único para una etiqueta div con un id de prueba: también

#test {background-color:red; color:white;} 

nos Vamos decir que tengo un segundo archivo CSS (standard.css) que no está en mi tema, pero tiene otra definición de la etiqueta div con un id de la prueba:

#test {background-color:yellow;} 

tengo mi página para utilizar el tema, y ​​tengo una etiqueta de enlace escrita a mano para usar standard.css. Cuando se ejecuta la página, la etiqueta de enlace para standard.css está antes de themed.css. Cuando eso sucede, mi etiqueta div con id of test tiene un fondo rojo y un forecolor blanco. Si quiero aplicar themed.css y luego standard.css para sobrescribir las propiedades necesarias (fondo amarillo con forecolor blanco), me gustaría themed.css y THEN standard.css. No puedo hacer eso porque ASP.NET coloca los archivos de tema justo antes de la etiqueta de cierre.

No quiero tener que saber que los archivos css de mi tema son la n-ésima etiqueta de enlace en mi etiqueta principal y luego cambiar manualmente cualquier índice siempre que pueda agregar un nuevo archivo css fuera de mi tema.

Gracias!

Answer 1

Hice un poco de comprobación en el reflector, y encontró algo que puede resultar interesante. El marco llama al método SetStyleSheet de un objeto derivado PageTheme para inyectar controles de enlace en el encabezado. Este fragmento de código muestra la lógica relevante:

int num = 0; 
foreach (string str in this.LinkedStyleSheets) 
{ 
    HtmlLink child = new HtmlLink { Href = str }; 
    child.Attributes["type"] = "text/css"; 
    child.Attributes["rel"] = "stylesheet"; 
    if (this._styleSheetTheme) 
     this.Page.Header.Controls.AddAt(num++, child); 
    else 
     this.Page.Header.Controls.Add(child); 
} 

traducción? StyleSheetThemes inyectan las hojas de estilo en el comenzando de la etiqueta de cabecera, y temas inyectan las hojas de estilo en el extremo.

Esto es coherente con la diferencia entre los temas y los temas de la hoja de estilo; es decir, que un tema siempre gana cuando hay un conflicto entre la máscara y la configuración de control. Claro, un estilo en un archivo .CSS no temático que utiliza el atributo !important aún puede anular un estilo de tema, pero el posicionamiento de los archivos CSS dentro de la etiqueta de encabezado facilita estratégicamente los temas de hojas de estilo de capacidad superior.

Tenga en cuenta que puede tener ambos un tema de hoja de estilo y un tema normal. Naturalmente, deje que el tema de la hoja de estilo, las cosas que diseñe sean reemplazables, y las cosas del tema que no se deben anular.

Una observación final es que el método es internal y no es virtual, por lo que interferir con estas dos opciones requeriría algunas habilidades de kung-fu-MMA-mad-reflection, y probablemente no sea lo mejor para la estabilidad o mantenibilidad .

Answer 2

Tan pronto como su elemento head tiene runat="server" puede reorganizar la colección en Page_PreRender:

protected void Page_PreRender(object sender, EventArgs e) 
    { 
     ControlCollection container = this.Page.Header.Controls; 
     foreach (var control in container.OfType<System.Web.UI.HtmlControls.HtmlLink>().ToArray()) 
     { 
      container.Remove(control); 
      container.AddAt(0, control); 
     } 
    }