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

问题

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?

回答1:

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);
    }
 }

回答2:

I had similar problem.
I solved it moving css <link .. from the <page> to the <header>.

Since I use a MasterPage and I don't want the link in all pages, I found useful putting a ContentPlaceHolder in the MasterPage's Header

<head id="Head1" runat="server">
  ...
  <asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server"/>
</head>

and then the link inside the desired page:

<asp:Content ID="Content2" ContentPlaceHolderID="HeaderContentPlaceHolder"       Runat="Server">
    <link rel="stylesheet" type="text/css" href="CSS/my.css" />
</asp:Content>

回答3:

Copy the css from user control to the page will solve it.

回答4:

I had the same issue with my application, it seemed to kill all styling in my dynamic panel... I corrected it by moving the content placeholder (place I write the dynamic HTML to) into the < head> tag on my master page.

Working! Thank you all :)

来源：https://stackoverflow.com/questions/4842368/user-controls-inside-an-updatepanel-css-styles-are-gone-when-updating-ie8

标签

ASP.NET

user-controls

updatepanel