asp.net多用户控制客户端id问题
本文关键字:id 问题 客户端 多用户控制 net asp | 更新日期: 2023-09-27 18:29:20
我有一个用户控件,它将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,所以很明显它失败了。
干杯