ASP.NET Ajax 控件之应用一(CollapsiblePanelExtender控件的使用)
2011-08-05 16:59
671 查看
一般在含有多个asp.net数据绑定控件的页面中,可能有时候有些数据绑定控件没有数据,有些可能有数据,若控件过多,则会影响页面的数据浏览,也影响页面的美观,那么我们就需要在当浏览某个控件的数据时,其他控件都收缩起来,当浏览其他控件数据时,把此控件给收缩起来。由于此AJAX控件的控制对象是基于panel面板控件的,那么我们在设计页面时可以把每个数据绑定控件都放在不同的panel控件中,然后再每一个panel控件后给其添加一个CollapsiblePanelExtender控件,并通过给TargetControlID属性赋值(此值为panel控件的ID)来使panel控件与CollapsiblePanelExtender控件进行绑定,好了多话不说了,下面就上代码
如代码所示,给AJAX控件配置好属性就可以了,点击ID为panelOperator的面板,那么包有数据绑定控件的面板控件panelResult就会随着鼠标的点击不停地收缩和展开了,当然还可以通过配置ImageControlID属性与Image控件进行绑定,通过配置ExpandedImage="图片路径",CollapsedImage=="图片路径"就可以设置当控件收缩或展开时显示的不同图片了,效果如图所示:
<asp:Panel ID="panelOperator" runat="server"> <div> <div style="float: left; width: 55%; text-align: right;">办理结果</div> <div style="float: right; width: 40%; text-align: right;"> <asp:Image ID="Image4" runat="server" ImageUrl="~/App_Themes/Default/Btn/ClickDownNormal.gif" /></div> </div> </asp:Panel> <asp:Panel ID="panelResult" runat="server"> <asp:GridView ID="gv_bljg" runat="server" Width="100%" AutoGenerateColumns="False" DataKeyNames="id" SkinID="GridView" onrowcommand="gv_gzjh_RowCommand" AllowPaging="True" PageSize="3" > <Columns> <asp:TemplateField HeaderText="填写时间"> <ItemStyle Width="20%" /> <ItemTemplate> <%#Eval("AddTime", "{0:yyyy-MM-dd}")%> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Content" HeaderText="内容"/> </Columns> </asp:GridView> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server" TargetControlID="panelResult" ExpandControlID="panelOperator" CollapseControlID="panelOperator" ImageControlID="Image4" ExpandedImage="~/App_Themes/Default/Btn/ClickDownExpanded.gif" CollapsedImage="~/App_Themes/Default/Btn/ClickDownNormal.gif" SuppressPostBack="true" />
如代码所示,给AJAX控件配置好属性就可以了,点击ID为panelOperator的面板,那么包有数据绑定控件的面板控件panelResult就会随着鼠标的点击不停地收缩和展开了,当然还可以通过配置ImageControlID属性与Image控件进行绑定,通过配置ExpandedImage="图片路径",CollapsedImage=="图片路径"就可以设置当控件收缩或展开时显示的不同图片了,效果如图所示:
![](http://pic002.cnblogs.com/images/2011/313834/2011080517270343.jpg)
相关文章推荐
- AjaxControlToolkit 微软出的ajax.net 工具使用教程四 CollapsiblePanelExtender(隐藏)控件的使用
- ★ AjaxControlToolkit 微软出的ajax.net 工具使用教程四 CollapsiblePanelExtender控件的使用
- 使用asp.net Ajax控件PopupControlExtender与GridView联合显示详情列表
- asp.net ajax updatepanel控件使用(网页自动部分更新)
- 使用asp.net Ajax控件PopupControlExtender与GridView联合显示详情列表
- ASP.NET AJAX入门系列:使用UpdatePanel控件(一)
- aspnetajax UpdatePanel控件简单应用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程九 DragPanelExtender(拖拉)控件的使用
- AjaxControltoolkit学习笔记—CollapsiblePanelExtender使用详解 (aps.net C#)
- AJAX技术与asp.net 2.0的完美结合之Timer的web应用 及使用AJAX控件时的“Sys 未定义”错误解决办法
- 轻松掌握Ajax.net系列教程十:使用CollapsiblePanelExtender
- [转]轻松掌握Ajax.net系列教程十:使用CollapsiblePanelExtender
- aspnetajax UpdatePanel控件简单应用
- ASP.NET Ajax控件之使用二(TextBoxWatermarkExtender控件的使用)
- 轻松掌握Ajax.net系列教程十:使用CollapsiblePanelExtender
- 新写的一个使用ASP.NET AJAX中的UpdatePanel控件实现GridView的无刷新删除,更新,添加,查询!
- ASP.NET Ajax Toolkit使用ModalPopupExtender控件
- AJAX技术与asp.net 2.0的完美结合之Timer的web应用 及使用AJAX控件时的“Sys 未定义”错误解决办法
- ASP.NET AJAX入门系列:使用UpdatePanel控件(一)
- OWA或Messenger样式的信息提示窗口——编写ASP.NET AJAX Extender控件(下):使用该控件(示例程序)