如何在 javascript 中动态设置 ASP 元素 ID答案

【问题标题】：How can I set ASP element ID dynamically in javascript如何在 javascript 中动态设置 ASP 元素 ID
【发布时间】：2019-07-23 11:07:36
【问题描述】：

如下所示，我有一个循环，在其中创建一些 ASP 标签。

function func(val) {
    var mod = Math.ceil(val / 9);
    for (var i = 0; i < mod; i++) {
        html = '<div class="carousel-item">
                  <table>
                    <tr>
                      <td>Temp ' + parseInt(i * 9 + 1) + '</td>
                      <td>Temp  ' + parseInt(i * 9 + 2) + '</td>
                      <td>Temp  ' + parseInt(i * 9 + 3) + '</td>
                    </tr>
                    <tr>
                      <td><asp:Label ID="TempCL1" runat="server" Text="xxx"></asp:Label></td>
                      <td><asp:Label ID="TempCL2" runat="server" Text="xxx"></asp:Label></td>
                      <td><asp:Label ID="TempCL3" runat="server" Text="xxx"></asp:Label></td>
                    </tr>
                  </table>
                </div>';

              $(".carousel-inner").html($(".carousel-inner").html() + html);
        }
    }

我的代码工作正常，但我需要修改标签 ID。例如：来自

'<tr><td class="Valorppal"><asp:Label ID="TempCL1" runat="server" Text="xxx"></asp:Label></td>'

类似

'<tr><td class="Valorppal"><asp:Label ID="TempCL' + parseInt(i * 9 + 1) + '" runat="server" Text="xxx"></asp:Label></td>'

但我收到一个错误（“TempCL' + parseInt(i * 9 + 1) + '” 不是有效标识符。）

【问题讨论】：

当心：您正试图在在浏览器内生成<asp:Label ID="..." runat="server">标签，但这永远不会起作用：带有runat="server"的标签只会做你想做的事，如果他们从您的服务器端 ASP.NET 代码内部创建或生成，因为只有这样 IIS 和 .NET 才能为您执行它们。浏览器根本不知道<asp:Label> 是什么。
@PeterB 嗯..但是我的第一段代码无论如何都可以工作......我明白......那么我应该怎么做才能得到我想要的？
首先看这个：Create multiple labels on fly in asp.net。更一般地说，您可能会从查看几个 ASP.NET WebForms 教程（例如在 YouTube 或 Microsoft Virtual Academy 上搜索）中受益。
但我不能从服务器端做到这一点......我需要它来自 Javascript。我尝试使用替换函数来替换 ID 字符串，但它也不起作用
您不能使用 javascript 设置服务器控制 ID。正如@PeterB 所说，您必须动态创建它们。但你的问题听起来像是X-Y problem。

标签： javascript jquery html asp.net

【解决方案1】：

您似乎没有真正的理由使用<asp:Label>，所以我将它们替换为<span> 标签。

我还在每行末尾为长 html 字符串添加了\，这是在 Javascript 中使用常规引号作为分隔符创建多行字符串文字所必需的。

最后我使用了 jQuery .append()，它完成了你所做的工作，同时更具可读性。

工作代码，至少对于您提供的部分：

function func(val) {
    var mod = Math.ceil(val / 9);
    for (var i = 0; i < mod; i++) {
        var html =
'<div class="carousel-item">\
  <table>\
    <tr>\
      <td>Temp ' + (i * 9 + 1) + '</td>\
      <td>Temp ' + (i * 9 + 2) + '</td>\
      <td>Temp ' + (i * 9 + 3) + '</td>\
    </tr>\
    <tr>\
      <td><span id="TempCL' + (i * 9 + 1) + '">xxx</span></td>\
      <td><span id="TempCL' + (i * 9 + 2) + '">xxx</span></td>\
      <td><span id="TempCL' + (i * 9 + 3) + '">xxx</span></td>\
    </tr>\
  </table>\
</div>';
        $(".carousel-inner").append(html);
    }
}

func(23);

td { border: solid 1px green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="carousel-inner"></div>

【讨论】：

感谢您的回答，但我需要 asp:Label 标签，因为我必须在服务器端每 10 秒设置一次值（读取一些文件）。
为什么？我想在服务器端设置 asp:Label 的值（使用 FindControl），但我想从 javascript 端创建它们。
你不能。因为你做不到。没有必要争论你想要什么，如果你想要什么是不可能的。客户端永远无法在任何框架中生成服务器端对象。
为什么不呢？就像我说的那样，我用我的第一段代码生成了它们。 TempCL1、TempCL2 和 TempCL3 生成正确，我可以为它们赋值
@DanielR Peter 是 100% 正确的。您不能在浏览器中创建服务器端元素。如果您想添加与服务器端代码交互的元素（使用标准回发），那么服务器端代码必须创建它们。

【解决方案2】：

请将 asp:label 的 id 设置为动态如下：-

<asp:Label ID="TempCL'+parseInt(i * 9 + 2)+'" runat="server" Text="xxx"></asp:Label>

希望它有效！

【讨论】：

这就是我所做的，但我得到了我写的错误。 :(。记住这段代码在撇号（'）内