HoverMenu @ GridView:显示附加信息的面板-优快云博客

本文链接：https://blog.youkuaiyun.com/chjk1/article/details/2327810

本文介绍如何在ASP.NET AJAX应用程序中使用HoverMenu面板显示GridView中条目的附加信息。通过设置HoverMenuExtender和相关控件，实现了鼠标悬停时显示文件详细资料的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"

DataKeyNames="DocumentId" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。" Width="160px">

<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">

<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>

 <br />