register a <link> CSS reference on partial postback

Last post 01-17-2007 6:35 PM by Rama Krishna. 5 replies.

Sort Posts:

  • register a <link> CSS reference on partial postback

    01-14-2007, 3:48 AM
    • Member
      19 point Member
    • Bort
    • Member since 11-17-2006, 4:42 AM
    • Posts 51
    How does one go about registering a <link> css reference with the page but only on partial post back. Each partial postback could return a different <link> reference. I have examined all the register methods of the ScriptManager and there isn't any way to do this from what I see.
  • Re: register a <link> CSS reference on partial postback

    01-14-2007, 5:05 AM
    • Contributor
      3,498 point Contributor
    • MIB426
    • Member since 04-25-2003, 3:19 AM
    • Taiwan or Australia
    • Posts 849

    you can set different skin in the App_Themes folder

    You can set different theme by using Page.Theme = Mytheme

    You can trigger UpdatePanel event to set Page.Theme

     

    James Wu (MIB426)
    .NET is only way to go
    MCP, MCSE, MCDBA, MCSD, MCAD
  • Re: register a <link> CSS reference on partial postback

    01-16-2007, 4:41 AM
    • Member
      19 point Member
    • Bort
    • Member since 11-17-2006, 4:42 AM
    • Posts 51

    Yes, but the styles I am trying to reference have nothing to do with themes. I am building a custom control which must reference a css file if it is to work properly. I am not doing themes for my custom control.

  • Re: register a <link> CSS reference on partial postback

    01-16-2007, 9:14 AM
    • Contributor
      4,578 point Contributor
    • stmarti
    • Member since 06-06-2006, 12:20 PM
    • Posts 970

    From an updatepanel trigger setting the Page.Theme or Page.Title seems to works, but the following not works (would be nice)

                HtmlLink link = new HtmlLink( );
                link.Attributes.Add( "href", "/css/some.css" );
                link.Attributes.Add( "type", "text/css" );
                link.Attributes.Add( "rel", "stylesheet" );

                this.Header.Controls.AddAt( 0, link );

    And because we cannot put an updatepanel inside the head, we are limited to manipulate the content of the head from the server side.

    The only way to register a script in the updatepanel trigger (when dynamically adding your custom control), and that javascript (google for examples) could change/add link elements in the head.

    But maybe someone has a better solution for you...

  • Re: register a <link> CSS reference on partial postback

    01-17-2007, 5:44 PM
    • Member
      19 point Member
    • Bort
    • Member since 11-17-2006, 4:42 AM
    • Posts 51
    I don't quite understand what the Page.Theme has to do with my custom control. I don't want to change the Page.Theme because the comsumer of my custom control will want control over his own Page.Theme. I want my custom control, when it is loaded dynamicaly into the consumer's page, on partial postback, to add its own css reference. The custom control should be independent of the page and the consumer should not have to be concerned with adding this reference.
  • Re: register a <link> CSS reference on partial postback

    01-17-2007, 6:35 PM
    • Participant
      1,277 point Participant
    • Rama Krishna
    • Member since 01-24-2006, 4:33 PM
    • Atlanta, GA
    • Posts 307

    The easiest way to do this is to use ScriptManager.RegisterClientScriptBlock.

    In your control add the following function:

    void AddHtmlLink(string rel, string href, string type)
    {
        ScriptManager manager = ScriptManager.GetCurrent(Page);
        if (manager.IsInAsyncPostBack)
        {
            Dictionary<string, object> values = new Dictionary<string,object>();
            values.Add("rel", rel);
            values.Add("href", href);
            values.Add("type", type);
    
            JavaScriptSerializer serializer = new JavaScriptSerializer();
    
            StringBuilder scriptBuilder = new StringBuilder();
    
            scriptBuilder.Append("registerLink(");
            serializer.Serialize(values, scriptBuilder);
            scriptBuilder.AppendLine(");");
            ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "LinkRegister", "linkRegister.js");
    
            ScriptManager.RegisterClientScriptBlock(this, GetType(), "dynLink", scriptBuilder.ToString(), true);
        }
        else
        {
            HtmlLink link = new HtmlLink();
            link.Href = href;
            link.Attributes["rel"] = rel;
            link.Attributes["type"] = type;
            Page.Header.Controls.Add(link);
        }
    }
    

    Here is a sample usage:

    static int i = 0;
    
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        
    //Just some dummy test
        i = 1 - i;
        AddHtmlLink("Stylesheet", "Test" + (1-i).ToString() + ".css", "text/css");
    }
    
        
       On other thing you will need is the linkRegister.js file. Which will look like this:

     

    function registerLink(obj) {
     var link = document.createElement('link');
     link.href = obj.href;
     link.rel = obj.rel;
     link.type = obj.type;
     document.getElementsByTagName('head')[0].appendChild(link);
    }
    
    Sys.Application.notifyScriptLoaded();
     There is one flaw in this solution: which is that it does not delete the existing link nodes from DOM. This can be easily solved by adding an Id to the link element and removing it before adding a new link. I leave it to you to implement it according to your needs.

Page 1 of 1 (6 items)