如何将 ASP.NET 控件名称传递给 javascript 函数

How Do I Pass ASP.NET Control Name to Javascript Function?

本文关键字：javascript 函数 ASP NET 控件      更新时间：2023-09-26

我已经用谷歌搜索了一下，找到了很多'答案'，但没有一个对我有用，所以也许你们聪明的人可以给我一个"明确"的答案？

我有一个Javascript函数：

function enableSaveLink() {
    document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}

这工作正常，但显然它是硬编码的，可以在我的页面上启用特定控件。 我希望能够从页面上的任何控件调用此函数，并将要启用的控件的名称作为变量传递。 所以，在一个理想的世界中，我的Javascript函数看起来像这样：

function enableControl(ctl) {
    document.getElementById(ctl).removeAttribute('disabled');
}

我会这样称呼它：

<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />

我知道我传递控件名称的方式永远不会起作用，但是我已经尝试以各种不同的方式传递它，但没有一种有效，所以这只是为了说明目的。 谁能告诉我如何实际完成这项工作？

您需要使用控件的 ClientID 属性。

这将有助于：

<asp:button id="btnTest" runat="server" Text="Click Me" 
            onclientclick="enableControl('<%= lblTest.ClientID %>') />

使用this参考（更多信息在这里）：

<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />

然后在脚本中：

function enableSaveLink(elem) {
    elem.removeAttribute('disabled');
}

在这里，您将对调用函数的对象的引用传递给函数，然后您可以只在元素上设置属性，而不是在 DOM 中找到它。

编辑 - 刚刚意识到您的预期用途是什么。如果您希望在单击时从禁用的元素触发事件，则无法从该元素执行此操作。它需要从其他一些启用的元素进行处理。 如果您打算在单击时禁用元素，但单击时不启用元素，则上述方法可以正常工作。

编辑 - 只是为了配合我的评论，如果您有这样的统一结构（即所有输入都有相应的标签 - 甚至按钮），那么：

<div>
    <label onclick="activateSibling(this);">Input One:</label>
    <input type="text" />
</div>

你可以试试这个：

function activateSibling(label) {
    label.nextSibling.removeAttribute("disabled");
}

我做了一个jsFiddle，在jQuery中演示我的概念，它似乎工作正常。

编辑 - 好的，最后一个想法。自定义属性呢？您可以向可点击元素添加一个 target 属性，其中包含要启用的 Id，如下所示：

<label target="active_me" onclick="activate(this);">Click to activate</label>
<input type="text" id="active_me" disabled="disabled" />

和你的脚本：

function activate(label) {
    var inputId = this.getAttribute("target");
    var input = document.getElementById(inputId);
    input.removeAttribute("disabled");
}

虽然，开始感觉我们正在与技术作斗争，我们离ctrlInput.ClientID不太远了。但我想这会让你的标记更干净一些，并给你一个可以集体绑定的函数。

好的，我已经破解了它。 可能有多种方法可以做到这一点，但这相当优雅。

我的Javascript函数：

    function enableControl(ctl) {
        document.getElementById(ctl).removeAttribute('disabled');
    }

我的 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" />

键是 ClientIDMode 属性，当设置为静态时，这意味着控件在呈现时的客户端 ID 将与你在标记中为其提供的 ID 匹配。 如果它位于命名容器中，则可能需要将其包含在函数调用中传递的变量中。 有关 ClientIDMode 的更多信息，请参阅此处。

无论如何，这对我有用！ 谢谢大家的投入。

ClientID 用于获取 javascript 上的服务器端控制。

var element=document.getElementById('<%=lblTest.ClientID%>');
相关文章：