将 asp.net ClientId 传递给 Javascript 函数 - 作为参数内联答案

【问题标题】：Pass asp.net ClientId to Javascript Function - inline as a param将 asp.net ClientId 传递给 Javascript 函数 - 作为参数内联
【发布时间】：2012-01-04 01:39:37
【问题描述】：

我有一个需要通过 Javascript 函数单击的 asp 图像按钮。文本框的按键应该在按下回车键时触发此图像按钮服务器端事件。代码如下：-

标记

    <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="images/butt_searchoff.png"
    class="sb_search" ToolTip="Search the Database" AlternateText="Search" OnClick="ImageButton3_Click" OnClientClick="SetExpandedCount()"/>

    <input id="tbSearch" runat="server" class="sb_input" type="text" autocomplete="off" onkeypress="return OverridePostBackOnEnter(event, '" & ImageButton3.ClientID & "');" />

我想将 ImageButton3 ClientId 作为参数传递给名为 OverridePostBackOnEnter 的 Javascript 函数。

Javascript 看起来像这样：

     function OverridePostBackOnEnter(event, ctrl) {
        if (event.keyCode == 13) {
            alert(ctrl);
            if ($.browser.mozilla) {
                __doPostBack(ctrl, 'OnClick'); //for IE
            }
            else {
                //but for other browsers you should use
                __doPostBack(ctrl, 'OnClick');
            }
        }
    };

我发现的是 a) 我无法获得要传递的正确 ClientId，我只是得到 undefined 或 null。

和 b) 如果我硬编码并将 ctrl 更改为“cmain_ctl00_ImageButton3”，则 __dopostback 不会为 ImageButton3 调用我的服务器端代码。

对此的任何帮助将不胜感激。

编辑

好的，我认为我已经找到了解决方案，并认为我应该更新帖子以防万一有人需要。

首先我将 ImageButton3 上的 'ClientIdMode' 设置为 'Static'

     <asp:ImageButton ID="ImageButton3" ClientIDMode="Static" runat="server" ImageUrl="images/butt_searchoff.png" class="sb_search" ToolTip="Search the Database" AlternateText="Search" OnClick="ImageButton3_Click" OnClientClick="SetExpandedCount()"/>

这允许我将按钮的 id 传递给函数“OverridePostBackOnEnter”

    <input id="tbSearch" runat="server" class="sb_input" type="text" autocomplete="off" onkeypress="return OverridePostBackOnEnter(event, 'ImageButton3');" />

然后我的 Javascript 变成：

    function OverridePostBackOnEnter(event, ctrl) {
        if (event.keyCode == 13) {
            if ($.browser.mozilla) {
                var overridctrl = document.getElementById(ctrl);
                __doPostBack(overridctrl.name, ''); //for IE
            }
            else {
                //but for other browsers you should use
                var overridctrl = document.getElementById(ctrl);
                __doPostBack(overridectrl.name, '');
            }
        }
    };

通过查看“yourForm._EVENTTARGET.value”和“yourForm._EVENTARGUMENT.value”，我可以看到这些值没有被设置。通过使用“document.getelementId”并传递“control.name”设置这些值并启用“__dopostpack”来调用服务器端事件。

【问题讨论】：

标签： javascript asp.net dom-events

【解决方案1】：

请改用this 关键字。在您输入的onkeypress 事件的上下文中，this 将引用输入对象。因此，this.id 就足够了。示例如下：

<input id="tbSearch" runat="server"
                  class="sb_input" type="text"
                  autocomplete="off"  
                  onkeypress="return OverridePostBackOnEnter(event, this.id);" />

编辑

完全误读了您的帖子。正确答案如下：

<input id="tbSearch" runat="server"
   class="sb_input" type="text"
   autocomplete="off"  
 onkeypress="return OverridePostBackOnEnter(event, '<%#ImageButton3.ClientID%>');" />

【讨论】：

不会传递输入控件的id吗？我需要 ImageButton 控件的 clientid
你是对的。看来@JamesJohnson 和我都误读了你的帖子。
是的，我的警报显示文本不是您所期望的 clientid。
@NeilHodges，试试<%# ImageButton3.ClientID %>。
hmm 似乎收到了一个 javascript 错误 - 错误：非法 XML 字符，不认为它喜欢

【解决方案2】：

只需使用this.id:

OverridePostBackOnEnter(event, this.id);

你也可以改变方法，只传入元素本身：

OverridePostBackOnEnter(event, this);

编辑

要传入 ImageButton 的 ClientID，请尝试以下操作：

OverridePostBackOnEnter(event, '<%= ImageButton3.ClientID %>');

【讨论】：

不会传递输入控件的id吗？我需要 ImageButton 控件的 clientid
是的，我的警报显示文本不是您所期望的 clientid。
我认为 html 输入很难解释内联代码。你可以改用TextBox 控件吗？
不幸的是，不，代码已经写好了。我这样做的原因是在页面上方我禁用了所有输入文本框上的所有输入按键，然后通过将 2 个参数传递给覆盖函数来设置每个输入以覆盖它，这是通用的，它接受客户端 ID 和参数，即 onclick，进而使用 __dopostback 调用服务器端事件。
@NeilHodges，如果我提供了代码隐藏解决方案，您可以使用它吗？

【解决方案3】：

这很 hacky，但这可以工作....

<asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="images/butt_searchoff.png"
    class="sb_search" ToolTip="Search the Database" AlternateText="Search" OnClick="ImageButton3_Click" OnClientClick="SetExpandedCount()"/>

    <input id="tbSearch" runat="server" class="sb_input" type="text" autocomplete="off" onkeypress="return OverridePostBackOnEnter(event, '<asp:Literal ID="otherControlsClientIDHolder" runat="server" />');" />

然后在服务器端将文字的 text 属性设置为图片按钮的客户端 id....

otherControlsClientIDHolder.Text = ImageButton3.ClientID;

上面詹姆斯希尔的回答比我的要好。它在功能上是一样的，但他的更干净。 +1 詹姆斯希尔的回答

【讨论】：

【解决方案4】：

另一种方法是在页面加载时添加属性服务器端。

tbSearch.Attributes.Add("onkeypress", "return OverridePostBackOnEnter(event, '" + ImageButton3.ClientID + "');");

【讨论】：