如何将 ASP.NET 控件名称传递给 Javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11986282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Do I Pass ASP.NET Control Name to Javascript Function?
提问by Philip Stratford
I have Googled this to death and found lots of 'answers', but none of them will work for me, so maybe you clever people could give me a 'definitive' answer?
我已经在谷歌上搜索到死并找到了很多“答案”，但没有一个对我有用，所以也许你们聪明的人可以给我一个“确定性”的答案？
I have a Javascript function:
我有一个 Javascript 函数：
function enableSaveLink() {
document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}
This works fine, but obviously it is hard-coded to enable a particular control on my page. What I'd like is to be able to call this function from any control on the page, passing the name of the control I'd like to enable as a variable. So, in an ideal world, my Javascript function would look like this:
这工作正常，但显然它是硬编码的以在我的页面上启用特定控件。我想要的是能够从页面上的任何控件调用这个函数，传递我想要作为变量启用的控件的名称。因此，在理想情况下，我的 Javascript 函数将如下所示：
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
And I'd call it like this:
我会这样称呼它：
<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />
I know the way I've passed the control name would never work, but I've tried passing it in all different ways and none work, so this is just for the purposes of illustration. Can anyone tell me how to actually make this work?
我知道我传递控件名称的方式永远行不通，但我尝试以各种不同的方式传递它，但没有任何效果，所以这仅用于说明目的。谁能告诉我如何真正做到这一点？
采纳答案by Philip Stratford
Ok, I've cracked it. There are probably more ways than one to do this, but this is fairly elegant.
好的，我已经破解了。可能有不止一种方法可以做到这一点，但这是相当优雅的。
My Javascript function:
我的 Javascript 功能：
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
My ASP.NET markup:
我的 ASP.NET 标记：
<asp:Button ID="btnTestButton" runat="server" Text="Click to enable" OnClientClick="enableControl('txtTestTextbox');" />
<asp:TextBox ID="txtTestTextBox" runat="server" enabled="false" ClientIDMode="Static" />
The key is the ClientIDMode property, which, when set to static, means that the control's client-side ID when it is rendered will match the ID you give it in markup. If it's within a naming container you may need to include that in the variable passed in the function call. See herefor more info about ClientIDMode.
关键是 ClientIDMode 属性，当设置为静态时，这意味着控件在呈现时的客户端 ID 将与您在标记中提供的 ID 匹配。如果它在命名容器中，您可能需要将其包含在函数调用中传递的变量中。有关 ClientIDMode 的更多信息，请参见此处。
Anyway, this works for me! Thanks for your input, everyone.
无论如何，这对我有用！谢谢大家的意见。
回答by nunespascal
回答by Paul Aldred-Bann
Use the thisreference (more info here):
使用this参考（更多信息在这里）：
<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />
Then in your script:
然后在你的脚本中：
function enableSaveLink(elem) {
elem.removeAttribute('disabled');
}
Here you are passing a reference to the object calling the function to the function, you can then just set the attribute on the element rather than finding it in the DOM.
在这里，您将调用函数的对象的引用传递给函数，然后您可以只在元素上设置属性，而不是在 DOM 中查找它。
EDIT- Just realised what your intended usage is. If you're looking to fire an event from a disabled element when clicked, then you can't do this from the element. It would need to be handled from some other enabled element. The above method works fine if you intend to disable the element when clicked - but not enable the element when clicked.
编辑- 刚刚意识到您的预期用途是什么。如果您希望在单击时从禁用的元素触发事件，则不能从该元素执行此操作。它需要从其他启用的元素处理。如果您打算在单击时禁用该元素，则上述方法可以正常工作 - 但在单击时不启用该元素。
EDIT- Just to accompany my comment, if you have a uniform structure like this (i.e. where all inputs have a corresponding label - or even button) then:
编辑- 只是为了伴随我的评论，如果你有这样的统一结构（即所有输入都有相应的标签 - 甚至按钮），那么：
<div>
<label onclick="activateSibling(this);">Input One:</label>
<input type="text" />
</div>
You could try this:
你可以试试这个：
function activateSibling(label) {
label.nextSibling.removeAttribute("disabled");
}
I've made a jsFiddledemonstrating my concept in jQuery which seems to work fine.
我制作了一个jsFiddle 来演示我在 jQuery 中的概念，它似乎工作正常。
EDIT- OK, last idea. What about custom attributes. You could add a targetattribute to your clickable element which contains the Id you're going to enable, like so:
编辑- 好的，最后一个想法。自定义属性怎么样。您可以target向包含要启用的 ID 的可点击元素添加一个属性，如下所示：
<label target="active_me" onclick="activate(this);">Click to activate</label>
<input type="text" id="active_me" disabled="disabled" />
And your script:
还有你的脚本：
function activate(label) {
var inputId = this.getAttribute("target");
var input = document.getElementById(inputId);
input.removeAttribute("disabled");
}
Although, it's starting to feel like we're fighting against the technology a little and we're not too far removed from ctrlInput.ClientID. But I suppose this makes your markup a little cleaner and gives you a function that's bindable en masse.
尽管如此，我们开始觉得我们正在与这项技术作斗争，而且我们离ctrlInput.ClientID. 但我想这会使您的标记更清晰一些，并为您提供一个可整体绑定的函数。
回答by Buzz
ClientIDis used for getting server side control on javascript.
ClientID用于在 javascript 上获取服务器端控制。
var element=document.getElementById('<%=lblTest.ClientID%>');
