HoverMenu @ GridView:显示附加信息的面板

1、新建一个AjaxControlToolkit  Website

2、把“服务器资源管理器”里面的upfile1数据表拖到Default.aspx，
就自动配置好GridView和SqlDataSource。因为我们只想得到“显示附加信息”的效果，
可以不管那些数据更新的操作。

3、我们只在GridView显示DocumentId、FileName、FileTime三个字段，
其他如（Description、ContentType、ContentSize、Sendor）等字段就作为“附加信息”
用HoverMenu面板来显示。

4、HoverMenu面板的内容：（代码段）
<asp:Panel ID="popupPanel"  CssClass="dragContainer" runat="server">
//code...
</asp:Panel>

5、你可能觉得面板的外观很土吧，那就在StyleSheet.css自己写个较cool的样式啊。
6、Default.aspx的完整代码：
 

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > Untitled Page </ title >
     < link  href ="StyleSheet.css"  rel ="stylesheet"  type ="text/css"   />
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
         < div >
             < asp:GridView  ID ="GridView1"  runat ="server"  AllowPaging ="True"  AutoGenerateColumns ="False"
                DataKeyNames ="DocumentId"  DataSourceID ="SqlDataSource1"  EmptyDataText ="没有可显示的数据记录。"  Width ="160px" >
                 < Columns >
                     < asp:BoundField  DataField ="DocumentId"  HeaderText ="DocumentId"  ReadOnly ="True"  SortExpression ="DocumentId"   />
                     < asp:BoundField  DataField ="FileName"  HeaderText ="FileName"  SortExpression ="FileName"   />
                     < asp:BoundField  DataField ="FileTime"  HeaderText ="FileTime"  SortExpression ="FileTime"   />
                    
                  < asp:TemplateField  HeaderText ="More Information" >
                 
                        < ItemTemplate >
                       
                         < asp:Panel  ID ="gridRow"  CssClass ="gridRow"  runat ="server" >
                             <% ... --<asp:Label ID="lbTitle" runat="server" Text='<%# Bind("DocumentId") %>'></asp:Label>--%>
                            <asp:Label ID="lbTitle" runat="server" Text="more..."></asp:Label>
                        </asp:Panel>
                        

                    
                    <asp:Panel ID="popupPanel"  CssClass="dragContainer" runat="server">
                                                        
                            Image:<br />
                            <asp:Image ID="Image1" runat="server" imageurl='<%# Eval ( "DocumentId", "~/images/thumbs/{0}.jpg" ) %>'/><br />
                          
                            Description:<br />
                            <asp:Label ID="lbId" runat="server" Text='<%# Bind("Description") %>'></asp:Label><br />
                            ContentType:<br />
                            <asp:Label ID="lbIsActive" runat="server" Text='<%# Bind("ContentType") %>' /><br />
                            ContentSize:<br />
                            <asp:Label ID="lbAggViews" runat="server" Text='<%# Bind("ContentSize") %>'></asp:Label><br />
                              <hr />
                            Sendor:
                            <asp:Label ID="lbWebViews" runat="server" Text='<%# Bind("Sendor") %>'></asp:Label><br />
                    </asp:Panel>
                           <ajaxToolkit:HoverMenuExtender ID="hme" TargetControlID="gridRow" HoverCssClass="popupHover"
                            PopupControlID="popupPanel" PopupPosition="Right" PopDelay="20" OffsetY="-40"
                            runat="server" />
                 </ItemTemplate>
                </asp:TemplateField>
                </Columns>
                

                
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString1 %>"
                DeleteCommand="DELETE FROM [upfile1] WHERE [DocumentId] = @DocumentId" InsertCommand="INSERT INTO [upfile1] ([Description], [ContentType], [ContentSize], [Sendor], [Getor], [FileName], [FileTime]) VALUES (@Description, @ContentType, @ContentSize, @Sendor, @Getor, @FileName, @FileTime)"
                ProviderName="<%$ ConnectionStrings:ASPNETDBConnectionString1.ProviderName %>"
                SelectCommand="SELECT [DocumentId], [Description], [Content], [ContentType], [ContentSize], [Sendor], [Getor], [FileName], [FileTime] FROM [upfile1]"
                UpdateCommand="UPDATE [upfile1] SET [Description] = @Description, [ContentType] = @ContentType, [ContentSize] = @ContentSize, [Sendor] = @Sendor, [Getor] = @Getor, [FileName] = @FileName, [FileTime] = @FileTime WHERE [DocumentId] = @DocumentId">

            </asp:SqlDataSource>
            &nbsp;<br />
                    <br />
                <br />
            <br />
        </div>
    </form>    
</body>
</html>

7、参考： 《ASP.NET AJAX程序设计——第I卷：服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit 》（第八章），陈黎夫   编著。