¿Dónde poner reglas de CSS en el control personalizado de ASCX?

Soy nuevo en el trabajo en ASP.NET pero estoy desarrollando un control personalizado que tiene un control de vista múltiple dentro de él que muestra un montón de cosas diferentes. Parte de esto se muestra utilizando elementos de la interfaz de usuario de JQuery, como pestañas y accordians, que tendrán bastante personalización.¿Dónde poner reglas de CSS en el control personalizado de ASCX?

Como voy a tener un montón de reglas CSS que se aplican solo a los elementos dentro del control personalizado (no al resto de nuestro sitio web), me pregunto dónde colocar las reglas de estilo CSS.

Normalmente solo pongo una hoja de estilo en algún lugar de la raíz del sitio y la referencia desde allí. Pero mientras juego con ASP.NET, tengo la sensación de que debería poner todo mi código (incluyendo CSS, JS, etc.) dentro del control personalizado. Esto se siente más "programmy", manteniendo todo junto.

¿Alguien puede decirme cómo debería estar haciendo esto? ¿Cuál es la mejor práctica para el desarrollo web en ASP.NET?

Fuente

2012-07-12 nedlud

Si el control está creando está en un ensamblado independiente , puede incrustar los archivos CSS dentro del conjunto para que sea reutilizable y crear un vínculo directo a estos archivos desde el control de, a continuación, en su control se registrará a ser prestados como link etiquetas en su página

Nota: Recuerde que usted necesita para marcar el archivo CSS en su asamblea como un recurso incrustado

sólo tienes que seleccionar el archivo | entonces proeprties y cambiar su Acción de generación propiedad y la pusieron a: recurso incrustado

enter image description here

En el siguiente código:

AjaxEnabled.Web.UI representa el espacio de nombres del ensamblado
DefaultStyle.css representa el nombre de archivo CSS incrustado

El ejemplo de código siguiente muestra los pasos necesarios: (en su control de servidor personalizado)

[assembly: WebResource("AjaxEnabled.Web.UI.DefaultStyle.css", "text/css")] 

    protected override void OnInit(EventArgs e) 
    { 
     base.OnInit(e); 

     if (this.Page.Header != null) 
     { 
      if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss")) 
      { 
       var link = new HtmlLink(); 

       link.Href = this.Page.ClientScript.GetWebResourceUrl(
        typeof(YourControlType), 
        "AjaxEnabled.Web.UI.DefaultStyle.css" 
       ); 
       link.Attributes.Add("rel", "stylesheet"); 
       link.Attributes.Add("type", "text/css"); 

       this.Page.Header.Controls.Add(link); 
       this.Page.ClientScript.RegisterClientScriptBlock(
        typeof(Page), 
        "defaultCss", 
        string.Empty 
       ); 
      } 
     } 
    }

Es necesario añadir una instancia del control ScriptManager en su página que contiene los controles personalizados

<asp:ScriptManager runat="server" ID="sm"/>

Y en su página ASPX debe marcar la sección header como control de servidor

<head runat="server">

El siguiente código:

link.Href = this.Page.ClientScript.GetWebResourceUrl(
       typeof(YourControlType), 
       "AjaxEnabled.Web.UI.DefaultStyle.css");

Renders un enlace directamente al archivo CSS incrustado en la asamblea

Esta condición:

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss")) 
... 
this.Page.ClientScript.RegisterClientScriptBlock(
         typeof(Page), 
         "defaultCss", 
         string.Empty 
        );

asegura que el CSS se representa solo una vez en la página, incluso si elimina más de una instancia de su control

Fuente

2012-07-12 04:47:05 Jupaol

Fuera de interés, ¿por qué requeriría un montaje por separado? – saille

Solo se requiere si desea encapsular completamente sus estilos en el control. Si lo haces, entonces puedes simplemente compartir tu ddl que contiene tu control y los archivos CSS se compartirán porque se integrarán en el ensamblado. Sin embargo, esto no es obligatorio si solo planea usar sus controles en un sitio. Actualizaré la respuesta para mostrar el código necesario para usar los recursos integrados en un ensamblaje – Jupaol

inicialmente, no distribuiría el código. Pero es un complemento para un CMS comercial, por lo que una vez que esté satisfecho con él, creo que adoptaré esta solución para que podamos distribuir el código completo como un paquete para que lo usen otras personas. Gracias por una respuesta integral :) – nedlud

Se recomienda que usemos una hoja de estilo externa para escribir todas las reglas. Pero también podemos escribir en <head> sección (recomendado también) de un archivo HTML/aspx utilizando siguiente manera:

<style type="text/css"> 
    .customClass { 
     /* Add Rules here*/ 
    } 
</style>

La forma anterior también se puede utilizar en cualquier lugar en HTML páginas/APSX/ascx/control (no recomendado), pero funcionará también.

Fuente

2012-07-12 04:52:10

Debe poner en la página que está utilizando.

¿Por qué?

En caso de múltiples controles de la página, si se aplica estilo/js a la usercontrol sin hacer referencia a una hoja de estilo externa o script, verá una gran cantidad de código CSS/JS se repite para cada control individual.
Mejor gestión del código.
El control de CSS está con la página y no con el control en sí, por lo que el mismo control se puede usar para varias páginas, que pueden necesitar un estilo diferente.

Fuente

2012-07-12 05:09:19

_En el caso de controles múltiples en la página, si aplicas estilo al usercontrol, verás una gran cantidad de código CSS que se repite en los controless._ ** Eso es no es cierto, puede controlar simplemente renderizar un enlace CSS ** – Jupaol

El OP en su pregunta dice "Tengo la sensación de que debería poner todo mi código (incluyendo CSS, JS, etc.) dentro del control personalizado". Eso significa que no está pensando en hacer referencia. –

¿Dónde poner reglas de CSS en el control personalizado de ASCX?

Respuesta

Cuestiones relacionadas