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主要用来控制各个控件的展现和状态：
4、调用SELDropDownList
调用SELDropDownList首先要求在AjaxControlToolKit环境下，其次要引用对应的js文件来包含SELDropDownListBehavior:
当然，这个控件还有很多需要完善和扩展的地方，例如滚动条的样式，背景色等等。通过修改对应的Class可以改变大部分样式，但一般没有必要修改CSS。对应的代码可以在这里下载。