AJAX中的CollapsiblePanelExtender使用注意事项

 在GridView中运用CollapsiblePanelExtender，比PopupControlExtender,HoverMenuExtender,Accordion等等好用多了

 <asp:GridView ID="GridView2" runat="server"  AutoGenerateColumns="False"  OnRowDeleting="GridView2_Deleting"                      DataKeyNames="FileCommentID" GridLines="None" ShowHeader="False"  onpageindexchanging="GridView2_PageIndexChanging">   

<Columns>    

<asp:TemplateField HeaderText="Indexed Name">   

<ItemTemplate>  

<asp:Panel runat="server" ID="panelground" Height="20" Width="400" BackColor="White">     

<div style="cursor:pointer;background-color:White"> 

<%--   <div style="float:left">what is this  </div>--%> //注意格式化的话，要正确，否则该扩展控件计算出TarControlID的控件的位置很有可能不对，我就犯过这样的毛病，一直找不到原因，花了2个小时

<asp:Label runat="server" ID="Label1" >what is new:</asp:Label><asp:Label runat="server" Width="200px"></asp:Label>  <asp:Label runat="server" ID="Label2" >Show Details ...</asp:Label> &nbsp;  

<asp:Image ID="Image1" Width="17" Height="17"  runat="server" ImageUrl="~/picture/down.png" /> 

  <%--  <div style="float:right;vertical-align:middle;"> 

<asp:Image ID="Image1" Width="20" Height="20" runat="server" ImageUrl="~/picture/c.gif" />

</div><div style="float:right;margin-right:20px">123</div>--%> 

</div>

</asp:Panel>

  <asp:Panel runat="server" ID="panelup" Height="0" BackColor="White"> 

　　<asp:Table runat="server" ID="tb"  Width="400">　　

　　　　<asp:TableRow runat="server"  ID="tr1">  

　　　　　　 <asp:TableCell runat="server" ID="tc1" >   

　　　　　　　　<asp:TextBox runat="server"  Width="390" TextMode="MultiLine" Height="40" Wrap="true" ReadOnly="true" 　　　　　　　　                                 ID="tbContent" Text='<%#Eval("Comments")%>'></asp:TextBox> 

　　　　　　</asp:TableCell>   

　　　　  </asp:TableRow>  

     <asp:TableRow runat="server" ID="tr2" Width="370" BackColor="White"> 

　　　　<asp:TableCell runat="server" ID="tc2"  HorizontalAlign="Right"> 

　　　　　　　　 <asp:Label runat="server"   Wrap="true" ReadOnly="true" ID="lb1" Text='<%#Eval("Author")%>'/>  &nbsp;&nbsp;         <asp:Label runat="server"  Wrap="true" ReadOnly="true" ID="lb2" Text='<%#Eval("Time")%>'/>                       　　 　　　　　　　　                 </asp:TableCell>                    

     </asp:TableRow>      

     </asp:Table>     

</asp:Panel>

  <ajaxToolkit:CollapsiblePanelExtender  ID="cpeDemo" runat="server" TargetControlID="panelup" ExpandControlID="panelground" ExpandDirection="Vertical"   CollapseControlID="panelground" Collapsed="true" CollapsedSize="0" ExpandedSize="70"  AutoCollapse="false"     ImageControlID="Image1"  TextLabelID="Label2" ExpandedText="Hide Details ..." CollapsedText="Show Details ..."       ExpandedImage="~/picture/up.png" CollapsedImage="~/picture/down.png" SuppressPostBack="true"></ajaxToolkit:CollapsiblePanelExtender>             

</ItemTemplate>

</asp:TemplateField>   

<asp:CommandField HeaderText="Modify" DeleteText="delete" ItemStyle-Width="40" ControlStyle-BackColor="White" ItemStyle-BackColor="White" ItemStyle-ForeColor="Black" ShowDeleteButton="True"/>         

<%--   <asp:TemplateField HeaderText="Indexed Name" > 

  <ItemTemplate>  

<asp:Button ID="ImageButton1" runat="server"  CommandArgument='<%# Eval("Manufacturer") %>' CommandName="AddNewOne"/>  

 </ItemTemplate> 

<ItemStyle HorizontalAlign="left"></ItemStyle>  

</asp:TemplateField>--%>

</Columns>

</asp:GridView>

其中：TargetControlID - 具有折叠和展开功能的 Panel 的 ID
CollapsedSize - 当目标 Panel 处于关闭状态时的尺寸大小，用像素 (px) 表示
ExpandedSize - 当目标 Panel 处于展开状态时的尺寸大小，用像素 (px) 表示
Collapsed - 标志该目标 Panel 将被初始化的状态是否为折叠状态，在上面的示例中，我们初始化 Panel 为关闭状态，而且关闭状态时的
Panel 高度为 0 所以在第一次打开这个页面的时候我们看不到 Panel
AutoCollapse - 如果设置为 True，当鼠标指针移出
Panel 区域的时候 Panel 将自动折叠
AutoExpand - 如果设置为 True，当鼠标移入到 Panel 区域的时候 Panel 将自动展开
ScrollContents - 如果设置为 True，当 Panel 的内容大于其本身的大小的情况下，将自动出现相适应的滚动条
ExpandControlID/CollapseControlID - 控制目标 Panel 的折叠或者展开状态的控件 ID， 当点击该控件的时候，目标
Panel 将呈现展开或者折叠的状态， 如果它们被设置为相同的控件，那么这个控件将根据他当前的状态进行改变，如上面示例所示
TextLabelID - 用于显示当前目标 Panel 折叠或者展开状态的 Label 控件 ID
CollapsedText - 折叠状态的描述，该描述将用于
TextLabelID 的 Text 属性，这个文本内容同样将是 ImageControlID (如果设置)的 AlternateText 属性值
ExpandedText - 展开状态的描述，该描述将用于 TextLabelID 的 Text 属性，这个文本内容同样将是
ImageControlID (如果设置) 的 AlternateText 属性值
ImageControlID - 用于用图标表示其展开或者折叠状态的
Image 控件 ID，该控件将自动根据其状态替换其图标为 CollapsedImage 属性指向的图片， 和 ExpandedImage 属性指向的图片。如果指定了 CollapsedText 和 ExpandedText 属性，它们将是该图标控件的 AlternateText 属性值
CollapsedImage - 当目标 Panel 被折叠的时候呈现的图片
ExpandedImage -当目标 Panel 被展开的时候呈现的图片
ExpandDirection - 可以设置为 "Vertical" 或者 "Horizontal" 标示目标 Panel 的展开方向

还可以结合RoundedCornersExtender，DragPanelExtender等等使你弹出的窗口更加漂亮