Dove mettere le regole CSS nel controllo personalizzato ASCX?

Sono nuovo a lavorare in ASP.NET ma sto sviluppando un controllo personalizzato che ha un controllo multi vista al suo interno che mostra un sacco di cose diverse. Alcuni di essi vengono visualizzati utilizzando elementi dell'interfaccia utente JQuery come schede e accordi che avranno un po 'di personalizzazione.Dove mettere le regole CSS nel controllo personalizzato ASCX?

Poiché ho intenzione di avere un sacco di regole CSS che si applicano solo agli elementi all'interno del controllo personalizzato (non al resto del nostro sito Web), mi chiedo dove mettere le regole di stile CSS.

Normalmente inserisco un foglio di stile da qualche parte nella radice del sito e lo riferimento da lì. Ma mentre gioco con ASP.NET, ho la sensazione che dovrei mettere tutto il mio codice (incluso CSS, JS, ecc.) All'interno del controllo personalizzato stesso. Questo sembra più "programmato", mantenendo tutto insieme.

Qualcuno può sapere come dovrei farlo? Qual è la migliore pratica per lo sviluppo web in ASP.NET?

fonte

2012-07-12 nedlud

Se il controllo che si sta creando è in una assembly separato, è possibile incorporare il file CSS all'interno del gruppo per renderlo riutilizzabile e creare un collegamento diretto a questi file dal vostro controllo, poi nel controllo voi li registrarsi per essere reso come link tag nella tua pagina

Nota: Ricordate che è necessario marcare il file CSS nella vostra assemblea come una risorsa incorporata

basta selezionare il file | poi proeprties e cambiare la sua proprietà Operazione di generazione e impostarlo a: incorporato Resource

Nel codice seguente:

AjaxEnabled.Web.UI rappresenta lo spazio dei nomi della vostra assemblea

DefaultStyle.css rappresenta il nome del file CSS incorporato

Il seguente codice di esempio mostra i passaggi necessari: (nel controllo server personalizzato)

[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 ); } } }

È necessario aggiungere un'istanza del controllo ScriptManager nella pagina contenente i controlli personalizzati

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

E nella pagina ASPX è necessario contrassegnare la sezione header come controllo server

<head runat="server">

Il seguente codice:

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

Renders un link direttamente nel file CSS incorporato nel gruppo

Questa condizione:

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

assicura che il CSS venga visualizzato una sola volta nella pagina, anche se si rilascia più di una istanza del proprio controllo

fonte

2012-07-12 04:47:05 Jupaol

Per motivi di interesse, perché richiedere un assemblaggio separato? – saille

È necessario solo se si desidera incapsulare completamente gli stili nel controllo. Se lo fai, allora puoi semplicemente condividere il tuo ddl che contiene il tuo controllo e i file CSS saranno condivisi perché saranno incorporati nell'assembly. Tuttavia questo non è necessario se si prevede di utilizzare i controlli solo in un sito. Aggiornerò la risposta per mostrare il codice necessario per utilizzare le risorse incorporate in un assembly – Jupaol

inizialmente, non distribuirei il codice. Ma è un plug-in per un CMS commerciale, quindi una volta che ne sono felice, penso che abbraccerò questa soluzione in modo che possiamo distribuire il codice completo come pacchetto da utilizzare per altre persone. Grazie per una risposta esauriente :) – nedlud

Si consiglia di utilizzare un foglio di stile esterno per scrivere tutte le regole. Ma possiamo anche scrivere in <head> sezione (consigliato anche) di un file HTML/aspx utilizzando seguente modo:

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

Il modo di cui sopra può anche utilizzato in qualsiasi luogo in HTML pagine/apsx/ascx/controllo (non raccomandato), ma funzionerà anche.

fonte

2012-07-12 04:52:10

Si dovrebbe inserire la pagina che si sta utilizzando.

Perché?

In caso di più controlli nella pagina, se si applica stile/js al UserControl senza fare riferimento a un foglio di stile esterno o uno script, vedrete un sacco di CSS/codice js essere ripetuta per ogni singolo controllo.
Migliore gestione del codice.
Il controllo del CSS è con la pagina e non il controllo stesso, quindi lo stesso controllo può essere utilizzato per più pagine, che potrebbero richiedere stili diversi.

fonte

2012-07-12 05:09:19

_In caso di più controlli sulla pagina, se si applica lo stile all'usercontrol, si vedrà un sacco di codice CSS ripetuto sul controls._ ** That's non è vero, puoi controllare solo il rendering di un link CSS ** – Jupaol

L'OP nella sua domanda dice "Ho la sensazione che dovrei mettere tutto il mio codice (incluso CSS, JS, ecc.) all'interno del controllo personalizzato stesso". Ciò significa che non sta pensando di fare riferimento. –

Dove mettere le regole CSS nel controllo personalizzato ASCX?

risposta

Problemi correlati