Question

I’ve recently added an UpdatePanel to a single webpage which renders different usercontrols on button clicks. I’m struggling with a problem where i’m adding inline styling into the header dynamically with Header.Stylesheet.CreateStyleRule – the problem is that it doesn’t get inserted on partial postbacks and it does make sense. This is obviously because it’s a partial postback and the header is only being rendered when the page loads the first time.

The styling is being added by the following methods, which gets the styling from a database:

Private Sub InitializeStylesheet(ByVal ButtonId As Integer)
    Dim CSSStylesheet As Stylesheet = StyleBackend.GetStylesheets(ButtonId)
    Dim IdClassList As List(Of StyleIDClass) = StyleBackend.GetStylesheetsStyleIDClass(CSSStylesheet.StylesheetID)
    'Iterates through the cssidclass
    For Each cssidClass In IdClassList
        Dim styleItems As List(Of StyleItem) = StyleBackend.GetStyleItemsByIDorClass(cssidClass.StyleIDClassID)
        Dim cssString As String = Nothing
        For Each StyleItem As StyleItem In styleItems
            cssString += StyleItem.Property & ":" & StyleItem.Value & ";"
        Next
        'Iterates all cssitems which belongs to a cssidclass
        Me.Header.StyleSheet.CreateStyleRule(New CustomStyle(cssString), Nothing, cssidClass.ClassOrID)
        Me.Header.ViewStateMode = UI.ViewStateMode.Disabled
    Next
End Sub

I’ve been googling my ass off trying to get this to work, but it seems to be impossible.

This msdn article literal says that it is impossible to do what i’m trying to do.
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlhead.stylesheet.aspx

Adding styles or style rules programmatically during asynchronous postbacks is not supported. When you add AJAX capabilities to an ASP.NET Web page, asynchronous postbacks update regions of the page without updating the whole page. For more information, see Microsoft Ajax Overview.

Does anyone have a suggestion or alternative way of doing this?

Thank you!

Answer 1

One solution is just to include the styles in your main stylesheet(s) rather than modifying them dynamically. Even if they are data-driven, you could output them with the main page via an HTTP handler if the total list isn’t too large.

Alternatively (and probably more efficiently), you can return the style data to the client as a string and process it there.

You can listen for the EndRequest event on the client script manager:

function endRequest(){
    // look at the updated DOM     
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

Perhaps the following sequence:

• Initiate async postback
• Render the styles to a hidden field inside the UpdatePanel
• On endRequest, examine the DOM to see if it contains a hidden field with styles (based on naming convention, data attributes, or just ID)
• Grab the values out of the hidden field and add them to the page’s style rules using JavaScript