AjaxControlToolKit环境下用UserControl（C#）模拟的自定义下拉框SELDropDownList

　在上一篇文章《AjaxControlToolkit环境下用Javascript实现简单的Dropdownlist 》里写了关于用javascript写的一个dropdownlist的例子，由于不易于复用和在C#里进行管理，所以后来用UserControl重新封装了一个DropDownList控件，基本模拟Asp.Net原有的DropDownList控件，使得其他用户直接托拽到相应地方即可正常工作。

　　首先还是先看一下截图：
    

    实现过程如下：

 1、Aspx代码部分：
　　用div及textbox等模拟相应的文字框和下拉框，并在Sys.Application.init时创建对应的SELDropDownListBehavior。
      <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SELDropDownList.ascx.cs" Inherits="DropdownlistUserControl.SELDropDownList" %> <mce:script language="javascript"><!-- var <% =this.ClientID %>_Instance = null; Sys.Application.add_init( function(){ <% =this.ClientID %>_Instance = new SELDropDownListBehavior( { // Elements "GlobalContainer" : $get("<%=this.ClientID %>"), "HeaderContainer" : $get("<% = header.ClientID %>"), "HeaderText" : $get("<% = headerText.ClientID %>"), "ArrowImage" : $get("<% = arrowImage.ClientID %>"), "ListBox" : $get("<% = listBox.ClientID %>"), "SelectedIndexField" : $get("<% = hdnSelectedIndex.ClientID %>"), // Properties "ArrowImageUrl" : "<%=ArrowImageUrl%>", "ArrowImageHoverUrl" : "<%=ArrowImageHoverUrl %>", "AutoPostBack" : <%=AutoPostBack.ToString().ToLower() %>, "SelectedIndexChangeClientScript" : "<%=SelectedIndexChangeClientScript%>", "DoPostBackElementID" : "<%=lbtnDoPostBack.ClientID%>", // CSS "ItemCssClass" : "<%= ItemCssClass %>", "ItemHoverCssClass" : "<%= ItemHoverCssClass %>", "ItemAlternateCssClass" : "<%= ItemAlternateCssClass %>", "ItemAlternateHoverCssClass" : "<%= ItemAlternateHoverCssClass %>", "ItemSelectedCssClass" : "<%= ItemSelectedCssClass %>", "ItemSelectedHoverCssClass" : "<%= ItemSelectedHoverCssClass %>" } ); // Set the options and selectedIndex var <% =this.ClientID %>_DropDownList = $get("<% =this.ClientID %>"); <% =this.ClientID %>_DropDownList.options = <%=GetOptionsForClient() %>; <% =this.ClientID %>_DropDownList.selectedIndex = { valueOf : function() { if( <% =this.ClientID %>_Instance ) return <% =this.ClientID %>_Instance.get_selectedIndex(); }, toString : function() { if( <% =this.ClientID %>_Instance ) return <% =this.ClientID %>_Instance.get_selectedIndex(); } }; <% =this.ClientID %>_DropDownList.setSelectedIndex = function( selectedIndex ) { if( <% =this.ClientID %>_Instance ) <% =this.ClientID %>_Instance.set_selectedIndex(selectedIndex); }; } ); // --></mce:script> <div id="<%=this.ClientID %>" style="text-align:left;" > <asp:Panel ID="header" runat="server"> <asp:TextBox ID="headerText" runat="server" ReadOnly="true" CssClass="SELDropDownListHeaderText" /> <asp:Image ID="arrowImage" runat="server" ImageAlign="AbsMiddle" CssClass="SELDropDownListArrowImage" ImageUrl="~/Images/top_choose_your_location_ArrowButton.gif" /> <div style="clear:both;" mce_style="clear:both;"></div> </asp:Panel> <asp:BulletedList ID="listBox" runat="server" CssClass="SELDropDownListListBox" style="display:none;" mce_style="display:none;" /> <asp:HiddenField ID="hdnSelectedIndex" runat="server" Value="-1" /> <asp:LinkButton ID="lbtnDoPostBack" runat="server" Style="display:none;" mce_Style="display:none;" /> </div>

2、C#代码部分：
　　声明了一些属性，并在呈现时做些处理：
     //--------------------------------------------------------------------------------------------------------- // Author : 野文(Jasson Qian) // Date : 2009-5-14 // Description : This is a custom dropdownlist implemented by UserControl in AjaxControlToolkit enviorment // when developing SonySource project. // Blogs : http://qguohog.cnblogs.com // http://blog.csdn.net/sallay //--------------------------------------------------------------------------------------------------------- // Useage: // Under Asp.Net/C#: // 1. It can be used the same as Asp.net DropDownList // 2. Some CssClass can be reset to change the styles // 3. We can set some properties to change the UI of the SELDropDownList // 4. The common.js and style.css should be included in the page that using the SELDropDownList control. // Client Code: // 1. We can use it as normal element. // 2. We can get the element by document.getElementById('<%=UserControlID.ClientID%>'). The properties // like selectedIndex and options are supported. But we can't set the selected index by selectedIndex // property directly, the method setSelectedIndex( index ) may instead of it. //--------------------------------------------------------------------------------------------------------- using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; namespace DropdownlistUserControl { public partial class SELDropDownList : System.Web.UI.UserControl { #region Properties private static readonly object SelectedIndexChangedEventKey = new object(); public event EventHandler SelectedIndexChanged { add { Events.AddHandler(SelectedIndexChangedEventKey, value); } remove { Events.RemoveHandler(SelectedIndexChangedEventKey, value); } } public ListItemCollection Items { get { return listBox.Items; } } public int SelectedIndex { get { return Convert.ToInt32(hdnSelectedIndex.Value); } set { if (value != SelectedIndex) { if (value > -1 && value < Items.Count) { hdnSelectedIndex.Value = value.ToString(); headerText.Text = SelectedItem.Text; } else { hdnSelectedIndex.Value = "-1"; headerText.Text = String.Empty; } } } } public ListItem SelectedItem { get { if (SelectedIndex > -1 && SelectedIndex < Items.Count) return Items[SelectedIndex]; return null; } } public string SelectedValue { get { if (SelectedItem != null) return SelectedItem.Value; return null; } } public string SelectedText { get { if (SelectedItem != null) return SelectedItem.Text; return null; } } public string ArrowImageUrl { get { object obj = ViewState["ArrowImageUrl"]; return obj != null ? obj.ToString() : "Images/top_choose_your_location_ArrowButton.gif"; } set { ViewState["ArrowImageUrl"] = value; arrowImage.ImageUrl = value; } } public string ArrowImageHoverUrl { get { object obj = ViewState["ArrowImageHoverUrl"]; return obj != null ? obj.ToString() : "Images/top_choose_your_location_ArrowButtonRollover.gif"; } set { ViewState["ArrowImageHoverUrl"] = value; } } public string HeaderTextCssClass { get { object obj = ViewState["HeaderTextCssClass"]; return obj != null ? obj.ToString() : null; } set { ViewState["HeaderTextCssClass"] = value; headerText.CssClass = value; } } public string ArrowImageCssClass { get { object obj = ViewState["ArrowImageCssClass"]; return obj != null ? obj.ToString() : null; } set { ViewState["ArrowImageCssClass"] = value; arrowImage.CssClass = value; } } public string ListBoxCssClass { get { object obj = ViewState["ListBoxCssClass"]; return obj != null ? obj.ToString() : null; } set { ViewState["ListBoxCssClass"] = value; listBox.CssClass = value; } } public string ItemCssClass { get { object obj = ViewState["ItemCssClass"]; return obj != null ? obj.ToString() : "SELDropDownListListItem"; } set { ViewState["ItemCssClass"] = value; } } public string ItemHoverCssClass { get { object obj = ViewState["ItemHoverCssClass"]; return obj != null ? obj.ToString() : "SELDropDownListListItemHover"; } set { ViewState["ItemHoverCssClass"] = value; } } public string ItemAlternateCssClass { get { object obj = ViewState["ItemAlternateCssClass"]; return obj != null ? obj.ToString() : "SELDropDownListListItemAlternate"; } set { ViewState["ItemAlternateCssClass"] = value; } } public string ItemAlternateHoverCssClass { get { object obj = ViewState["ItemAlternateHoverCssClass"]; return obj != null ? obj.ToString() : "SELDropDownListListItemAlternateHover"; } set { ViewState["ItemAlternateHoverCssClass"] = value; } } public string ItemSelectedCssClass { get { object obj = ViewState["ItemSelectedCssClass"]; return obj != null ? obj.ToString() : "SELDropDownListListItemSelected"; } set { ViewState["ItemSelectedCssClass"] = value; } } public string ItemSelectedHoverCssClass { get { object obj = ViewState["ItemSelectedHoverCssClass"]; return obj != null ? obj.ToString() : "SELDropDownListListItemSelectedHover"; } set { ViewState["ItemSelectedHoverCssClass"] = value; } } /// <summary> /// Indicate if the control will post back automatically when selected index changed /// </summary> public bool AutoPostBack { get { object obj = ViewState["AutoPostBack"]; return obj != null ? (bool)obj : true; } set { ViewState["AutoPostBack"] = value; } } /// <summary> /// Gets or set the width of the header textbox ( not whole header) /// </summary> public double ? HeaderTextBoxWidth { get { object obj = ViewState["HeaderTextBoxWidth"]; return obj != null ? (double ?)obj : null; } set { ViewState["HeaderTextBoxWidth"] = value; } } /// <summary> /// Gets or set the max height of the drop down listbox (not include the header textbox). /// The listbox will show scrollbar if the max height is reached. /// </summary> public double? DropDownListBoxMaxHeight { get { object obj = ViewState["DropDownListBoxMaxHeight"]; return obj != null ? (double?)obj : null; } set { ViewState["DropDownListBoxMaxHeight"] = value; } } /// <summary> /// Set the color of the borders /// The borders include the header textbox and dropdown listbox except arrow image. /// </summary> public string BorderCorlor { get { object obj = ViewState["BorderCorlor"]; return obj != null ? (string)obj : null; } set { ViewState["BorderCorlor"] = value; } } /// <summary> /// The client javascript codes that will be invoked when selectedIndex changed. /// </summary> public string SelectedIndexChangeClientScript { get { object obj = ViewState["SelectedIndexChangeClientScript"]; return obj != null ? (string)obj : null; } set { ViewState["SelectedIndexChangeClientScript"] = value; } } #endregion protected void Page_Load(object sender, EventArgs e) { // Raise SelectedIndexChange Event if (IsPostBack && Request["__EVENTTARGET"] == lbtnDoPostBack.ClientID) OnSelectedIndexChange(); // Syn header text headerText.Text = SelectedText; // Set width of header text box if (HeaderTextBoxWidth != null) headerText.Style.Add("width", HeaderTextBoxWidth.ToString()+"px"); // Set border color if( BorderCorlor!=null ) { string borderStyle = String.Format("solid 1px {0}",BorderCorlor); headerText.Style.Add("border-left", borderStyle); headerText.Style.Add("border-top", borderStyle); headerText.Style.Add("border-bottom", borderStyle); listBox.Style.Add("border-left", borderStyle); listBox.Style.Add("border-right", borderStyle); listBox.Style.Add("border-bottom", borderStyle); } // Set the max-height of listBox if (DropDownListBoxMaxHeight != null) listBox.Style.Add("max-height",DropDownListBoxMaxHeight.ToString()+"px"); } private void OnSelectedIndexChange() { EventHandler handler = Events[SelectedIndexChangedEventKey] as EventHandler; if (handler != null) handler(this, new EventArgs()); } protected string GetOptionsForClient() { StringBuilder sb = new StringBuilder(); sb.Append("["); foreach (ListItem li in Items) { if (sb.Length > 1) sb.Append(","); sb.Append(String.Format("{​{/"Text/":/"{0}/",/"Value/":/"{1}/"}}", li.Text, li.Value)); } sb.Append("]"); return sb.ToString(); } } }

3、用Javascript实现的SELDropDownListBehavior部分：
　　　javascript主要用来控制各个控件的展现和状态：

     function SELDropDownListBehavior(elements) { // Elements this._globalContainer = null; this._headerContainer = null; this._headerText = null; this._arrowImage = null; this._listBox = null; this._selectedIndexField = null; // Properties this._arrowImageUrl = null; this._arrowImageHoverUrl = null; this._autoPostBack = true; this._selectedIndexChangeClientScript = null; this._doPostBackElementID = null; // CSS this._itemCssClass = null; this._itemHoverCssClass = null; this._itemAlternateCssClass = null; this._itemAlternateHoverCssClass = null; this._itemSelectedCssClass = null; this._itemSelectedHoverCssClass = null; // Inits this.initialize(elements); this.measureSize(); this.regEvents(); } SELDropDownListBehavior.prototype = { initialize: function(elements) { // Elements if (this.isValid(elements.GlobalContainer)) this._globalContainer = elements.GlobalContainer; if (this.isValid(elements.HeaderContainer)) this._headerContainer = elements.HeaderContainer; if (this.isValid(elements.HeaderText)) this._headerText = elements.HeaderText; if (this.isValid(elements.ArrowImage)) this._arrowImage = elements.ArrowImage; if (this.isValid(elements.ListBox)) this._listBox = elements.ListBox; if (this.isValid(elements.SelectedIndexField)) this._selectedIndexField = elements.SelectedIndexField; // Properties if (this.isValid(elements.ArrowImageUrl)) this._arrowImageUrl = elements.ArrowImageUrl; if (this.isValid(elements.ArrowImageHoverUrl)) this._arrowImageHoverUrl = elements.ArrowImageHoverUrl; if (this.isValid(elements.AutoPostBack)) this._autoPostBack = elements.AutoPostBack; if (this.isValid(elements.SelectedIndexChangeClientScript)) this._selectedIndexChangeClientScript = elements.SelectedIndexChangeClientScript; if (this.isValid(elements.DoPostBackElementID)) this._doPostBackElementID = elements.DoPostBackElementID; // CSS if (this.isValid(elements.ItemCssClass)) this._itemCssClass = elements.ItemCssClass; if (this.isValid(elements.ItemHoverCssClass)) this._itemHoverCssClass = elements.ItemHoverCssClass; if (this.isValid(elements.ItemAlternateCssClass)) this._itemAlternateCssClass = elements.ItemAlternateCssClass; if (this.isValid(elements.ItemAlternateHoverCssClass)) this._itemAlternateHoverCssClass = elements.ItemAlternateHoverCssClass; if (this.isValid(elements.ItemSelectedCssClass)) this._itemSelectedCssClass = elements.ItemSelectedCssClass; if (this.isValid(elements.ItemSelectedHoverCssClass)) this._itemSelectedHoverCssClass = elements.ItemSelectedHoverCssClass; }, measureSize: function() { var storeObjs = []; // save elements which will be setted to display='block' from display='none' var curObj = this._globalContainer; while (curObj != null) { if (curObj.style != null && curObj.style.display == "none") { storeObjs[storeObjs.length++] = { "obj": curObj, "display": curObj.style.display, "visibility": curObj.style.visibility }; curObj.style.visibility = "hidden"; curObj.style.display = ""; } curObj = curObj.parentNode; } var headerWidth = this._headerText.offsetWidth + this._arrowImage.offsetWidth; var headerHeight = Math.max(this._headerText.offsetHeight, this._arrowImage.offsetHeight); if (this._listBox != null && headerWidth > 0) this._listBox.style.width = (headerWidth - 2) + "px"; if (this._globalContainer != null && headerWidth > 0) { this._globalContainer.style.width = headerWidth + "px"; this._globalContainer.style.height = headerHeight + "px"; } // restore the style.display and style.visibility for (var i = 0; i < storeObjs.length; i++) { storeObjs[i].obj.style.display = storeObjs[i].display; storeObjs[i].obj.style.visibility = storeObjs[i].visibility; } }, regEvents: function() { // reg events of listItems var listItems = this.get_listItems(); for (var i = 0; i < listItems.length; i++) { var item = listItems[i]; $addHandler(item, "mouseover", this.getItemMouseOverHandler(item)); $addHandler(item, "click", this.getItemClickHandler(item)); } // reg events of header clicking $addHandler(this._headerText, "click", SELDropDownListBehavior.createDelegate(this, this.headerClickHandler)); $addHandler(this._arrowImage, "click", SELDropDownListBehavior.createDelegate(this, this.headerClickHandler)); // reg events of arrowImage $addHandler(this._arrowImage, "mouseover", SELDropDownListBehavior.createDelegate(this, this.arrowImageMouseOverHandler)); $addHandler(this._arrowImage, "mouseout", SELDropDownListBehavior.createDelegate(this, this.arrowImageMouseOutHandler)); // reg events of document.click $addHandler(document, "click", SELDropDownListBehavior.createDelegate(this, this.documentClickHandler)); }, set_selectedIndex: function(selectedIndex) { if (this._selectedIndexField != null) this._selectedIndexField.value = selectedIndex; this._headerText.value = this.get_selectedText(); if (this.isListBoxPopup()) this.showListBox(); }, get_listItems: function() { if (this.isValid(this._listBox)) return this._listBox.getElementsByTagName("li"); return []; }, get_selectedIndex: function() { if (this._selectedIndexField) return this._selectedIndexField.value; return -1; }, get_listItemIndex: function(listItem) { var listItems = this.get_listItems(); for (var i = 0; i < listItems.length; i++) { if (listItem == listItems[i]) return i; } return -1; }, get_selectedListItem: function() { var selectedIndex = this.get_selectedIndex(); var listItems = this.get_listItems(); if (selectedIndex > -1 && selectedIndex < listItems.length) return listItems[selectedIndex]; return null; }, get_selectedText: function() { var selectedItem = this.get_selectedListItem(); if (selectedItem) return selectedItem.innerHTML; return ""; }, isValid: function(el) { return (el != null && typeof (el) != 'undefined' && el.toString() != ""); }, hideListBox: function() { if (this._listBox != null) this._listBox.style.display = "none"; }, showListBox: function() { if (this._listBox != null) this._listBox.style.display = "block"; this.resetAllListItemsCssClass(); // Set selectedItem to MouseOver Class if no ItemSelectedCssClass was setted var selectedListItem = this.get_selectedListItem(); if (selectedListItem && !this._itemSelectedCssClass) { if (this.get_selectedIndex() % 2 == 1 && this._itemAlternateHoverCssClass) selectedListItem.className = this._itemAlternateHoverCssClass; else selectedListItem.className = this._itemAlternateCssClass; } }, isListBoxPopup: function() { if (this._listBox != null) return this._listBox.style.display != "none"; return false; }, resetAllListItemsCssClass: function() { // set class of all item/alternate items var listItems = this.get_listItems(); var selectedIndex = this.get_selectedIndex(); for (var i = 0; i < listItems.length; i++) { var listItem = listItems[i]; if (i == selectedIndex && this._itemSelectedCssClass) listItem.className = this._itemSelectedCssClass; else { if (i % 2 == 1 && this.isValid(this._itemAlternateCssClass)) listItem.className = this._itemAlternateCssClass; else listItem.className = this._itemCssClass; } } }, setListItemMouseOver: function(listItem) { this.resetAllListItemsCssClass(); var index = this.get_listItemIndex(listItem); if (index == this.get_selectedIndex() && this._itemSelectedHoverCssClass != null) listItem.className = this._itemSelectedHoverCssClass; else { if (index % 2 == 1 && this.isValid(this._itemAlternateHoverCssClass)) listItem.className = this._itemAlternateHoverCssClass; else listItem.className = this._itemHoverCssClass; } }, postBack: function() { if (__doPostBack) __doPostBack(this._doPostBackElementID, ""); }, selecteListItem: function(listItem) { var selectedIndex = this.get_listItemIndex(listItem); if (this.get_selectedIndex() != selectedIndex) { this._selectedIndexField.value = selectedIndex; this.resetAllListItemsCssClass(); if (this._itemSelectedHoverCssClass) listItem.className = this._itemSelectedHoverCssClass; this._headerText.value = listItem.innerHTML; if (this.isValid(this._selectedIndexChangeClientScript)) eval(this._selectedIndexChangeClientScript); if (this._autoPostBack) this.postBack(); else this.hideListBox(); } else this.hideListBox(); }, getItemMouseOverHandler: function(listItem) { var ddl = this; return function() { ddl.setListItemMouseOver(listItem); } }, getItemClickHandler: function(listItem) { var ddl = this; return function() { ddl.selecteListItem(listItem); } }, headerClickHandler: function(e) { if (this.isListBoxPopup()) this.hideListBox(); else this.showListBox(); }, arrowImageMouseOverHandler: function() { this._arrowImage.src = this._arrowImageHoverUrl; }, arrowImageMouseOutHandler: function() { this._arrowImage.src = this._arrowImageUrl; }, documentClickHandler: function(e) { e = window.event || e; var srcE = e.srcElement || e.target; while (srcE != null) { if (srcE == this._headerContainer || srcE == this._listBox) return; else srcE = srcE.parentNode; } if (this.isListBoxPopup()) this.hideListBox(); } } SELDropDownListBehavior.createDelegate = function(instance, method) { return function() { return method.apply(instance, arguments); } }

4、调用SELDropDownList
　　调用SELDropDownList首先要求在AjaxControlToolKit环境下，其次要引用对应的js文件来包含SELDropDownListBehavior:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DropdownlistUserControl._Default" %> <%@ Register Assembly="AjaxControlToolkit, Version=3.0.20820.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <%@ Register Src="SELDropDownList.ascx" TagName="SELDropDownList" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" href="Style.css" mce_href="Style.css" type="text/css" /> </head> <body style="background: black" mce_style="background: black"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="MyScriptManager" runat="server"> <Scripts> <asp:ScriptReference Path="~/Common.js" /> </Scripts> </asp:ScriptManager> <uc1:SELDropDownList ID="SELDropDownList1" runat="server" AutoPostBack="true" /> <br /> <div id="secContainer" style="display:none" mce_style="display:none"> <div> <uc1:SELDropDownList ID="SELDropDownList2" runat="server" AutoPostBack="true" SelectedIndexChangeClientScript="t()" DropDownListBoxMaxHeight="100" /> </div> </div> <input type="button" value="Show Sencond" οnclick="document.getElementById('secContainer').style.display='block'" /> </div> </form> </body> </html> <mce:script type="text/javascript"><!-- function t() { var a = document.getElementById("<%=SELDropDownList1.ClientID%>"); a.setSelectedIndex(3); } // --></mce:script>

  当然，这个控件还有很多需要完善和扩展的地方，例如滚动条的样式，背景色等等。通过修改对应的Class可以改变大部分样式，但一般没有必要修改CSS。对应的代码可以在这里下载。