locked
register a <link> CSS reference on partial postback RRS feed

  • Question

  • User-557514964 posted
    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.
    Sunday, January 14, 2007 3:48 AM

All replies

  • User1178851682 posted

    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

     

    Sunday, January 14, 2007 5:05 AM
  • User-557514964 posted

    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.

    Tuesday, January 16, 2007 4:41 AM
  • User1070236303 posted

    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...

    Tuesday, January 16, 2007 9:14 AM
  • User-557514964 posted
    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.
    Wednesday, January 17, 2007 5:44 PM
  • User264985426 posted

    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.
    Wednesday, January 17, 2007 6:35 PM