UpdatePanel 中的用户控件 - 更新时 css 样式消失（IE8）答案

【问题标题】：User controls inside an UpdatePanel - css styles are gone when updating (IE8)UpdatePanel 中的用户控件 - 更新时 css 样式消失（IE8）
【发布时间】：2011-01-30 10:27:24
【问题描述】：

我在 UpdatePanel 中有一个用户控件。一旦触发事件并更新用户控件 - 它似乎失去了它的 css 样式。这仅在 IE8 中发生在我身上，而在 Chrome 和 FF 中则很好。

例如一个用户控件：

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

在 UpdatePanel 中使用用户控件并对其进行更新的页面：

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

在 Chrome 和 FF 中，它似乎按预期工作（按钮单击导致当前时间显示在用户控件中，没有其他任何反应），但在 IE8 中，用户控件内的 div 失去其样式（背景颜色、边框） .

什么可能导致这个问题，可以做些什么来防止它？

【问题讨论】：

从您的示例中很难看出，但 CSS 是否在 UserControl 中定义？如果是这样，您可以将它移到外面或将 UpdatePanel 放在 UserControl 中吗？
是的，css 是在 UserControl 中定义的，但我确实需要它。
我从具有 IE11 兼容模式的 WebControl 获得了相同的行为：内联“样式”部分消失了，外部 CSS 的“链接 rel”和外部 JavaScript 的“脚本”标签也消失了。我尝试将“id”添加到每个标签，但没有成功。

标签： asp.net user-controls updatepanel

【解决方案1】：

here提到了这个问题。

我尝试了这个建议 - 在 OnInit 中注册 css 链接 - 它似乎有效。

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

【讨论】：

什么时候 HTML标记是“脚本”？我有点想哭。这个黑客很可能会在当天停止工作。

【解决方案2】：

我遇到了类似的问题。
我解决了将 css <link .. 从 <page> 移动到 <header> 的问题。

由于我使用 MasterPage 并且我不想在所有页面中都包含链接，因此我发现将 ContentPlaceHolder 放在 MasterPage 的页眉中很有用

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

然后是所需页面内的链接：

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

【讨论】：

【解决方案3】：

将css从用户控件复制到页面即可解决。

【讨论】：

【解决方案4】：

我的应用程序遇到了同样的问题，它似乎杀死了我的动态面板中的所有样式...我通过将内容占位符（我写入动态 HTML 的位置）移动到我的

标记中来纠正它母版页。

工作！谢谢大家:)

【讨论】：