如何使用javascript动态查找控件的ClientID？答案

【问题标题】：How to dynamically find ClientIDs of controls using javascript?如何使用javascript动态查找控件的ClientID？
【发布时间】：2012-07-12 06:52:37
【问题描述】：

我正在开发一个 javascript 函数，它接收三个控件的名称，然后在页面上找到它们。这些控件有五组。为简单起见，我想使用相同的函数并传入一组控件名称，然后让函数通过 clientID 动态查找控件。有没有办法做到这一点？

这是我目前所拥有的......

        function InsertKeyword(keywordCtrl, subjCtrl, bodyCtrl) {
            var ctrl;
            if (OnSubj) ctrl = $find("<%=" + subjCtrl + ".ClientID%>");
            if (OnBody) ctrl = $find("<%=" + bodyCtrl + ".ClientID%>");
            if (OnSubj == 1 || OnBody == 1) {
                var selectedIndex = document.getElementById(keywordCtrl).selectedIndex;
                var selectedText = document.getElementById(keywordCtrl).options[selectedIndex].text;
                var strSpan = '<u>' + selectedText + '</u>&nbsp';
                ctrl.pasteHtml(strSpan);
            }
        }

这不起作用，但它说明了我正在尝试做的事情。

如何使用 javascript 动态查找控件的 ClientID？

【问题讨论】：

我认为您混淆了客户端和服务器端的工作方式...<%= %> 是服务器端命令

标签： javascript jquery asp.net dynamic client-side

【解决方案1】：

<%= %> 是服务器端代码，不是客户端代码，所以不是...

if (OnSubj) ctrl = $find("<%=" + subjCtrl + ".ClientID%>");
if (OnBody) ctrl = $find("<%=" + bodyCtrl + ".ClientID%>");

你应该有类似...

if (OnSubj) ctrl = $find("<%=subjCtrl.ClientID%>");
if (OnBody) ctrl = $find("<%=bodyCtrl.ClientID%>");

其中subjCtrl 和bodyCtrl 是实际的服务器端控件对象。

让 JavaScript 工作的唯一方法是调用类似这样的函数...

InsertKeyword("my keyword", "<%=subjCtrl.ClientID%>", "<%=bodyCtrl.ClientID%>");

然后让你的 JavaScript 类似于...

function InsertKeyword(keywordCtrl, subjCtrl, bodyCtrl) {
  var ctrl;
  if (OnSubj) ctrl = $find(subjCtrl);
  if (OnBody) ctrl = $find(bodyCtrl);

更新

根据 OP 的评论，在服务器端控件通过标记声明 OnClientClick 属性时，不能使用 <%= %> 语法。

以下内容将不起作用，<%=myCtrl.ClientID%> 将被呈现为与发送到浏览器时完全相同的内容...

<asp:Button runat="server" ID="test" OnClientClick="myFnc('<%=myCtrl.ClientID%>')"/>

相反，您需要通过其中一种方法通过代码隐藏（假定为 C#）设置属性...

test.OnClientClick = "myFnc('" + myCtrl.ClientID + "');";
test.OnClientClick = string.Format("myFnc('{0}');", myCtrl.ClientID);

【讨论】：

我喜欢你的回答，但我试过了，只传入了字符串“”，而不是控件的客户端ID。
@ks78，你确定<%=txtSubject.ClientID%> 正在由ASP.NET 在服务器上处理吗？如果它包含在 .js 文件中（例如），那么该文件将被简单地抽出到浏览器而不进行任何处理
@ks78，请记住只有包含服务器端控件对象的页面/用户控件才能提供ClientID（当然，除非您设置了方法/属性/会话变量/等来检索它值）
脚本在 .aspx 页面上，而不是在 .js 文件中。正在从下拉列表的 OnClientClick 属性调用该函数。由于某种原因，服务器没有处理它并用控件的 clientID 替换它。
@ks78，<%=txtSubject.ClientID%> 是实际 OnClientClick 属性的一部分吗？如果是这样，那么就不可能在控件的标记中包含该语法。我现在将更新我的答案以解释我的意思

【解决方案2】：

如果我理解您的问题，那么我认为您需要 javascript 中的控件 ID。如果您使用的是 Asp.Net 4，则设置控件ClinetIDMode = Static。现在在 javascript 中输入相同的控件 ID。例如，如果你有一个 ID 为 myControl 的控件，那么在 javascript 中你可以得到它

var cID = document.getElementByID('myControl');

【讨论】：

【解决方案3】：

你不能这样做：

你需要：

【讨论】：

【解决方案4】：

如何使用 CSS 选择器在 ASP.NET clientID 的最后部分进行控件匹配，如下所示：

$.find('input[name$='+subjCtrl+']:checked');

未经测试，但应该是这样的。

编辑：我不知道您使用的是什么控件，但这是一个示例。如果您也发布 ASP.NET 标记，可以提供更详细的信息。

【讨论】：

我不太了解 CSS 选择器，但那不是指客户端控件名称吗？