AJAX ControlToolkit学习日志-HoverMenuExtender(13)

      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，在浏览器中查看效果。