HoverMenuExtender(鼠标经过WEB控件弹出列表)控件

      HoverMenuExtender控件用于当鼠标滑过一个Web控件时，弹出一个列表。选择列表，对控件进行操作。

下面看一个示例：

1)在VS中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为HoverMenuExtender1。

2)在Default.aspx中拖放一个SqlDataSource，对其进行一点配置，使用Northwind数据库中的Products表的ProductID，ProductName和UnitPrice。并在页面上拖放一个DataView，设置其DataSourceID为SqlDataSource1。

代码如下：

1        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
2            DataSourceID="SqlDataSource1" Width="360px" HorizontalAlign="Center">
3        asp:GridView>
4        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
5            SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Alphabetical list of products]">
6        asp:SqlDataSource>

3)在DataView中添加模板列，在其中添加三个模板列，其值来自ProductID，ProductName和UnitPrice。

代码如下：

 1        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
 2            DataSourceID="SqlDataSource1" Width="360px" HorizontalAlign="Center">
 3            <Columns>
 4                <asp:TemplateField>
 5                    <ItemTemplate>           
 6                        <asp:Panel ID="Panel2" runat="server" Height="50px" Width="360px">
 7                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductID") %>'>asp:Label>
 8                            <asp:Label ID="Label2" runat="server" Text='<%# Eval("ProductName") %>'>asp:Label>
 9                            <asp:Label ID="Label3" runat="server" Text='<%# Eval("UnitPrice") %>'>asp:Label>
10                        asp:Panel>
11                    ItemTemplate>
12                    <EditItemTemplate>
13                        <asp:Panel ID="Panel1" runat="server" Width="360px" >
14                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("ProductID") %>'>asp:TextBox>
15                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("ProductName") %>'>asp:TextBox>
16                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("UnitPrice") %>'>asp:TextBox>
17                        asp:Panel>
18" CommandName="Cancel" Text="Cancel" />
19                    EditItemTemplate>
20                asp:TemplateField>
21                 
22            Columns>
23        asp:GridView>

4)在TemplateField的ItemTemplate和EditTemplate中分别添加弹出面板和HoveMenuExtender控件。

代码如下：

 1                    <ItemTemplate>
 2                        <asp:Panel ID="PopupMenu" CssClass="popupMenu" runat="server" Height="50px" Width="150px">
 3                            <div style="border:1px outset white;padding:2px;">
 4                                <div><asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" />div>
 5                                <div><asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" />div>
 6                            div>                       
 7                        asp:Panel>
 8                        <cc1:HoverMenuExtender ID="HoverMenuExtender1" PopupPosition="Left" HoverCssClass="hoverPopup"  TargetControlID="Panel2" PopupControlID="PopupMenu" runat="server">
 9                        cc1:HoverMenuExtender>
10                    ItemTemplate>
11                    <EditItemTemplate>
12                        <asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu" Width="150px">
13                            <div style="border:1px outset white">
14                                <asp:LinkButton ID="LinkButton1" runat="server"
15                                    CausesValidation="True" CommandName="Update" Text="Update" />
16                                <br />
17                                <asp:LinkButton ID="LinkButton2" runat="server"
18                                    CausesValidation="False" CommandName="Cancel" Text="Cancel" />
19                            div>
20                        asp:Panel>
21                        <cc1:HoverMenuExtender ID="HoverMenuExtender2" TargetControlID="Panel1" PopupPosition="Right" PopupControlID="PopupMenu" HoverCssClass="popupHover" runat="server">
22                        cc1:HoverMenuExtender>
23                    EditItemTemplate>

5)按下CTRL+F5，在浏览器中查看效果。