轻松Ajax.net实例教程11_PopupControlExtender(按AjaxControlToolkit字母排序)
2008-06-13 15:32
423 查看
PopupControlExtender是一个可以控制Popup载体的组件,它本身并不会产生Popup控件,它的作用是控制Popup载体,例如panel,div等的显示、消失并获得Popup载体中控件的返回值,返回到目标控件中去。下面我们一齐来学习一下PopupControlExtender的使用方法。
第一步:建立AJAX Control Toolkit Web Site
要使用PopupControlExtender我们要使用AJAX Control Toolkit Web Site模板。建立好网站后我们需要以下控件:一个UpdatePanel、一个Panel控件、一个TextBox控件、一个RadioButtonList控件和一个PopupControlExtender组件,如下图所示:
注意:UpdatePannel一定要放在Panel里面,否则运行一次之后会发生JS异常。另外一定要将RadioButtonList的AutoPostBack属性设为True,否则就没有响应了。如下所示:
[align=left]<asp:Panel ID="Panel1" CssClass="popupbox" runat="server" Height="50px" Width="125px">[/align]
[align=left] <asp:UpdatePanel ID="UpdatePanel1" runat="server">[/align]
[align=left] <ContentTemplate>[/align]
[align=left] <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">[/align]
[align=left] <asp:ListItem Text="广州市"></asp:ListItem>[/align]
[align=left] <asp:ListItem Text="佛山市"></asp:ListItem>[/align]
[align=left] <asp:ListItem Text="深圳市"></asp:ListItem>[/align]
[align=left] <asp:ListItem Text="东莞市"></asp:ListItem>[/align]
[align=left] </asp:RadioButtonList>[/align]
[align=left] </ContentTemplate>[/align]
[align=left] </asp:UpdatePanel>[/align]
</asp:Panel>
准备好所有代码之后我们还需要建立一个CSS样式,否则不能控制Popup载体的显示和消失了,样式文件如下:
[align=left].popupbox[/align]
[align=left]{[/align]
[align=left] visibility:hidden;[/align]
[align=left] border-color:#000;[/align]
[align=left] background:#ff9900;[/align]
[align=left] font-size:12px;[/align]
[align=left]}[/align]
[align=left][/align]
注意:一定要加visibility:hidden,否则Popup就不能隐藏了,这也是CSS样式的关键作用。
第二步:配置PopupControlExtender
由于PopupControlExtender需要配置的属性太多,我们切换到源代码窗口进行设置,如下所示:
[align=left]<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" TargetControlID="TextBox1" PopupControlID="Panel1" CommitScript="e.value;" Position="Bottom" CommitProperty="value" runat="server">[/align]
[align=left]</ajaxToolkit:PopupControlExtender>[/align]
TargetControlID是指PopupControlExtender的目标控件ID,即获取返回值的控件ID,这里应该是TextBox1,因为我们从RadioButtonList选择好的项需要在TextBox1中显示。PopupControlID是指Popup载体控件的ID,关于Popup载体的解析在文章的开始部分已有说明,这里应该是Panel1。CommitScript是指选择完成后调用的Js脚本,这里写e.value意思是返回选择项的value值。大家可以适当扩充一下,例如"'你已选择了' + e.value; ",注意:这里的语法一定要严格遵守Js的书写格式,别忘了最后要写分号。Position指Popup载体出现在目标控件的位置,大家根据喜好选择。CommitProperty是指Popup载体中控件的返回值属性,这里就是指RadioButtonList的值的属性名称,大家可以改成Text试试。
第三步:编写常规代码
到了这一步就离完成不远了,我们只需要在cs文件中指定一下RadioButtonList的返回值。双击RadioButtonList1切换到CS代码窗口,编写代码,如下所示:
[align=left]protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)[/align]
[align=left]{[/align]
[align=left] if(RadioButtonList1.SelectedValue != null)[/align]
[align=left] {[/align]
[align=left]PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);[/align]
[align=left] }[/align]
[align=left] RadioButtonList1.ClearSelection();[/align]
[align=left]}[/align]
代码很简单,这里就不作解析了。注意:写这段代码之前一定要先using AjaxControlToolkit
OK!运行,效果如下所示:
结束:
本章主要介绍了PopupControlExtender的使用方法。从这个例子可以看出PopupControlExtender还有很多使用方法,而Popup载体也是多样的,大家可以根据这个例子的思路发散出去,发掘出PopupControlExtender更多的用法
原文:http://www.falaosao.net/article.asp?id=116
第一步:建立AJAX Control Toolkit Web Site
要使用PopupControlExtender我们要使用AJAX Control Toolkit Web Site模板。建立好网站后我们需要以下控件:一个UpdatePanel、一个Panel控件、一个TextBox控件、一个RadioButtonList控件和一个PopupControlExtender组件,如下图所示:
注意:UpdatePannel一定要放在Panel里面,否则运行一次之后会发生JS异常。另外一定要将RadioButtonList的AutoPostBack属性设为True,否则就没有响应了。如下所示:
[align=left]<asp:Panel ID="Panel1" CssClass="popupbox" runat="server" Height="50px" Width="125px">[/align]
[align=left] <asp:UpdatePanel ID="UpdatePanel1" runat="server">[/align]
[align=left] <ContentTemplate>[/align]
[align=left] <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">[/align]
[align=left] <asp:ListItem Text="广州市"></asp:ListItem>[/align]
[align=left] <asp:ListItem Text="佛山市"></asp:ListItem>[/align]
[align=left] <asp:ListItem Text="深圳市"></asp:ListItem>[/align]
[align=left] <asp:ListItem Text="东莞市"></asp:ListItem>[/align]
[align=left] </asp:RadioButtonList>[/align]
[align=left] </ContentTemplate>[/align]
[align=left] </asp:UpdatePanel>[/align]
</asp:Panel>
准备好所有代码之后我们还需要建立一个CSS样式,否则不能控制Popup载体的显示和消失了,样式文件如下:
[align=left].popupbox[/align]
[align=left]{[/align]
[align=left] visibility:hidden;[/align]
[align=left] border-color:#000;[/align]
[align=left] background:#ff9900;[/align]
[align=left] font-size:12px;[/align]
[align=left]}[/align]
[align=left][/align]
注意:一定要加visibility:hidden,否则Popup就不能隐藏了,这也是CSS样式的关键作用。
第二步:配置PopupControlExtender
由于PopupControlExtender需要配置的属性太多,我们切换到源代码窗口进行设置,如下所示:
[align=left]<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" TargetControlID="TextBox1" PopupControlID="Panel1" CommitScript="e.value;" Position="Bottom" CommitProperty="value" runat="server">[/align]
[align=left]</ajaxToolkit:PopupControlExtender>[/align]
TargetControlID是指PopupControlExtender的目标控件ID,即获取返回值的控件ID,这里应该是TextBox1,因为我们从RadioButtonList选择好的项需要在TextBox1中显示。PopupControlID是指Popup载体控件的ID,关于Popup载体的解析在文章的开始部分已有说明,这里应该是Panel1。CommitScript是指选择完成后调用的Js脚本,这里写e.value意思是返回选择项的value值。大家可以适当扩充一下,例如"'你已选择了' + e.value; ",注意:这里的语法一定要严格遵守Js的书写格式,别忘了最后要写分号。Position指Popup载体出现在目标控件的位置,大家根据喜好选择。CommitProperty是指Popup载体中控件的返回值属性,这里就是指RadioButtonList的值的属性名称,大家可以改成Text试试。
第三步:编写常规代码
到了这一步就离完成不远了,我们只需要在cs文件中指定一下RadioButtonList的返回值。双击RadioButtonList1切换到CS代码窗口,编写代码,如下所示:
[align=left]protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)[/align]
[align=left]{[/align]
[align=left] if(RadioButtonList1.SelectedValue != null)[/align]
[align=left] {[/align]
[align=left]PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);[/align]
[align=left] }[/align]
[align=left] RadioButtonList1.ClearSelection();[/align]
[align=left]}[/align]
代码很简单,这里就不作解析了。注意:写这段代码之前一定要先using AjaxControlToolkit
OK!运行,效果如下所示:
结束:
本章主要介绍了PopupControlExtender的使用方法。从这个例子可以看出PopupControlExtender还有很多使用方法,而Popup载体也是多样的,大家可以根据这个例子的思路发散出去,发掘出PopupControlExtender更多的用法
原文:http://www.falaosao.net/article.asp?id=116
相关文章推荐
- 轻松Ajax.net实例教程6_CollapsiblePanelExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程13_TextBoxWatermarkExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程7_DropDownExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程8_DynamicPopulateExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程10_ModalPopupExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程2_AlwaysVisibleControlExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程3_AutoCompleteExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程9_HoverMenuExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程4_CalendarExtender(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程1_Accordion(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程5_CascadingDropDown(按AjaxControlToolkit字母排序)
- 轻松Ajax.net实例教程12_TabContainer和TabPanel(按AjaxControlToolkit字母排序)
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十三 ModalPopupExtender 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十四 PopupControlExtender(弹出) 控件的使用
- 轻松掌握Ajax.net系列教程六:使用PopupControlExtender
- Ajax Control Toolkit BalloonPopup的使用实例及效果
- ASP.NET AJAX Control Toolkit: ModalPopupExtender使用技巧(转)
- 轻松掌握Ajax.net系列教程六:使用PopupControlExtender
- AjaxControlToolkit 微软出的ajax.net 工具使用教程五 ConfirmButtonExtender(确认)控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十一 FilteredTextBoxExtender(筛选) 控件的使用