2009-09-02 6 views
7

J'ai construit un contrôle serveur personnalisé qui utilise CSS personnalisé. Le problème que j'ai, c'est que je dois définir une référence au fichier css sur chaque page que j'utilise le contrôle. Puis-je définir cette référence à l'intérieur de la commande?Comment ajouter une référence CSS dans un contrôle serveur?

Alors que je pourrais juste ajouter le contrôle et ne pas s'inquiéter de la référence.

Répondre

4

Voici ce que j'utiliser pour ajouter une référence à la page css programme:

HtmlLink link = new HtmlLink(); 
link.Href = relativePath; 
link.Attributes["type"] = "text/css"; 
link.Attributes["rel"] = "stylesheet"; 
Page.Header.Controls.Add(link); 

Peut-être que vous devriez ajouter un peu de code pour vérifier si le fichier css ajouté au contrôle d'en-tête.

+0

Où devrais-je insérer cela dans le contrôle du serveur personnalisé? –

+0

Dans quelle phase du cycle de création? –

+0

CreateChildControls est adapté, je pense. – Canavar

0

Vous pouvez le faire avec un ScriptManager - et cela vous aidera également à intégrer la feuille de style dans la DLL de la bibliothèque de contrôle personnalisé.

Ou vous pouvez simplement référencer le CSS à partir de votre page maître. À moins que vous n'emballiez une bibliothèque de contrôle personnalisée pour vendre, etc, ScriptManager est BEAUCOUP d'effort par rapport à la solution Master Page

0

Je pense que vous pourriez ajouter Canavar's code à une classe de base qui serait incluse avec toutes les classes qui ont besoin il.

public class myclass : BaseClass 
{ 
    var customCSS = customcss(); 
    Page.Header.Controls.Add(customCSS); } 

et votre baseclass:

public class BaseClass : Page 
{ 
    public HtnlLink customcss(){ 
     HtmlLink link = new HtmlLink(); 
    link.Href = relativePath; 
    link.Attributes["type"] = "text/css"; 
    link.Attributes["rel"] = "stylesheet"; 
    return link; 
} 
} 

ou vous pouvez aller dans le sens de

myObject.Attributes.Add("style","width:10px; height:100px;"); 

ou

myObject.Attributes.Add("style",customStyle();); 

où cela est dans votre baseclass

public String customStyle() 
{ 
return "width:10px; height:20px;"; 
} 

et customstyle serait une fonction comme ceci:

Mais je suppose que vous utilisez CSS pour le reste de votre site, alors peut-être un style pourrait juste être ajouté à votre feuille de style que vous utilisez sur tous les pages par cette méthode, vous pouvez utiliser le code ci-dessous:

myObject.Attributes.Add("class","customControl"); 

ce sera alors référence le style CSS correct de votre principal, stylesheet toujours inclus.

À moins que je manque quelque chose ici ....

1

Si vous voulez construire webcontrol, qui sera réutilisable et dans un ensemble avec css, js ressources et d'autres, que vous pouvez utiliser WebResources

Working with Web Resources in ASP.NET 2.0

+0

Merci, c'est un travail pour moi. – Liquid

13

Vous devez suivre les étapes ci-dessous pour ajouter le css/javascript/image dans le contrôle Web lui-même.

  1. Modifier le fichier AssemblyInfo.cs, ajouter la ressource web

    [assemblage: System.Web.UI.WebResource ("CustomControls.Styles.GridStyles.css "," text/css "), PerformSubstitution = true)]

  2. Ajout des fichiers requis (css/javascript/images) à la solution de contrôle serveur personnalisée Notez que nous pouvons ajouter des dossiers dans la solution et ajouter séparer à l'aide. »(point)

  3. Plus important encore, nous devons changer la propriété BuildAction du contenu à la ressource incorporée des css nouvellement ajoutés/javascript/fichiers image.

  4. en outre nous devrions charger le stocké Le meilleur événement pour ce serait OnPreRender Voici l'exemple de rendu de code css

    protected override void OnPreRender(EventArgs e) 
        { 
         bool linkIncluded = false; 
         foreach (Control c in Page.Header.Controls) 
         { 
          if (c.ID == "GridStyle") 
          { 
           linkIncluded = true; 
          } 
         } 
         if (!linkIncluded) 
         { 
          HtmlGenericControl csslink = new HtmlGenericControl("link"); 
          csslink.ID = "GridStyle"; 
          csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomControls.Styles.GridStyles.css")); 
          csslink.Attributes.Add("type", "text/css"); 
          csslink.Attributes.Add("rel", "stylesheet"); 
          Page.Header.Controls.Add(csslink); 
         } 
        } 
    

De même pour l'ajout javascript

protected override void OnPreRender(EventArgs e) 
    { 
     string resourceName = "CustomControls.GridViewScript.js"; 
     ClientScriptManager cs = this.Page.ClientScript; 
     cs.RegisterClientScriptResource(this.GetType(), resourceName); 
    } 

De même en utilisant l'image ajoutée dans le fichier CSS. Utilisez le code ci-dessous

background: url('<%=WebResource("CustomControls.Styles.Cross.png")%>') no-repeat 95% 50%; 

Merci.

Questions connexes