轻松Ajax.net实例教程7_DropDownExtender(按AjaxControlToolkit字母排序)
2008-06-12 14:24
495 查看
原文:http://www.falaosao.net/article.asp?id=168
本章主要介绍DropDownExtender的使用方法。以前要做一个带DropDownList的TextBox控件可是大费周章,脚本代码一大堆,而且还要兼顾和后台的交互,否则只能做静态的DropDownList。但现在有了DropDownExtender,一切烦恼迎刃而解。
第一步:建立Ajax Control Toolkit Website
本例子需要一个TextBox控件、N个LinkButton控件、一个DropDownExtender组件和一个UpdatePanel组件。把所有组件拖进设计界面后代码如下所示:
[align=left]<asp:UpdatePanel ID="UpdatePanel1" runat="server">[/align]
[align=left] <ContentTemplate>[/align]
[align=left] <asp:TextBox ID="TextBox1" Text="请选择项" runat="server"></asp:TextBox>[/align]
[align=left] <asp:Panel CssClass="ContainPanel" ID="Panel1" runat="server" Height="50px" Width="125px"[/align]
[align=left] Style="visibility: hidden">[/align]
[align=left] <asp:LinkButton ID="LinkButton1" CssClass="link" runat="server" OnClick="OnSelect">选项一</asp:LinkButton><br />[/align]
[align=left] <asp:LinkButton ID="LinkButton2" CssClass="link" runat="server" OnClick="OnSelect">选项二</asp:LinkButton><br />[/align]
[align=left] <asp:LinkButton ID="LinkButton3" CssClass="link" runat="server" OnClick="OnSelect">选项三</asp:LinkButton><br />[/align]
[align=left] <asp:LinkButton ID="LinkButton4" CssClass="link" runat="server" OnClick="OnSelect">选项四</asp:LinkButton>[/align]
[align=left] </asp:Panel>[/align]
[align=left] <ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"[/align]
[align=left] DropDownControlID="Panel1">[/align]
[align=left] </ajaxToolkit:DropDownExtender>[/align]
[align=left] </ContentTemplate>[/align]
[align=left] <Triggers>[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton4" EventName="Click" />[/align]
[align=left] </Triggers>[/align]
</asp:UpdatePanel>
注意:以上代码有几个要点,第一、所有组件都要放在UpdatePanel的ContentTemplate里,这样做才能在TextBox1中显示所选择的值。如果大家不需要在TextBox1中显示选择的值,那么UpdatePanel中只需要放显示值的控件即可,TextBox1、Panel1和DropDownExtender都可以放在UpdatePanel外面。第二、Panel1一定要加Style="Visibility:hidden",否则在Ajax.net脚本库完全加载完毕之前,Panel1会显示出来,产生闪烁的不良效果。
以下是CSS样式代码,大家参考一下:
[align=left].ContainPanel[/align]
[align=left]{[/align]
[align=left] background:#ffcc00;[/align]
[align=left] font-size:12px;[/align]
[align=left] padding:3px;[/align]
[align=left] border:solid 1px #666;[/align]
[align=left] line-height:150%;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].link[/align]
[align=left]{[/align]
[align=left] color:#666;[/align]
[align=left] font-size:12px;[/align]
}
第二步:设置DropDownExtender
DropDownExtender的设置非常简单,就两个属性,代码如下所示:
[align=left]<ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1" DropDownControlID="Panel1"> </ajaxToolkit:DropDownExtender>[/align]
TargetControlID是指激活下拉菜单的控件ID,这里是TextBox1。DropDownControlID是指下拉菜单载体的控件ID,这里是Panel1。
第三步:编写后台代码
大家发现前面的LinkButton点击后都会执行一个叫OnSelect的函数,现在我们转到CS文件编写这个函数,代码很简单,如下所示:
[align=left]protected void OnSelect(object sender, EventArgs e)[/align]
[align=left]{[/align]
[align=left] TextBox1.Text = ((LinkButton)sender).Text;[/align]
}
该函数的意思是在TextBox1显示所选择的值。
OK,运行,效果如下图:
![](http://www.falaosao.net/attachments/All_Files/s2007815112810.jpg)
一般状态中TextBox1只是一个平凡的TextBox。
![](http://www.falaosao.net/attachments/All_Files/z2007815112932.jpg)
当用鼠标点击时,下拉菜单出现了。
![](http://www.falaosao.net/attachments/All_Files/52007815113022.jpg)
选择完后菜单消失,所选择的值显示在TextBox1中。
结束:
本章主要介绍了DropDownExtender的使用方法。有了DropDownExtender,我们可以把DropDownList整合到很多控件上面,包括TextBox、Label、Panel等,大家可以自己试验一下。
本章主要介绍DropDownExtender的使用方法。以前要做一个带DropDownList的TextBox控件可是大费周章,脚本代码一大堆,而且还要兼顾和后台的交互,否则只能做静态的DropDownList。但现在有了DropDownExtender,一切烦恼迎刃而解。
第一步:建立Ajax Control Toolkit Website
本例子需要一个TextBox控件、N个LinkButton控件、一个DropDownExtender组件和一个UpdatePanel组件。把所有组件拖进设计界面后代码如下所示:
[align=left]<asp:UpdatePanel ID="UpdatePanel1" runat="server">[/align]
[align=left] <ContentTemplate>[/align]
[align=left] <asp:TextBox ID="TextBox1" Text="请选择项" runat="server"></asp:TextBox>[/align]
[align=left] <asp:Panel CssClass="ContainPanel" ID="Panel1" runat="server" Height="50px" Width="125px"[/align]
[align=left] Style="visibility: hidden">[/align]
[align=left] <asp:LinkButton ID="LinkButton1" CssClass="link" runat="server" OnClick="OnSelect">选项一</asp:LinkButton><br />[/align]
[align=left] <asp:LinkButton ID="LinkButton2" CssClass="link" runat="server" OnClick="OnSelect">选项二</asp:LinkButton><br />[/align]
[align=left] <asp:LinkButton ID="LinkButton3" CssClass="link" runat="server" OnClick="OnSelect">选项三</asp:LinkButton><br />[/align]
[align=left] <asp:LinkButton ID="LinkButton4" CssClass="link" runat="server" OnClick="OnSelect">选项四</asp:LinkButton>[/align]
[align=left] </asp:Panel>[/align]
[align=left] <ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"[/align]
[align=left] DropDownControlID="Panel1">[/align]
[align=left] </ajaxToolkit:DropDownExtender>[/align]
[align=left] </ContentTemplate>[/align]
[align=left] <Triggers>[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click" />[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />[/align]
[align=left] <asp:AsyncPostBackTrigger ControlID="LinkButton4" EventName="Click" />[/align]
[align=left] </Triggers>[/align]
</asp:UpdatePanel>
注意:以上代码有几个要点,第一、所有组件都要放在UpdatePanel的ContentTemplate里,这样做才能在TextBox1中显示所选择的值。如果大家不需要在TextBox1中显示选择的值,那么UpdatePanel中只需要放显示值的控件即可,TextBox1、Panel1和DropDownExtender都可以放在UpdatePanel外面。第二、Panel1一定要加Style="Visibility:hidden",否则在Ajax.net脚本库完全加载完毕之前,Panel1会显示出来,产生闪烁的不良效果。
以下是CSS样式代码,大家参考一下:
[align=left].ContainPanel[/align]
[align=left]{[/align]
[align=left] background:#ffcc00;[/align]
[align=left] font-size:12px;[/align]
[align=left] padding:3px;[/align]
[align=left] border:solid 1px #666;[/align]
[align=left] line-height:150%;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].link[/align]
[align=left]{[/align]
[align=left] color:#666;[/align]
[align=left] font-size:12px;[/align]
}
第二步:设置DropDownExtender
DropDownExtender的设置非常简单,就两个属性,代码如下所示:
[align=left]<ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1" DropDownControlID="Panel1"> </ajaxToolkit:DropDownExtender>[/align]
TargetControlID是指激活下拉菜单的控件ID,这里是TextBox1。DropDownControlID是指下拉菜单载体的控件ID,这里是Panel1。
第三步:编写后台代码
大家发现前面的LinkButton点击后都会执行一个叫OnSelect的函数,现在我们转到CS文件编写这个函数,代码很简单,如下所示:
[align=left]protected void OnSelect(object sender, EventArgs e)[/align]
[align=left]{[/align]
[align=left] TextBox1.Text = ((LinkButton)sender).Text;[/align]
}
该函数的意思是在TextBox1显示所选择的值。
OK,运行,效果如下图:
![](http://www.falaosao.net/attachments/All_Files/s2007815112810.jpg)
一般状态中TextBox1只是一个平凡的TextBox。
![](http://www.falaosao.net/attachments/All_Files/z2007815112932.jpg)
当用鼠标点击时,下拉菜单出现了。
![](http://www.falaosao.net/attachments/All_Files/52007815113022.jpg)
选择完后菜单消失,所选择的值显示在TextBox1中。
结束:
本章主要介绍了DropDownExtender的使用方法。有了DropDownExtender,我们可以把DropDownList整合到很多控件上面,包括TextBox、Label、Panel等,大家可以自己试验一下。
相关文章推荐
- 轻松Ajax.net实例教程11_PopupControlExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程2_AlwaysVisibleControlExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程3_AutoCompleteExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程8_DynamicPopulateExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程13_TextBoxWatermarkExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程6_CollapsiblePanelExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程4_CalendarExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程9_HoverMenuExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程10_ModalPopupExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程12_TabContainer和TabPanel(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程1_Accordion(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程5_CascadingDropDown(按AjaxControlToolkit字母排序)
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十三 DropDownExtender(下拉对话框)控件的使用
- AjaxControlToolKit DropDownExtender(下拉扩展控件)使用方法
- ★ AjaxControlToolkit 微软出的ajax.net 工具使用教程五 ConfirmButtonExtender控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十六 TextBoxWatermarkExtender(水印) 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十二 ConfirmButtonExtender (确认对话框)控件的使用
- AJAX ControlToolkit学习日志-DropDownExtender控件(9)
- Ajax Control Toolkit使用实例 (1) AutoCompleteExtender
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十五 RoundedCornersExtender(圆角) 控件的使用