Master AJAX Pop-Ups Using the HoverMenuExtender Control : Page 2

AJAX has made layering contextual information into a Web interface completely elegant and unobtrusive. If you build Web apps, this is one trick you definitely want in your hat. Find out how to exploit the HoverMenuExtender in the ASP.NET AJAX Control.

by Wei-Meng Lee

Nov 9, 2006

Page 2 of 2

Displaying RSS Feeds Using the HoverMenuExtender Control
In the previous section I showed the basic steps for configuring the HoverMenuExtender control, but there are plenty of really useful things you can do with it in the real world. In the next section I'll put the HoverMenuExtender control to better use.

Most web sites today display the RSS icon, which allows you to subscribe to its feed. For example, on DevX.com's site (see Figure 8), you can click on the "XML" icon to obtain the XML feed (which is readable by news aggregator). For a human-readable version of the feed, you need to click on the corresponding links (for example, Latest Articles, C++, etc).

Figure 8. The XML icons are links that will take you to the XML-based RSS feeds at DevX.com.

Figure 9. This short video shows how I've used the HoverMenu control to create a mouseover popup on DevX that displays the XML for the RSS feeds, eliminating the need to go to a new page.

A good way to use the HoverMenuExtender control in this instance is to display the formatted RSS feed when the mouse hovers over the XML icon. Figure 9 shows an illustration of this idea and this is what you will build in this article.

Working from the same project used in the previous section, add to it now a new Web Form and populate it with the following controls (see also Figure 10):

ScriptManager
ImageButton
Panel
HoverMenuExtender

Figure 10. Populate the Default2.aspx with the various controls as shown.

Figure 11. The Default2.aspx should look like this once the DataList and XmlDataSource controls are added.

Switch to Source View and add the following code (in boldface type) to the Panel control:


<asp:Panel ID="Panel1" runat="server" Height="106px" Width="339px"  
   CssClass="popupMenu">
   <asp:DataList ID="DataList1" runat="server"
      BackColor="LightGoldenrodYellow" BorderColor="Tan"
      BorderWidth="1px" CellPadding="2" 
      DataSourceID="XmlDataSource1" ForeColor="Black" Width="346px">
      <ItemTemplate>
         <b><%#XPath("title")%></b><br />
         <i><%#XPath("description") %></i> 
         <%#XPath("pubDate")%><br />
         <a href='<%#XPath("link") %>'>Link</a><br /><br />
      </ItemTemplate>
      <FooterStyle BackColor="Tan" />
      <SelectedItemStyle BackColor="DarkSlateBlue" 
         ForeColor="GhostWhite" />
      <AlternatingItemStyle BackColor="PaleGoldenrod" />
      <HeaderStyle BackColor="Tan" Font-Bold="True" />
   </asp:DataList>

   <asp:XmlDataSource ID="XmlDataSource1" runat="server" 
      XPath="rss/channel/item" 
      DataFile="http://services.devx.com/outgoing/devxfeed.xml">
   </asp:XmlDataSource>
</asp:Panel>

Essentially, here you are binding a DataList control to an XmlDataSource control. The XmlDataSource control loads the RSS feed (as specified in the DataFile attribute) and the content is displayed by the DataList control (using the various XPath expressions to extract the information needed).

Figure 11 shows what the Default2.aspx page should look like once you've made these changes.

As usual, add a CSS style definition to the top of the page:


<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
       .popupMenu {
            position:absolute;
            visibility:hidden;
            background-color:#F5F7F8;
            opacity:.9;
            filter: alpha(opacity=90);
       }
    </style>
</head>

Configure the Panel control to use the CSS style:


<asp:Panel ID="Panel1" runat="server" Height="106px" Width="339px" 
   CssClass="popupMenu">

Finally, wire up all the controls using the HoverMenuExtender control:


        <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
           TargetControlID="ImageButton1" 
           PopupControlID="Panel1" 
           PopDelay="500" 
           PopupPosition="Right" >
        </cc1:HoverMenuExtender>

Press F5 to test the application. When the mouse hovers over the first XML icon, the RSS feed will be displayed (see Figure 12).


Figure 12. When in action, this application launches the popup panel as soon as the mouse hovers over the XML icon.

For the second XML icon, you need to add a new set of Panel and HoverMenuExtender controls. Add the following to the page:


<asp:Panel ID="Panel2" runat="server" Height="106px" Width="339px"    
   CssClass="popupMenu">
   <asp:DataList ID="DataList2" runat="server" 
      BackColor="LightGoldenrodYellow" BorderColor="Tan"
      BorderWidth="1px" CellPadding="2" DataSourceID="XmlDataSource2" 
      ForeColor="Black" Width="346px">
      <ItemTemplate>
         <b><%#XPath("title")%></b><br />
         <i><%#XPath("description") %></i> 
         <%#XPath("pubDate")%><br />
         <a href='<%#XPath("link") %>'>Link</a><br /><br />
      </ItemTemplate>
      <FooterStyle BackColor="Tan" />
      <SelectedItemStyle BackColor="DarkSlateBlue" 
         ForeColor="GhostWhite" />
      <AlternatingItemStyle BackColor="PaleGoldenrod" />
      <HeaderStyle BackColor="Tan" Font-Bold="True" />
   </asp:DataList>

   <asp:XmlDataSource ID="XmlDataSource2" 
      runat="server" XPath="rss/channel/item" 
      DataFile="http://services.devx.com/outgoing/dotnet.xml">
   </asp:XmlDataSource>
</asp:Panel>
                        
<cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" 
   TargetControlID="ImageButton2" PopupControlID="Panel2" 
   PopupPosition="Right" >
</cc1:HoverMenuExtender>

Press F5 and you should now be able to view the RSS feed when your mouse hovers over the first two XML icons. Continue as needed to activate all of the XML icons with a HoverMenu. In this article, you have learned how to use the HoverMenuExtender control available in the ASP.NET AJAX Control toolkit to display pop-ups in your ASP.NET Web applications. Adding pop-ups will improve the usability of your application so be sure to take the time to familiarize yourself with the HoverMenuExtender control.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.

« Previous Page 12

0 Comments (click to add your comment)

Comment and Contribute