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

Pass asp.net ClientId to Javascript Function - inline as a param

提问by Neil Hodges

I have a asp Image Button that needs to be clicked via a Javascript function. The keypress of a textbox should fire this image buttons server side event as well upon hitting the enter key. The code is as follows: -

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

Markup

标记

    <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 & "');" />

I want to pass the ImageButton3 ClientId as a param to a Javascript function called OverridePostBackOnEnter.

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

The Javascript looks like this:

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');
            }
        }
    };

What I'm finding is a) I can't get the correct ClientId to be passed, I just get either undefined or null.

我发现的是 a) 我无法获得正确的 ClientId 传递，我只是得到未定义或空值。

and b) if I hard code and change the ctrl to 'cmain_ctl00_ImageButton3' the __dopostback is not invoking my server-side code for the ImageButton3.

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

Any help on this would be greatly appreciated.

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

Edit

编辑

Ok think I have found a solution for this and thought I should update the post in case anyone needs it.

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

Firstly I have set the 'ClientIdMode' on ImageButton3 to 'Static'

首先，我将 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()"/>

this allows me to pass the id of the button to the function 'OverridePostBackOnEnter'

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

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

Then my Javascript becomes:

然后我的 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, '');
            }
        }
    };

By looking into 'yourForm._EVENTTARGET.value' and 'yourForm._EVENTARGUMENT.value' I could see those values were not being set. By using 'document.getelementId' and passing the 'control.name' sets those values and enables the '__dopostpack' to invoke the serverside event.

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

回答by James Hill

Use the thiskeyword instead. In the context of your input's onkeypressevent, thiswill refer to the input object. Therefore, this.idwill be sufficient. Example below:

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

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

EDIT

编辑

Totally misread your post. Correct answer below:

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

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

回答by James Johnson

Just use this.id:

只需使用this.id：

OverridePostBackOnEnter(event, this.id); 

You could also change the method and just pass in the element itself:

您还可以更改方法并只传入元素本身：

OverridePostBackOnEnter(event, this); 

EDIT

编辑

To pass in the ClientID of the ImageButton, try something like this:

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

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

回答by szeliga

it's hacky, but this would work....

这是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" />');" />

Then on the server side set the text property of the literal to the client id of the image button....

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

otherControlsClientIDHolder.Text = ImageButton3.ClientID;

And James Hill's answer above is better than mine. It is functionally the same thing, but his is cleaner. +1 to James Hill's answer

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

回答by clamchoda

Another way would be to add the attribute server side on page load.

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

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