Question

我正在网站上重构一些CSS。我一直在努力，并注意到代码中缺少传统的HTML ID。

大量使用CssClass='…'，有时仅使用class='…'，但我似乎找不到说id ='...'的方法，也没有让服务器换掉它。

以下是一个例子：

<span id='position_title' runat='server'>Manager</span>

当响应从服务器返回时，我得到：

<span id='$aspnet$crap$here$position_title'>Manager</span>

这里有任何帮助吗？

Answer 1

使用jQuery选择元素：

$("span[id$='position_title']")....

jQuery的灵活选择器，特别是它的'开头'/'以选择器结尾'（'end with'选择器如上所示，为ASP.NET的dom id munge提供了一个很好的方法。

RP

Answer 2

放在id前面的'crap'与控件的容器有关，除了不把它放在任何容器中之外，我无法（据我所知）防止这种行为。

如果需要在脚本中引用id，可以使用控件的ClientID，如下所示：

<script type="text/javascript">
    var theSpan = document.getElementById('<%= position_title.ClientID %>');
</script>

Answer 3

.Net将始终用一些损坏的（每一个稍微可预测但仍然不依赖它）值来替换你的id值。你真的需要拥有那个id runat = server吗？如果你没有输入runat = server，那么它就不会破坏它......

增加：就像leddt所说，你可以使用ClientID引用span（或任何带有id的runat =服务器），但我认为它不适用于CSS。

但是如果你的CSS使用基于ID的选择器，我认为你有一个更大的问题。您无法重复使用ID。您不能在具有相同ID的同一页面上拥有多个项目。 .Net会抱怨这一点。

因此，考虑到这一点，你重构CSS的工作范围是否会变得更大？

Answer 4

您可以在页面中嵌入CSS，并附上一些服务器标签来解决问题。在运行时，代码块将替换为ASP.NET生成的ID。

例如：

[style type =“text / css”] ＃＆lt;％= AspNetId.ClientID％＆gt; { ...样式去这里...... } [/风格]

[script type =“text / javascript”] document.getElementById（“＆lt;％= AspNetId.ClientID％＆gt;”）; [/脚本]

如果你想让你的CSS包含在一个单独的文件中，你可以更进一步，并有一些生成CSS的代码文件。

另外，我可能会在这里稍微跳一下枪，但是你可以使用ASP.NET MVC的东西（在撰写本文时尚未正式发布），它远离Web窗体并让你完全控制标记生成。

Answer 5

大多数修复建议她对一个非常简单的问题有点过分。只需要使用CSS定位单独的div和span。如果要使用ID，请不要直接定位ASP.NET控件。

  <span id="FooContainer">
     <span runat="server" id="Foo" >
         ......
     <span>
  </span>

Answer 6

好的，我猜陪审团已经出局了。

@leddt，我已经知道'废话'是它周围的容器，但我想也许微软会留下一个后门来留下身份证。通过包含ClientID在每次使用时重新生成CSS文件将是一个可怕的想法。

我要么在任何地方都使用类，要么在CSS中使用硬编码的一些乱码ID。

Answer 7

@Matt Dawdy：CSS中的ID有一些很好的用途，主要是当你想要设置一个你知道只在网站或页面中出现一次的元素时，例如注销按钮或标头广告。

Answer 8

如果您正在访问span或后面的C＃或VB代码给您带来问题的任何标记，那么runat="server"必须保留，您应该使用<span class="some_class" id="someID">。如果您没有访问后面代码中的代码，请删除runat="server"。

Answer 9

这里最好的办法是给它一个独特的类名。

Answer 10

您可能不得不从范围中删除runat =“server”，然后在范围内放置一个，这样您就可以对范围进行样式化，并且仍然具有动态内部内容。

不是一个优雅或简单的解决方案（它需要重新编译），但它可以工作。

Answer 11

我不知道如何阻止.NET破坏ID，但我可以想办法解决这个问题：

1 - Nest spans，一个使用runat =“server”，一个没有：

<style type="text/css">
#position_title { // Whatever
}
<span id="position_titleserver" runat="server"><span id="position_title">Manager</span></span>

2 - 正如Joel Coehoorn建议的那样，使用一个独特的类名。已经在上课了？没关系，你可以使用1个以上！此...

<style type="text/css">
.position_title { font-weight: bold; }
.foo { color: red; }
.bar { font-style: italic; }
</style>
<span id="thiswillbemangled" class="foo bar position_title" runat="server">Manager</span>

...将显示：

的管理器的的

3 - 编写Javascript函数以在页面加载后修复ID

function fixIds()
{
    var tagList = document.getElementsByTagName("*");
    for(var i=0;i<tagList.length;i++)
    {
        if(tagList[i].id)
        {
            if(tagList[i].id.indexOf('$') > -1)
            {
                var tempArray = tagList[i].id.split("$");
                tagList[i].id = tempArray[tempArray.length - 1];
            }
        }
    }
}

Answer 12

如果您担心的是classitus，请尝试在包含您要设置样式的元素的父或子选择器上使用id。此父元素不应该应用runat服务器。简单地说，最好将结构容器规划为不运行代码（即没有runat），这样您就可以使用未更改的ID访问应用程序/站点的主要部分。如果为时已晚，请添加包装div / span或使用所提及的类解决方案。

Answer 13

是否有特殊原因要您将控件设为runat =“server”？

如果是这样，我第二次使用＆lt; asp：Literal＆gt; 。。。

它应该为您完成工作，因为您仍然可以编辑后面代码中的数据。

Answer 14

我通常自己创建扩展WebControl或HtmlGenericControl的控件，并覆盖ClientID - 返回ID属性而不是生成的ClientID。这将导致.NET对ClientID进行的任何转换，因为命名容器将恢复为您在标记标记中指定的原始ID。如果您使用像jQuery这样的客户端库并且需要可预测的唯一ID，那么这很棒，但如果您依赖于viewstate来处理任何服务器端，那就太难了。

Answer 15

我确信此处至少once已经问过这个问题。这个词是'munging'。 Rich Strahl在2006年也写了post。

如何在ASP.net runat ='server'标记中使用传统的HTML id属性？

15 个答案: