asp.net中的usercontrol的多個實例

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%>"); 獲取文本框並寫入文本框。

當我的用戶控件只有一個實例時，在aspx頁面中使用UserControl時，它可以正常工作。 但是，當我添加usercontrol的第二個實例時，文本僅寫入文本框的第二個實例。 如果我選中/取消選中用戶控件的第一個實例中的第一個復選框，則仍將文本添加到altest復選框。

有人可以幫我解決這個問題嗎？ 如何獲取復選框的每個insatin，以便可以修改Java腳本？

編輯

添加完整的代碼

<%@ 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函數。 您應該添加一次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調用函數。 為此，我們為用戶每次單擊復選框項時添加一個屬性，而不是整個控件，而是將其放置在后面的代碼中：

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

最后，從您的CheckBoxList中刪除所有javascript事件，因為我們是在后面的代碼中這樣做的：

<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

另一種方法是使javascript函數名稱對於用戶控件的每個實例都是唯一的。 您可以通過將用戶控件客戶端ID附加到函數名稱來實現。

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

調用函數時，請確保還包括客戶端ID。

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

Answer 3

包括您的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 4

嘗試添加類似選擇器的jQuery：$（“ input [id * ='man']”）會找到'bigman'和'littleman'