locked
Method to register CSS links RRS feed

  • Question

  • User-557582276 posted

    When designing user controls and custom server controls, the Page.ClientScript object has a method called RegisterClientScriptInclude to register links to external JavaScript documents. This means that controls can 'import' their own JavaScript, and that duplicate links are avoided if the control is used on the page more than once. A brilliant idea!

    Is there really no equivalent for links to CSS files?

    Thanks

    David

    Friday, April 17, 2009 6:37 AM

Answers

  • User1747761241 posted

    That all looks very interesting. I've never tried messing with design time support stuff.

    Unless I've mistaken you (a regular occurence), you've not understood my question. My question was about designing controls that, when included on a page, add a <link> tag to the header of that page in order to get the css which the control needs.

    I understood you exactly.

      Like you said there's no method to do it why not give you a method to select a cssclass.

    This will work once.

    Page.Header.Controls.Add(new literalcontrol("<link href='Blog.css' rel='stylesheet' type='text/css' />"))';

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 18, 2009 9:01 AM

All replies

  • User1747761241 posted

    None of the asp.net controls add styles to a page.  So... adding styles to a page from a control isn't natively supported.

    Alternative:  Tell visual studio that a property is a css class and to use the built in selector in the page designer.  Then this is amost exactly like an asp.net control as far as selecting a css style.

    Just drop this code into the code behind of your control and try it.  It enables a drop down of all the css classes available on the page in the properties window.

     

     [DefaultValue("")
        , Editor(typeof(System.ComponentModel.Design.CollectionEditor ), typeof(System.Drawing.Design.UITypeEditor ))
        , System.Web.UI.CssClassProperty()
        , System.ComponentModel.Bindable(true)]
        public string CSSClass { get; set; }
     

     

     

    Friday, April 17, 2009 9:54 AM
  • User-557582276 posted

    That all looks very interesting. I've never tried messing with design time support stuff.

    Unless I've mistaken you (a regular occurence), you've not understood my question. My question was about designing controls that, when included on a page, add a <link> tag to the header of that page in order to get the css which the control needs.

    I wrote the following extension methods for the Page object which basically do the job I wanted:

    public static class ExtensionMethods
      {
        /// <summary>
        /// Determines whether the CSS file is already linked to from this page.
        /// </summary>
        /// <param name="pageThis">The page.</param>
        /// <param name="url">The URL of the CSS file.</param>
        /// <returns></returns>
        private static bool HasLinkedCssFile(this Page pageThis, string url)
        {
          foreach (Control ctl in pageThis.Header.Controls)
          {
            if (ctl.GetType() == typeof(HtmlLink))
            {
              HtmlLink lnkCtl = (HtmlLink)ctl;
              if (lnkCtl.Href == url) return true;
            }
          }
          return false;
        }

        /// <summary>
        /// Links to the specified CSS file if it's not already linked to.
        /// </summary>
        /// <param name="pageThis">The page.</param>
        /// <param name="url">The url of the CSS file.</param>
        public static void LinkToCssFile(this Page pageThis, string url)
        {
          if (!HasLinkedCssFile(pageThis, url))
          {
            System.Web.UI.HtmlControls.HtmlLink lnkInclude = new System.Web.UI.HtmlControls.HtmlLink();
            lnkInclude.Href = url;
            lnkInclude.Attributes.Add("type", "text/css");
            lnkInclude.Attributes.Add("rel", "stylesheet");
            pageThis.Header.Controls.Add(lnkInclude);
          }
        }
      }

    This means that when designing a user control or custom server control you can link to any required CSS files as follows:

    Page.LinkToCssFile("~/PathToCssFile.css");

     It's worth bearing in mind this method call needs to occur before the control's rendering stage. That had me stumped for a while!

    Although the method checks in the header for any existing HtmlLink objects pointing to the same URL, if there is a link to the same URL hard-coded on the page the method won't spot it, because it wouldn't have been loaded into the control tree. So you will get duplicate link elements if you hard-code one and then add a control to the page which adds a link to the same URL.

    Anyway, thanks for your response Danny117, and I hope that my code is of use to anyone else looking at this thread.

    Cheers

    David

    Friday, April 17, 2009 11:49 AM
  • User1747761241 posted

    That all looks very interesting. I've never tried messing with design time support stuff.

    Unless I've mistaken you (a regular occurence), you've not understood my question. My question was about designing controls that, when included on a page, add a <link> tag to the header of that page in order to get the css which the control needs.

    I understood you exactly.

      Like you said there's no method to do it why not give you a method to select a cssclass.

    This will work once.

    Page.Header.Controls.Add(new literalcontrol("<link href='Blog.css' rel='stylesheet' type='text/css' />"))';

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 18, 2009 9:01 AM