ASP.Net：用户控件的代码后台中ClientID不正确

Question

以下代码无法正常工作。标记在用户控件中，我想这就是为什么ClientID为TextBox id返回错误的前缀。

标记：

<INPUT id="txtName" runat="server" maxlength="50" style="WIDTH:100px">
<INPUT type="button" value="Find Your Doctor" id="btnFind" runat="server"
      style="MARGIN-LEFT:10px;WIDTH:130px">

代码后台：

btnFind.Attributes.Add("onClick",string.Format("DoctorLink
        ('{0}',document.getElementById('{1}').value,{2});",
        row["ZipCode"],
        txtName.ClientID));

浏览器中的结果：

<input name="DoctorsMainArea1$ctl01$txtName" type="text"
   id="DoctorsMainArea1_ctl01_txtName" maxlength="50" style="WIDTH:100px" />

<input name="DoctorsMainArea1$ctl01$btnFind" type="button" 
   id="DoctorsMainArea1_ctl01_btnFind" value="Find Your Doctor" style="MARGIN-
   LEFT:10px;WIDTH:130px" onClick="PrepareDoctorLink('90210',
   document.getElementById('DoctorsMainArea1_ctl00_txtName').value);" />

如您所见，JavaScript调用的参数为DoctorsMainArea1_ctl00_txtName，但实际输入元素的ID为DoctorsMainArea1_ctl01_txtName。

有什么办法可以解决这个问题吗？jQuery？我不太关心发生了什么（也许页面上有另一个控件干扰了），但希望能找到更健壮的解决方法。

- cdonner

---

为什么在获取相同控件的onclick事件时需要使用document.getElementById？你不能只使用“this”吗（它将返回输入框）。然后，您甚至不需要尝试计算id，也不需要runat =“server”。 - RPM1984

按钮的onclick处理程序是在服务器端组合的，因为我需要邮政编码和其他参数，而我删除了这些参数以使代码更易于阅读。 - cdonner

你在读取ClientID之后改变控件树了吗？ - sisve

可能。ClientId在Page_Init()事件中被读取。这个应用程序中有很多事情，我无法确定地回答这个问题。 - cdonner

Answer 1

我不知道您正在使用哪个版本的asp.net，但在4.0版本中，您可以在任何服务器控件内部声明 ClientIDMode="static"，这将为您提供浏览器中的确切ID。

例如：

<asp:Textbox id="txtName" runat="server" ClientIdMode="static"/>

其他的是可预测的，可以继承，并且可以与ClientIdRowsuffix一起使用。可以在页面级别甚至在母版页和web.config文件中使用。

web.config文件的示例：

<system.web>
<Pages clientIDMode="predictable"/>
other system web properties
</system.web>

我在tekpub上观看了Craig shoemaker的视频，你也可以在Rick的博客中阅读更多信息链接文本。它非常酷。

- Developer

Answer 2

您应该尝试将添加onclick属性的代码移动到页面或用户控件中的PreRender事件（或OnPreRender覆盖）中。这样可能会正确获取ClientID。

- VinayC

---

它在Page_Init事件中。我们将其移动到页面加载事件中，现在它可以正常工作了。 - cdonner

Answer 3

一个快速的解决方案：

btnFind.Attributes.Add("onClick",string.Format("DoctorLink
        ('{0}',document.getElementById('{1}').value,{2});",
        row["ZipCode"],
        "DoctorsMainArea1_ctl01_" + txtName.ClientID));

这是因为你的页面中某处有一个内容占位符。

- Leniel Maccaferri

---

快速可能性很高，但不是非常健壮 :-) - cdonner

不够健壮，你说得对。如果你使用的是ASP.NET 4，你将会拥有更好的客户端ID支持。事情变得更好了。谢天谢地！ - Leniel Maccaferri

Answer 4

另一种解决方案： HTML 标签：

<input type="text" name="txtName" id="txtName" />

代码绑定：

string txtName_value = Request.Forms["txtName"];

你可以获取到这个值

只需要使用HTML控件即可。

- Tim Li

---

请勿在页面中使用重复的名称，否则它将变成一个类似于“value1，value2”的字符串。 - Tim Li

就像我说的那样，这是一个用户控件，你的解决方案对于在同一页上有多个控件实例的情况并不适用。由于在这种情况下不会超过一个实例，并且如果没有更好的解决方案出现，我可能仍然会使用你的建议（直到下一次它破坏页面）。我仍然相信可以用jQuery更优雅地完成这个任务。 - cdonner