如何将服务器控件的实际客户端 ID 传递给 javascript 函数？答案

【问题标题】：How do I pass a server control's actual client Id to a javascript function?如何将服务器控件的实际客户端 ID 传递给 javascript 函数？
【发布时间】：2016-03-03 21:45:30
【问题描述】：

我的网页中有以下文本框服务器控件：

<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, <%= txtZip.ClientId %>, txtCity, txtState);/">

当页面呈现时，它的构建包括以下内容：

<input name="txtZip" type="text" id="txtZip" onchange="ZipCode_OnChange(this, &lt;%= txtZip.ClientId %>, txtCity, txtState);" />

我正在尝试将文本框的客户端 ID 作为第二个参数传递给这个 Javascript 函数：

function ZipCode_OnChange(txtZipCode, ClientId) {
    var ret;
    ret = WebService.GetCityAndState(txtZipCode.value, OnComplete1, OnError, ClientId);
}

我如何让它在服务器上评估 texbox 的控件并将该文字字符串传递给 Javascript 函数？

【问题讨论】：

标签： asp.net javascript

【解决方案1】：

将<%= txtZip.ClientId %> 放在单引号之间，如下所示：

'<%= txtZip.ClientId %>'


<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, '<%= txtZip.ClientId %>', txtCity, txtState);" />

更新

请查看这篇文章：http://www.jagregory.com/writings/how-to-use-clientids-in-javascript-without-the-ugliness/

我也喜欢this answer

【讨论】：

我之前尝试过，但最终传递给函数的是文字“''”，服务器端 % thingy 中的文本从未被评估过。
我这样做了，但只是渲染了整个东西，没有任何改变。

【解决方案2】：

有很多方法可以解决这个问题，但我发现在一般情况下最简单的做法是使用 ScriptManager 在我的页面顶部包含一个单独的脚本，专门用于添加 ClientID：

void AddClientIDs()
{
    var clientIDs = new StringBuilder();
    var declaration = "var {0}={1};";

    clientIDs.AppendFormat(declaration, "txtZip", txtZip.ClientID);        


    ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientIDs", clientIDs.ToString(), true); 
}

在 PreRender 事件中调用它（在数据绑定之后的某个地方）。然后，如果您想花点心思，您可以轻松地调整该方法以接受 IEnumerable 或 params 控件数组，并让它使用控件名称作为 javascript 变量名称。有时我会这样做，但通常很简单，只需将我需要的内容直接添加到方法中即可。

即使这样也有些尴尬，因为包含在其他命名容器（如网格）中的控件仍然会导致问题。我希望看到 ASP.Net 团队尽快将这样的东西直接构建到框架中，但我并不真正期待它:(

【讨论】：

【解决方案3】：

<asp:TextBox ID="txtZip" runat="server" onchange="ZipCode_OnChange(this, txtCity, txtState);">


function ZipCode_OnChange(element, txtCity, txtState) {
    var ClientId = element.getAttribute('id'),
        ret = null,
        value = element.value;

    ret = WebService.GetCityAndState(value, OnComplete1, OnError, ClientId);
}

【讨论】：

【解决方案4】：

遇到了同样的问题，上面给出的任何方法都无法解决。所以我添加了一个中间 JS，根据传递的值添加了对实际 JS 函数的调用。我知道它是一种蹩脚的方法来解决它，但它仍然对我有用。

之前：

<asp:ListBox ID="List1" runat="server" ondblclick="AddToList2( this,'<%= List2.ClientID %>' );" SelectionMode="Multiple" />

之后

<asp:ListBox ID="List1" runat="server" ondblclick="ProcessList('Add');" SelectionMode="Multiple" />

<script>
function ProcessList(xStr){
 if(xStr == "Add")
  AddToList2( '<%= List1.ClientID %>', '<%= List2.ClientID %>' );
 else
  DeleteFromList2( '<%= List2.ClientID %>' );}
</script>

【讨论】：

【解决方案5】：

您可以在 page_load 方法后面的代码中添加 onchange 事件。

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;
    txtZip.Attributes.Add("onclick", "ZipCode_OnChange(" + txtZip.ClientID + ")");
}

如果您想将多个控件连同它们的 ClientID 一起传递，那么这种方法是不错的选择。

我希望这能解决问题。

【讨论】：

【解决方案6】：

我用<asp:CheckBox...解决了同样的问题

当使用<%= TargetControl.ClientID %>（不带单引号）时，ASP.NET 呈现'&lt;%= TargetControl.ClientID %>'，并且不调用相关的 javascript 函数。

当使用'<%= TargetControl.ClientID %>'（用单引号括起来）时，ASP.NET 不计算表达式并在单引号内呈现完全相同的内容。

所以我决定尝试使用 Input(Checkbox) HTLM 控件，使用以下标记

<input id="CheckBox1" type="checkbox" onclick="myFunction(someValue, '<%= TargetControl.ClientID %>')" />

成功了！！！

希望对你有帮助。

【讨论】：