使用 Javascript 的多个用户控件

【问题标题】：Multiple User Controls with Javascript使用 Javascript 的多个用户控件
【发布时间】：2009-07-09 20:42:56
【问题描述】：

我试图用一个组合框和一个时钟的小图像来模拟一个简单的 timepick 用户控件。在用户控件中，我输入代码：

function SetFocus() {
    var comboBox = $find("<%=cboTime.ClientID %>");
    var input = comboBox.get_inputDomElement();
    input.focus();      }

cboTime 是组合框控件，后面有一个小时钟的图像我把图片的点击事件绑定到这个函数上

如果我的页面上有一个用户控件，一切都很好......

如果我添加另一个名称不同的用户控件，则无论我单击哪个图像，最后一个组合框都会获得焦点。

我知道发生了什么...我只需要一个解决方法。呈现页面时，它使用组合框的客户端 ID 创建两个相同的脚本。问题是，所有前面的实例都会覆盖前一个实例，因为它们的名称相同。

有人有解决办法吗？它必须很简单，但我无法在任何地方找到答案。

谢谢

【问题讨论】：

【解决方案1】：

您需要更改SetFocus() 方法，使其将组合框的客户端ID 作为参数：

function SetFocus(cboClientId) {
  var comboBox = $find(cboClientId);
  var input = comboBox.get_inputDomElement();
  input.focus();
}

这意味着，您必须更改调用SetFocus() 方法的代码。如果我理解正确，这是在图像上的客户端单击事件处理程序中完成的。在这种情况下，您可以在后面的控件代码中设置图像的onclick="..." 部分。例如。像这样的东西（未测试）：

ASCX：

<asp:DropDownList id="cboTime" .../>
<asp:Image id="img" .../>

代码隐藏：

img.Attributes.Add("onclick",
  string.Format("javascript:SetFocus('{0}');", cboTime.ClientID));

然后你可以把SetFocus()方法放到一个外部的JS文件中（并包含在你的ASCX中）。

【讨论】：