Custom Drop-down box with UserControl (C #) simulation in AjaxControlToolkit Environment (upper)

In the previous article "AjaxControlToolkit environment with JavaScript to achieve a simple DropDownList" wrote about the use of JavaScript written in a DropDownList example, because it is not easy to reuse and in C # management, So later, using UserControl to encapsulate a DropDownList control, the basic simulation asp.net the original DropDownList control, so that other users directly drag to the appropriate place to work properly.

First, let's take a look at the screenshot:

The implementation process is as follows:

1. aspx code section:

Use the div and textbox to simulate the corresponding text boxes and Drop-down boxes, and create the corresponding seldropdownlistbehavior when Sys.Application.init.

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= "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>