【问题标题】:How can I use a traditional HTML id attribute with an ASP.net runat='server' tag?如何使用带有 ASP.net runat='server' 标记的传统 HTML id 属性?
【发布时间】:2010-09-09 01:35:07
【问题描述】:

我正在重构网站上的一些 CSS。我一直在研究,并注意到代码中没有传统的 HTML ID。

大量使用CssClass='…',或者有时只是class='…',但我似乎找不到说 id='...' 并且没有被服务器换掉的方法。

这是一个例子:

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

当响应从服务器返回时,我得到:

&lt;span id='$aspnet$crap$here$position_title'&gt;Manager&lt;/span&gt;

这里有什么帮助吗?

【问题讨论】:

    标签: asp.net css


    【解决方案1】:

    使用jQuery选择元素:

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

    jQuery 灵活的选择器,尤其是它的“开始于”/“结束于”选择器(上面显示了“结束于”选择器,为 ASP.NET 的 dom id munge 提供了一种很好的方法。

    rp

    【讨论】:

      【解决方案2】:

      放置在 id 前面的“废话”与控件的容器有关,除了不将其放入任何容器之外,没有办法(据我所知)阻止这种行为。

      如果需要在脚本中引用id,可以使用控件的ClientID,如下:

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

      【讨论】:

      • 请注意,这不会解决您的 CSS 问题,因为您不能在外部 CSS 文件中使用此技术。如果你真的需要在你的 CSS 中使用 ID,你应该尝试找到一种不将元素标记为 runat="server" 的方法。也许有一个
      【解决方案3】:

      大多数修复都表明她对于一个非常简单的问题来说太过分了。只需拥有您使用 CSS 定位的单独的 div 和 span。如果要使用 ID,请不要直接针对 ASP.NET 控件。

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

      【讨论】:

        【解决方案4】:

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

        例如:

        [style type="text/css"]
          #<%= AspNetId.ClientID %> {
              ... styles go here...
          }
        [/style]
        
        [script type="text/javascript"]
           document.getElementById("<%= AspNetId.ClientID %>");
        [/script]
        

        如果您想将 CSS 包含在单独的文件中,您可以更进一步,并拥有一些生成 CSS 的代码文件。

        另外,我在这里可能有点过头了,但是您可以使用 ASP.NET MVC 的东西(在撰写本文时尚未正式发布),它可以远离 Web 窗体并让您完全控制标记生成。

        【讨论】:

          【解决方案5】:

          好的,我想陪审团已经出局了。

          @leddt,我已经知道“废话”是围绕它的容器,但我认为微软可能会留下一个后门来单独留下 ID。通过包含 ClientID 在每次使用时重新生成 CSS 文件将是一个可怕的想法。

          我要么在任何地方都使用类,要么在 css 中硬编码一些看起来乱码的 ID。

          【讨论】:

          • 如果你真的需要在你的 CSS 中使用 ID,你应该设法不将元素标记为 runat="server"。也许有一个
          • 可以在代码中设置literal的内容,它赢了'不要被任何额外的标签包围。
          【解决方案6】:

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

          【讨论】:

          • @Jared。我的建议并没有像我的意思那样通过——是的,有一些非常正当的理由可以按照你的建议去做。我的意思是说.Net 并不真正同意。祝你好运!
          【解决方案7】:

          这里最好的做法是给它一个唯一的类名。

          【讨论】:

            【解决方案8】:

            您可能必须从 span 中删除 runat="server",然后在 span 中放置 a,这样您就可以对 span 进行样式化,并且仍然拥有动态的内部内容。

            不是一个优雅或简单的解决方案(并且需要重新编译),但它可以工作。

            【讨论】:

              【解决方案9】:

              .Net 总是会用一些被破坏的(每个都可以预测,但仍然不要指望它)值替换您的 id 值。你真的需要那个 id runat=server 吗?如果你不输入 runat=server,那么它就不会破坏它...

              添加: 就像 leddt 说的那样,您可以使用 ClientID 引用跨度(或任何带有 id 的 runat=server),但我认为这在 CSS 中不起作用。

              但我认为如果您的 CSS 使用基于 ID 的选择器,您会遇到更大的问题。您不能重复使用 ID。同一页面上不能有多个具有相同 ID 的项目。 .Net 会抱怨的。

              那么,考虑到这一点,你重构 CSS 的工作范围会变得更大吗?

              【讨论】:

                【解决方案10】:

                我不知道有什么方法可以阻止 .NET 破坏 ID,但我可以想出几种解决方法:

                1 - 嵌套跨度,一个带有 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];
                            }
                        }
                    }
                }
                

                【讨论】:

                  【解决方案11】:

                  如果您担心 classitus,请尝试在包含您希望设置样式的元素的父或子选择器上使用 id。此父元素不应应用 runat 服务器。简而言之,计划您的结构容器以不运行代码(即不运行代码)是一个好主意,这样您就可以使用未更改的 ID 访问应用程序/站点的主要部分。如果为时已晚,请添加包装器 div/span 或使用上述的类解决方案。

                  【讨论】:

                    【解决方案12】:

                    您希望控件运行在 runat="server" 是否有特殊原因?

                    如果是这样,我支持 的使用。 . .

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

                    【讨论】:

                      【解决方案13】:

                      我通常制作自己的控件来扩展 WebControl 或 HtmlGenericControl,并覆盖 ClientID - 返回 ID 属性而不是生成的 ClientID。这将导致 .NET 对 ClientID 所做的任何转换,因为命名容器将恢复为您在标记标记中指定的原始 id。如果您使用 jQuery 之类的客户端库并且需要可预测的唯一 ID,这很好,但如果您在任何服务器端都依赖视图状态,这将很难。

                      【讨论】:

                        【解决方案14】:

                        如果您正在访问span 或任何标签给您带来C# 或VB 代码后面的问题,那么runat="server" 必须保留,您应该使用&lt;span class="some_class" id="someID"&gt;。如果你没有访问后面代码中的标签,那么删除runat="server"

                        【讨论】:

                          猜你喜欢
                          • 1970-01-01
                          • 1970-01-01
                          • 1970-01-01
                          • 2012-06-25
                          • 1970-01-01
                          • 1970-01-01
                          • 1970-01-01
                          • 2016-05-04
                          • 2014-02-15
                          相关资源
                          最近更新 更多