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