ASP.NETAjax控件之应用一(CollapsiblePanelExtender控件的使用)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　一般在含有多个asp.net数据绑定控件的页面中，可能有时候有些数据绑定控件没有数据，有些可能有数据，若控件过多，则会影响页面的数据浏览，也影响页面的美观，那么我们就需要在当浏览某个控件的数据时，其他控件都收缩起来，当浏览其他控件数据时，把此控件给收缩起来。由于此AJAX控件的控制对象是基于panel面板控件的，那么我们在设计页面时可以把每个数据绑定控件都放在不同的panel控件中，然后再每一个panel控件后给其添加一个CollapsiblePanelExtender控件,并通过给TargetControlID属性赋值（此值为panel控件的ID）来使panel控件与CollapsiblePanelExtender控件进行绑定，好了多话不说了，下面就上代码

<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=="图片路径"就可以设置当控件收缩或展开时显示的不同图片了，效果如图所示：