ASP.NET 多选下拉列表，带有 AJAX 悬停菜单扩展器
4.57/5 (14投票s)
一篇关于如何构建一个带有 AJAX 悬停菜单扩展器的多选下拉列表的文章。
更新于 2017年01月02日
在此版本中，我添加了根据成员请求选择所有和取消选择所有项目的功能。与往常一样，您可以点击演示链接来查看控件的运行情况并下载源代码。欢迎发表评论。
引言
最近，我正在为我的新项目寻找一个多选下拉列表控件。经过一段时间的研究，我决定将我所有的发现放在一个 Web 用户控件中。这个 Web 用户控件由 ASP.NET AJAX HoverMenuExtender、JavaScript、样式表和一个 CheckBoxListExCtrl 组成。最终产品可以与母版页一起使用或不一起使用，并且您可以将控件的多个实例拖放到页面上。这不是一个完美的控件，您可以随意修改它以满足您的需求，并分享您的想法。以下是关于我是如何完成此操作的逐步教程。希望本教程能给人们一个关于如何使用 ASP.NET AJAX HoverMenuExtender 并创建一个多选下拉列表的想法。
在我们开始之前，这是我的项目结构
Using the Code
这是一个用户控件，只需拖放即可。但请确保包含 ScriptManager。
该项目包括
- Default.aspx - 此页面不使用母版页或用户控件。
- MS_With_UserControl.aspx - 此页面使用用户控件的多个实例，并且不使用母版页。
- MS_With_UserControl_and_Masterpage.aspx - 此页面使用用户控件的多个实例，并且使用母版页。
CheckBoxListExCtrl- 如何使用 JavaScript 获取 CheckBoxList 值？- 其余文件都相当容易理解。
CheckBoxListExCtrl
代码几乎相同，只是我做了一些更改以返回所选复选框的文本。请参阅注释。
//09042009 BT - var
string clientID = UniqueID + this.ClientIDSeparator +
repeatIndex.ToString(NumberFormatInfo.InvariantInfo);
writer.WriteBeginTag("input");
writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("name", UniqueID + this.IdSeparator +
repeatIndex.ToString(NumberFormatInfo.InvariantInfo));
writer.WriteAttribute("id", clientID);
writer.WriteAttribute("value", Items[repeatIndex].Value);
if (Items[repeatIndex].Selected)
writer.WriteAttribute("checked", "checked");
System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;
foreach (string key in attrs.Keys)
{
writer.WriteAttribute(key, attrs[key]);
}
writer.Write("/>"); //09042009 BT - close the input tag
//09042009 BT - added label to hold the checkbox text
writer.Write("<label for="" + clientID + "">");
writer.Write(Items[repeatIndex].Text); //text
writer.Write("</label>"); //close label tag
MultipleSelectionDDLJS.js
这是 JavaScript 的内容，请阅读注释
/*detect the browser version and name*/
var Browser = {
Version: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1)
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
return version;
}
}
function showIE6Tooltip(e){
//we only want this to execute if ie6
if (navigator.appName=='Microsoft Internet Explorer' &&
Browser.Version() == 6) {
if(!e){var e = window.event;}
var obj = e.srcElement;
tempX = event.clientX + (document.documentElement.scrollLeft
|| document.body.scrollLeft);
tempY = event.clientY + (document.documentElement.scrollTop
|| document.body.scrollTop);
var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = obj.options.title; //set the title to the div
//display the tooltip based on the mouse location
tooltip.style.left = tempX;
tooltip.style.top = tempY+10;
tooltip.style.width = '100%';
tooltip.style.display = 'block';
}
}
function hideIE6Tooltip(e){
//we only want this to execute if ie6
if (navigator.appName=='Microsoft Internet Explorer' &&
Browser.Version() == 6) {
var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = '';
tooltip.style.display = 'none';
}
}
/* get and set the selected checkbox value and
text and selected index to a hidden field */
function getCheckBoxListItemsChecked(elementId) {
//var
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
var checkedText = '';
var checkedSelIndex = '';
var myCheckBox = new Array();
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
//selected index
if (checkedSelIndex.length > 0)
checkedSelIndex += ', ';
checkedSelIndex +=i;
//value
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += checkBoxRef.value;
//text
var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedText.length > 0)
checkedText += ', ';
checkedText += labelArray[0].innerHTML;
}
}
}
myCheckBox[0] = checkedText;
myCheckBox[1] = checkedValues;
myCheckBox[2] = checkedSelIndex;
return myCheckBox;
}
function readCheckBoxList(chkBox, ddlList, hiddenFieldText,
hiddenFieldValue, hiddenFieldSelIndex) {
var checkedItems = getCheckBoxListItemsChecked(chkBox);
$get(ddlList).options[0].innerHTML = checkedItems[1]; //set the dropdownlist value
$get(ddlList).title = checkedItems[0]; //set the title for the dropdownlist
//set hiddenfield value
$get(hiddenFieldValue).value = checkedItems[1];
$get(hiddenFieldText).value = checkedItems[0];
$get(hiddenFieldSelIndex).value = checkedItems[2];
}
MultipleSelection.ascx
在此页面中，我有一个 HoverMenuExtender、DropDownList、CheckBoxListExCtrl、一些隐藏字段和一个 div 用于显示 IE 6.0 的工具提示信息。并且，我向我的复选框列表添加了一些虚拟数据，这样当我将它拖到页面上时它就不会看起来是空的。
<div>
<cc2:HoverMenuExtender ID="HoverMenuExtender1"
runat="server"
TargetControlID="MultiSelectDDL"
PopupControlID="PanelPopUp"
PopupPosition="bottom"
OffsetX="6"
PopDelay="25" HoverCssClass="popupHover">
</cc2:HoverMenuExtender>
<asp:DropDownList ID="MultiSelectDDL"
CssClass="ddlMenu regularText"
runat="server">
<asp:ListItem Value="all">Select
</asp:DropDownList>
<asp:Panel ID="PanelPopUp"
CssClass="popupMenu" runat="server">
<cc1:CheckBoxListExCtrl ID="CheckBoxListExCtrl1"
CssClass="regularText" runat="server">
<asp:ListItem Value="d1">Dummy 1
<asp:ListItem Value="d2">Dummy 2
<asp:ListItem Value="d3">Dummy 3
<asp:ListItem Value="d4">Dummy 4
<asp:ListItem Value="d5">Dummy 5
<asp:ListItem Value="d6">Dummy 6
<asp:ListItem Value="d7">Dummy 7
<asp:ListItem Value="d8">Dummy 8
</cc1:CheckBoxListExCtrl>
</asp:Panel>
<asp:HiddenField ID="hf_checkBoxValue" runat="server" />
<asp:HiddenField ID="hf_checkBoxText" runat="server" />
<asp:HiddenField ID="hf_checkBoxSelIndex" runat="server" />
</div>
<div id="ie6SelectTooltip"
style="display:none;position:absolute;padding:1px;border:1px
solid #333333;;background-color:#fffedf;font-size:smaller;z-index: 99;">
</div>
MS_With_UserControl_and_Masterpage.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label ID="Label1" CssClass="regularText"
runat="server" Text="Month:" />
<uc1:MultipleSelection ID="MultipleSelection1" runat="server" />
MS_With_UserControl_and_Masterpage.aspx.cs - 如何绑定数据
DataTable dt = new DataTable();
DataColumn dcValue = new DataColumn("Value", typeof(string));
DataColumn dcText = new DataColumn("Text", typeof(string));
dt.Columns.Add(dcText);
dt.Columns.Add(dcValue);
DataRow dr;
dr = dt.NewRow();
dr["Text"] = "January";
dr["Value"] = "m1";
dt.Rows.Add(dr);
…
//datasource, dataTextField, dataValueField
MultipleSelection1.CreateCheckBox(dt, "Text", "Value");
如何设置所选值
MultipleSelection1.selectedIndex = "1,5,7";
如何获取 SelectedIndex、SelectedValue、SelectedText
MultipleSelection1.sText
MultipleSelection1.sValue
MultipleSelection1.selectedIndex
关注点
由于某种原因，我没有动态加载 ScriptManager。因此，在使用用户控件之前，请确保在页面上包含一个 ScriptManager，否则您会遇到此错误消息：“ID 为 'HoverMenuExtender1' 的控件需要在页面上有一个 ScriptManager。ScriptManager 必须出现在任何需要它的控件之前。”
“无效的回发或回调参数。已启用使用…的事件验证”。最初，我试图通过 JavaScript 修改下拉列表的值，并且每次我点击“提交”按钮时都会收到该错误。最简单的解决方案是在页面指令上设置 EnableEventValidation = false，但我找到了另一种使用**隐藏字段**的解决方法。
工具提示（标题）在 IE 7.0、8.0、Firefox 和 Google Chrome 中显示正确，但在 IE 6.0 中没有显示。为了解决这个问题，我包含了一个单独的函数来显示和隐藏工具提示。
我正在使用一个复选框列表控件，并且难以使用 JavaScript 获取复选框列表值**和**文本。经过一些研究，我偶然发现了 Trilochan Nayak 的一个类库。我修改了他的类，以便可以通过 JavaScript 检索所选复选框的值和文本。