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

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

首先还是先看一下截图：

实现过程如下：

1、Aspx代码部分：

用div及textbox等模拟相应的文字框和下拉框，并在Sys.Application.init时创建对应的 SELDropDownListBehavior。

SELDropDownList.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SELDropDownList.ascx.cs"
    Inherits="DropdownlistUserControl.SELDropDownList" %>

<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）;
            };
        }
    ）;

</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;"></div>
    </asp:Panel>
    <asp:BulletedList ID="listBox" runat="server" CssClass="SELDropDownListListBox" style="display:none;" />

    <asp:HiddenField ID="hdnSelectedIndex" runat="server" Value="-1" />
    <asp:LinkButton ID="lbtnDoPostBack" runat="server" Style="display:none;" />
</div>