添加 runat="server" 会改变布局的行为。

Question

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

当我将一个普通的

更改为

时，整个布局都会发生变化。

为什么会这样，我该如何防止它发生？

我正在使用2.0 .NET框架。

是因为.NET更改了我的id，显然我不想要这种情况发生吗？

- Mafti

---

请给我们提供一段代码示例，以便我们更好地了解您的情况。 - Tristan Warner-Smith

你有任何针对所有服务端控件（即带有runat="server"属性的控件）的服务器端代码吗？比如添加自定义属性或样式。 - Cᴏʀʏ

或者更好的是，你的div是否有用于CSS样式的ID？添加runat="server"可能会在呈现控件时更改该控件的ClientID，从而破坏你的CSS。 - Cᴏʀʏ

你有针对foo的CSS选择器吗？ #foo { //影响布局的样式 }这是我下面回答的内容。 - Tristan Warner-Smith

正如JaCraig所说，在.NET Webforms中，你没有太多选择。如果你选择使用.NET MVC，那么你的Id不会被更改，但是你将失去Webforms的应用程序生命周期和Web控件。 - Tristan Warner-Smith

Answer 1

如果你在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>

- Tristan Warner-Smith

Answer 2

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

- Scripta55

Answer 3

当您将runat="server"添加到div时，系统会自动生成其ID。这被称为ID混淆。不幸的是，在2.0框架中，我所知道的关于div的操作并不多（无论如何都很麻烦），但在4.0中，我们正在获得一个覆盖...然而，在自定义控件中（在2.0中），您可以重写ClientID和UniqueID字段。因此，如果您创建了一个使用div作为基础的MyDiv类，然后创建了ClientID/UniqueID字段，那么应该没问题。

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

- JaCraig

---

我很惊讶你会建议在样式中使用混淆的ID，这意味着如果您改变了控件层次结构，CSS将不再适用。在我看来，这是一种不好的做法。将其更改为使用类是一个更可维护的选项。 - Tristan Warner-Smith