c# - Multiple instances of usercontrol in asp.net - Stack Overflow

admin管理员组

文章数量:1394759

I have a user control with a textbox. onclick of a textbox opens a popupcontrolExtender which has few checkboxes on it. When a checkbox is checked it writes the checkbox values to textbox.

Here is my java script which does that:

<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>

In the above js this code var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); gets the textbox and writes to it.

When I use the UserControl in my aspx page its works fine, if there is only one instance of my user control. But when I add the second instance of the usercontrol, the text is written to only the second instance of the text box. If I check/uncheck checkboxes the first in the first instance of user control, still the text is added to the altest check box.

Can some one help me resolving this issuse? How do I get the each insatnce of the check box so that i can modify my java script?

Edit

addding the plete code

<%@ 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 'a'
        }
        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>

I have a user control with a textbox. onclick of a textbox opens a popupcontrolExtender which has few checkboxes on it. When a checkbox is checked it writes the checkbox values to textbox.

Here is my java script which does that:

<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>

In the above js this code var TxtBox = document.getElementById("<%=txtCombo.ClientID%>"); gets the textbox and writes to it.

When I use the UserControl in my aspx page its works fine, if there is only one instance of my user control. But when I add the second instance of the usercontrol, the text is written to only the second instance of the text box. If I check/uncheck checkboxes the first in the first instance of user control, still the text is added to the altest check box.

Can some one help me resolving this issuse? How do I get the each insatnce of the check box so that i can modify my java script?

Edit

addding the plete code

<%@ 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 'a'
        }
        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>

• c#
• javascript
• asp
• ajax

Share Improve this question Follow edited Sep 12, 2013 at 16:18 AMS asked Sep 12, 2013 at 15:50 AMSAMS 55066 silver badges2222 bronze badges 6

• 1 Have you confirmed they are getting different ID's? – Hanlet Escaño Commented Sep 12, 2013 at 15:54
• 1 i have used to developer tools, and saw that they are having the diffrent Id's – AMS Commented Sep 12, 2013 at 15:59
• 1 Right, so maybe you will have to do the getElementsByTagName again. – Hanlet Escaño Commented Sep 12, 2013 at 16:00
• 1 thanks @HanletEscaño, if i use the get element by tag does that make sure it will write to the corresponding user control text box? – AMS Commented Sep 12, 2013 at 16:02
• 1 Not exactly. Lets solve this: chat.stackoverflow./rooms/37269/lets-solve-this – Hanlet Escaño Commented Sep 12, 2013 at 16:04

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

Everytime you have an instance of your UserControl you are also re-adding the javascript function. You should add the javascript function once, so remove it from the UserControl and add it in your main .aspx page, and change it to something like this:

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 ma separate them
    hid.value = arrItems.join(); //ma separated without extra space
}

Now let's call the function from every Checkbox, instead from the CheckBoxList. To do that, we add an attribute to each time user clicks on a checkbox item, instead of the entire control, we place it in the code behind:

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

Finally, remove any javascript events from your CheckBoxList, since we did this in the code behind:

<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>

Another approach to this is to make the javascript function name unique to each instance of the user control. You can do this by appending the user controls client id to the function name.

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

Be sure to also include the client id when calling the function.

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

Including your ASP and full JavaScript would be helpful for me to get a clearer picture of your challenge.. or at least understanding where the CheckItem() call is originating.

With that being said.. I'm making a assumptions with this proposal:

Can you modify the caller of CheckItem() so that it includes the txtCombo.ClientID and hidVal.ClientID? similar to this:

<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 'a'
        }
        var TxtBox = document.getElementById(txtClientId);
    TxtBox.value = s;
    document.getElementById(hidClientId).value = s;
    }

</script>

And your call would be something like:

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

Try adding a jQuery like selector: $( "input[id*='man']" ) will find 'bigman' and 'littleman'

本文标签： cMultiple instances of usercontrol in aspnetStack Overflow