asp.net多用户控制客户端ID问题

Question

I have a user control that loads a list of id's and values into a checkbox list and upon submission they are saved to the database. My issue is that I am using the control multiple times on the same page so when I go to submit and save each of the lists to the database I am seeing the same data from just one of the controls when saving each list. I have done some research on this issue but I am not understanding how to implement any solution into my control.

Here is my codebehind. I have javascript that handles checking the boxes and displaying the list and that all appears to be functioning as it should. If anybody can point me in the right direction that would be greatly appreciated.

public partial class DropDownCheckBoxList : System.Web.UI.UserControl
{

/// <summary>
/// Value to set to the label describing the listbox
/// </summary>
public string ListName
{
    get
    {
        return (string)ViewState["listname"];
    }
    set
    {
        ViewState["listname"] = value;
    }
}

/// <summary>
/// Page load events
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.lblListName.Text = ListName;
    }
}

/// <summary>
/// Build the checkboxlist
/// </summary>
/// <param name="dtListItem">Data for all items in the list</param>
public void BuildCheckList(DataTable dtListItem)
{
    //ddlChkList.Items.Insert(0, new ListItem());
    int rowNo = dtListItem.Rows.Count;
    string lstValue = string.Empty;
    string lstID = string.Empty;
    ListItem lstItem = new ListItem();
    for (int i = 0; i < rowNo; i++)
    {
        lstValue = dtListItem.Rows[i]["Value"].ToString();
        lstID = dtListItem.Rows[i]["ID"].ToString();
        lstItem = new ListItem("<span class=\"ddcblitem\"><a href=\"javascript:void(0)\" id=\"alst\" style=\"text-decoration:none;color:Black; \" onclick=\"getSelectedItem(' " + lstValue + "','" + i + "','" + lstID + "','anchor');\">" + lstValue + "</a></span>", lstID);
        lstItem.Attributes.Add("onclick", "getSelectedItem('" + lstValue + "','" + i + "','" + lstID + "','listItem');");
        this.chkLstItem.Items.Add(lstItem);
    }
    this.divChkList.Style.Add("border", "black 1px solid");
    this.divChkList.Style.Add("width", "155px");
    this.divChkList.Style.Add("height", "auto");
    this.divChkList.Style.Add("overflow", "AUTO");
    this.divChkList.Style.Add("display", "none");
}

/// <summary>
/// Set the checkboxes in the list
/// </summary>
/// <param name="list">ID's of checked items</param>
public void setMultiList(List<int> list)
{
    foreach (ListItem li in this.chkLstItem.Items)
        foreach (int selected in list)
            if (li.Value == selected.ToString())
                li.Selected = true;
}

/// <summary>
/// Return values of checked boxes
/// </summary>
/// <returns>Checked ID values</returns>
public List<int> build_id_list()
{
    List<int> lstIds = new List<int>();
    foreach (ListItem li in this.chkLstItem.Items)
        if (li.Selected)
            lstIds.Add(Convert.ToInt32(li.Value));
    return lstIds;
}
}

Also, I have a label that is used to display what values are selected which is changed in the javascript in the codebehind. The label does not appear except for the first user control that I place on the page. I'm assuming this is because they share the same id from the user control.

Here is my ascx markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DropDownCheckBoxList.ascx.cs" Inherits="DropDownCheckBoxList" %>

<table>
    <tr>
    <td>
        <asp:Label ID="lblListName" Text="List Name" CssClass="wideLabel" runat="server" />
    </td>
    <td>
        <table class="ddcbl" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <asp:Label ID="lblChkList" Text="Click to Select..." BorderWidth="1px" BorderStyle="Solid" BackColor="White" onmousedown="showdivonClick(this)" Width="155px" runat="server" />
                    <%--<asp:DropDownList ID="ddlChkList" runat="server" onmousedown="showdivonClick()" Width="155">
                    </asp:DropDownList>--%>
                    <div id="divChkList" class="divchkList" runat="server">
                        <asp:CheckBoxList ID="chkLstItem" runat="server" onmousedown="showdiv(this)">
                        </asp:CheckBoxList>
                    </div>
                </td>
            </tr>
        </table>
        <asp:HiddenField ID="hidList" runat="server" />
    </td>
    </tr>
</table>
<asp:Label ID="lblSelectedItem" runat="server"></asp:Label>

<script language="javascript" type="text/javascript">
    function showdiv(obj) {
    obj.style.display = "block";
    }
    function showdivonClick(obj) {
    var objDLL = obj.parentNode.getElementsByClassName('divchkList')[0];
    if (objDLL.style.display == "block")
        objDLL.style.display = "none";
    else
        objDLL.style.display = "block";
    }
    function getSelectedItem(lstValue, lstNo, lstID, ctrlType) {
    var arr = document.getElementById('<%=chkLstItem.ClientID %>').getElementsByTagName('input');
    var objLstId = document.getElementById('<%=hidList.ClientID %>');
    for (i = 0; i < arr.length; i++) {
        checkbox = arr[i];
        if (i == lstNo)
            if (ctrlType == 'anchor')
                if (!checkbox.checked)
                    checkbox.checked = true;
                else
                    checkbox.checked = false;
    }
    setSelected();
    }

    document.onclick = check;
    function check(e) {
    var target = (e && e.target) || (event && event.srcElement);
    var obj = document.getElementById('<%=divChkList.ClientID %>');
    var obj1 = document.getElementById('<%=lblChkList.ClientID %>');
    if (obj == null) { return; }
    if (target.id != "alst" && !target.id.match('<%=chkLstItem.ClientID %>')) {
        if (!(target == obj || target == obj1)) {
            obj.style.display = 'none'
        }
        else if (target == obj || target == obj1) {
            if (obj.style.display == 'block') {
                obj.style.display = 'block';
            }
            else {
                obj.style.display = 'none';
                document.getElementById('<%=lblChkList.ClientID %>').blur();
            }
        }
    }
    }

    $('<%=hidList %>').ready(function () {
    setSelected();
    });

    function setSelected() {
    var lblSelected = document.getElementById('<%=lblSelectedItem.ClientID %>');
    var ddl = document.getElementById('<%=lblChkList.ClientID %>');
    var count = 0;
    var selected_text = 'none';
    if (document.getElementById('<%=chkLstItem.ClientID %>') != null) {
        var items = document.getElementById('<%=chkLstItem.ClientID %>').getElementsByTagName('input');
        var labels = document.getElementById('<%=chkLstItem.ClientID %>').getElementsByTagName('label');
        for (var i = 0; i < items.length; i++) {
            if (items[i].checked) {
                count = count + 1;
                if (count == 1)
                    selected_text = labels[i].innerText;
                else if (count < 4)
                    selected_text = selected_text + ', ' + labels[i].innerText;
            }
        }
        if (count >= 4)
            selected_text = selected_text + ', ...';
        lblSelected.innerText = 'Selected: ' + selected_text;
        if (count == 0)
            ddl.innerText = ' Click to Select...';
        else
            ddl.innerText = '  ' + count + ' selected';
        //ddl.options[ddl.selectedIndex].text = count + ' selected';
        document.getElementById('<%=hidList.ClientID %>').value = count + ' Items';
    }
    }
</script>

Answer 1

Resolved my issue.

The problem was not in the usercontrol but in the use of the usercontrol. My colleague and I failed to use the proper object.

We had 3 controls, ddcbl ddcbl1 ddcbl2.

Instead of setting each list, we had been setting ddcbl 3 times so obviously it failed.

Cheers