Несколько экземпляров usercontrol в asp.net

Question

У меня есть пользовательский элемент управления с текстовым полем. onclick текстового поля открывает popupcontrolExtender, на нем есть несколько флажков. Когда флажок установлен, он записывает значения флажка в текстовое поле.

Вот мой Java-скрипт, который делает это:

<script type = "text/javascript"> 

    function CheckItem(checkBoxList) { 
     var options = checkBoxList.getElementsByTagName('input'); 
     var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label"); 
     var s = ""; 

     for (i = 0; i < options.length; i++) { 
      var opt = options[i]; 
      if (opt.checked) { 
       s = s + "," + arrayOfCheckBoxLabels[i].innerText; 
      } 
     } 
     if (s.length > 0) { 
      s = s.substring(2, s.length); 
     } 
     var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); 
    TxtBox.value = s; 
    document.getElementById('<%=hidVal.ClientID %>').value = s; 
    } 

</script> 

В приведенных выше JS этот код var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); получает текстовое поле и записывает в него.

Когда я использую UserControl на моей странице aspx, он работает нормально, если есть только один экземпляр моего пользовательского элемента управления. Но когда я добавляю второй экземпляр usercontrol, текст записывается только во второй экземпляр текстового поля. Если я установил/снял флажки с первым в первом экземпляре пользовательского элемента управления, все же текст добавляется к флажку altest.

Может ли кто-нибудь помочь мне решить эту проблему? Как я могу получить каждое insatnce этого флажка, чтобы я мог изменить свой java-скрипт?

Редактировать

addding полный код

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiSelectDropDown.ascx.cs" Inherits="MenuTest.MultiSelectDropDown" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 

<script type = "text/javascript"> 

    function CheckItem(checkBoxList) { 
     var options = checkBoxList.getElementsByTagName('input'); 
     var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label"); 
     var s = ""; 

     for (i = 0; i < options.length; i++) { 
      var opt = options[i]; 
      if (opt.checked) { 
       s = s + "," + arrayOfCheckBoxLabels[i].innerText; 
      } 
     } 
     if (s.length > 0) { 
      s = s.substring(2, s.length); //sacar la primer 'coma' 
     } 
     var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); 
    TxtBox.value = s; 
    document.getElementById('<%=hidVal.ClientID %>').value = s; 
    } 

</script> 


<asp:TextBox ID="txtCombo" runat="server" ReadOnly="true" Width="150" Font-Size="X-Small"></asp:TextBox> 
<cc1:PopupControlExtender ID="PopupControlExtender111" runat="server" 
    TargetControlID="txtCombo" PopupControlID="Panel111" Position="Bottom" 
    > 
</cc1:PopupControlExtender> 

<input type="hidden" name="hidVal" id="hidVal" runat="server" /> 

<asp:Panel ID="Panel111" runat="server" ScrollBars="Vertical" Width="150" Height="110" BackColor="AliceBlue" BorderColor="Gray" BorderWidth="1"> 

    <asp:CheckBoxList ID="chkList" 
     runat="server" 
     Height="80" onclick="CheckItem(this)">  
     <asp:ListItem Text="Contains" Value="Contains"/> 
     <asp:ListItem Text="Related" Value="Related"/> 
     <asp:ListItem Text="Exact" Value="Exact"/> 
    </asp:CheckBoxList> 
</asp:Panel> 

Answer 1

Каждый раз, когда у вас есть экземпляр вашего UserControl, вы также повторно добавляете функцию javascript. Вы должны добавить яваскрипт функции только один раз, так что удалить его из UserControl и добавить его в главной странице .aspx, и изменить его на что-то вроде этого:

function CheckItem(chk, txt, hid) { 
    var tbl = chk.parentNode.parentNode.parentNode; //table with checkboxes 

    var options = tbl.getElementsByTagName('input'); //checkboxes 
    var arrItems = new Array(); //array for selected items 

    for (i = 0; i < options.length; i++) { 
     var opt = options[i]; 
     if (opt.checked) { 
      arrItems.push(opt.value); //if checked, push it in array 
     } 
    } 

    txt.value = arrItems.join(", "); //use join to comma separate them 
    hid.value = arrItems.join(); //comma separated without extra space 
} 

Теперь давайте назовем функцию от каждого Checkbox, а не от CheckBoxList. Чтобы сделать это, мы добавим атрибут каждый момент времени пользователь нажимает на элемент CheckBox, а весь контроль, мы помещаем его в код:

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) 
    { 
     foreach (ListItem li in this.chkList.Items) 
     { 
      li.Attributes.Add("onclick", "CheckItem(this, document.getElementById('" + txtCombo.ClientID + "'), document.getElementById('" + hidVal.ClientID + "'))"); 
     } 
    } 
} 

Наконец, удалите JavaScript события из вашего CheckBoxList, так мы сделали это в коде позади:

<asp:CheckBoxList ID="chkList" runat="server" Height="80"> 
    <asp:ListItem Text="Contains" Value="Contains" /> 
    <asp:ListItem Text="Related" Value="Related" /> 
    <asp:ListItem Text="Exact" Value="Exact" /> 
</asp:CheckBoxList> 

Answer 2

Включая вашего ASP и полное JavaScript будет полезно для меня, чтобы получить более четкое представление о вашей возможности .. или по крайней мере, понять, где CheckItem() возникает.

С этим сказанным .. Я делаю предположение с этим предложением:

Вы можете изменить абонент о CheckItem(), так что она включает в себя txtCombo.ClientID и hidVal.ClientID? похожее на это:

<script type = "text/javascript"> 

    function CheckItem(checkBoxList, txtClientId, hidClientId) { 
     var options = checkBoxList.getElementsByTagName('input'); 
     var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label"); 
     var s = ""; 

     for (i = 0; i < options.length; i++) { 
      var opt = options[i]; 
      if (opt.checked) { 
       s = s + "," + arrayOfCheckBoxLabels[i].innerText; 
      } 
     } 
     if (s.length > 0) { 
      s = s.substring(2, s.length); //sacar la primer 'coma' 
     } 
     var TxtBox = document.getElementById(txtClientId); 
    TxtBox.value = s; 
    document.getElementById(hidClientId).value = s; 
    } 

</script> 

и ваш звонок будет что-то вроде:

CheckItem(checkBoxList, '<%=txtCombo.ClientID%>', '<%=hidVal.ClientID %>'); 

Answer 3

Попробуйте добавить JQuery как селектор: $ ("входной [ID = 'человек']") найдет " bigman 'и' littleman '

Answer 4

Другой подход к этому, чтобы сделать имя Javascript функции, уникальные для каждого экземпляра пользовательского элемента управления. Вы можете сделать это, добавив идентификатор клиента для пользователя в имя функции.

function CheckItem<%=ClientID %>(checkBoxList) { 

Обязательно также включать идентификатор клиента при вызове функции.

Height="80" onclick="CheckItem<%=ClientID %>(this)">