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

asp.net multiple user control client id issue

本文关键字:id 问题 客户端 多用户控制 net asp      更新时间:2023-09-26

我有一个用户控件,它将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;
}
}

此外,我有一个标签,用于显示选择了哪些值,这些值在codeehind的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>

解决了我的问题。

问题不在于用户控件,而在于用户控件的使用。我和我的同事没有使用正确的物体。

我们有3个对照,ddcbl-ddcbl1 ddcbl2。

我们没有设置每个列表,而是设置了3次ddcbl,所以很明显它失败了。

干杯