javascript - ASP.NET多用户控制客户端ID问题

Question

我有一个用户控件，它将 ID 和值的列表加载到复选框列表中，并在提交后将它们保存到数据库中。我的问题是，我在同一页面上多次使用该控件，因此当我提交每个列表并将其保存到数据库时，在保存每个列表时，我只看到来自其中一个控件的相同数据。我对这个问题做了一些研究，但我不明白如何在我的控制中实现任何解决方案。

这是我的代码隐藏。我有 javascript 来处理检查框并显示列表，并且所有内容似乎都按其应有的方式运行。如果有人能指出我正确的方向，我将不胜感激。

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

另外，我有一个标签，用于显示选择的值，这些值在代码隐藏的 javascript 中更改。除了我放置在页面上的第一个用户控件之外，标签不会出现。我假设这是因为它们共享用户控件中的相同 id。

这是我的 ascx 标记:

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

解决了我的问题。

问题不在于用户控件，而在于用户控件的使用。我和我的同事未能使用正确的对象。

我们有 3 个控件，ddcbl ddcbl1 ddcbl2。

我们没有设置每个列表，而是设置了 ddcbl 3 次，所以显然失败了。

干杯