添加 runat="server" 改变布局的行为答案

【问题标题】：adding runat="server" changes the behaviour of the layout添加 runat="server" 改变布局的行为
【发布时间】：2010-10-28 05:14:32
【问题描述】：

我有一个包含一些控件、用户控件等的页面。

当我将 div 从普通的 <div id="foo"> 更改为 <div id="foo" runat="server"> 布局完全改变。

为什么会这样，我该如何预防？

我正在使用 2.0 .NET 框架

是不是因为 .NET 改变了我的 id，而这显然是我不想要的？

【问题讨论】：

给我们一个代码示例，以便我们更好地了解您的情况。
您是否有任何适用于所有控件（带有 runat="server" 的控件）的服务器端代码，例如添加自定义属性或样式？
或者更好的是，您的 div 是否有用于 CSS 样式的 ID？添加 runat="server" 可能会在呈现时更改该控件的 ClientID，从而破坏您的 CSS。
您有针对 foo 的 CSS 吗？ #foo { // 影响布局的样式 } 这就是我在下面的回答的回应。
正如 JaCraig 所说，您在 .NET Webforms 中没有太多选择。如果您使用 .NET MVC，那么您的 Id 不会改变，但您会失去应用程序生命周期和 Webforms 的 Web 控件。

标签： asp.net css layout html

【解决方案1】：

当你将 runat="server" 添加到一个 div 时，系统会自动为其生成 ID。它被称为 ID 修改。不幸的是，我知道在 2.0 框架中您可以为 div 做的事情并不多（无论如何都不会很痛苦），但是在 4.0 中，我们得到了一个覆盖......虽然在自定义控件上（在 2.0 ) 您可以覆盖 ClientID 和 UniqueID 字段。因此，如果您创建了一个使用 div 作为基础的 MyDiv 类，然后创建了 ClientID/UniqueID 字段，那么您应该没问题。

您的另一个选择是更新您的 CSS/javascript 以使用损坏的 ID。它基于页面内的位置是相当静态的，因为 ASP.Net 在回发期间使用它来查找控件。

【讨论】：

我很惊讶您建议在样式中使用损坏的 ID，这意味着如果您更改了控制层次结构，CSS 将不再适用。我书中的坏习惯。将其交换为使用类是一个更易于维护的选项。

【解决方案2】：

如果您在 CSS 中定位 div 控件的 ID，然后在服务器上运行该控件，您会发现它不再应用该样式。

这是因为 ASP.NET 有一个内置机制 (INamingContainer) 来确保您没有多个名称相同的控件。它通过添加容器前缀来做到这一点，因此您最终会得到：

<div id="ctl00_ctl00_myDivName" runat="server" />

解决此问题的最简单方法是将其从处理 ID 更改为处理类：

<div class="myDiv" runat="server"></div>

另外，我相信 XHTML 要求 Div 有结束标签，所以使用

<div runat="server">Some content</div>

【讨论】：

【解决方案3】：

添加 ClientMode="static" 这将确保您的 id 不会更改为您的控件的客户端 id。

【讨论】：