User controls inside an UpdatePanel – css styles are gone when updating (IE8)

asp.netupdatepaneluser-controls

I have an user control inside an UpdatePanel. Once an event is triggered and updates the user control – it seems to lose its css styles. This happened to me in IE8 only, while in Chrome and FF it was fine.

A user control for example:

<style type="text/css">
    div.test
    {
        width: 500px;
        height: 400px;
        background-color: #0000BB;
        color: #FFFFFF;
        border: 2px solid #11CC00;
    }
</style>
<div id="div123" runat="server" class="test"></div>

public void SetText(string text)
{
     div123.InnerText = text;
}

A page using the user control inside an UpdatePanel and updating it:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
    <div id="div1" runat="server">
        <uc:TestUC ID="test1" runat="server"></uc:TestUC>
     </div>
  <asp:Button ID="Button1" runat="server" OnClick="Button1_OnClick" Text="Click" />
 </ContentTemplate>
</asp:UpdatePanel>

protected void Button1_OnClick(object sender, EventArgs e)
{
     test1.SetText(DateTime.Now.ToString());
}

In Chrome and FF it seems to be working as expected (button click causes current time to display in the user control, nothing else happens), but in IE8 the div inside the user control loses its styles (background color, borders).

What could be causing this problem, and what can be done to prevent it?

Best Answer

This issue is mentioned here.

I tried the suggestion - registering the css link in the OnInit - and it seems to work.

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    ScriptManager sm = ScriptManager.GetCurrent(Page);
    if (!sm.IsInAsyncPostBack)
    {
         string css = string.Format("<link rel=\"stylesheet\" href=\"{0}\" type=\"text/css\" />", ResolveUrl(CssClassFile));
         ScriptManager.RegisterClientScriptBlock(this, typeof(MyBlahControl), "MyBlahId", css, false);
    }
 }
Related Topic