ost Windows users are familiar with tool tips?the little “balloon” that pops up when you position your mouse over an icon. Tool tips are very useful user interface (UI) enhancements that display additional information about the current object of interest. On the Web, the equivalent of tool tips are pop-ups. Pop-ups have a bad reputation due to the large number of mass marketers who purchased advertising inventory on the Web in bulk using a style of pop-up that launched an additional instance of the browser on top of the main window. But these aren’t the kind of pop-ups I’m talking about today.

Other types of pop-ups occur within your current window when you perform an activity such as a mouseover, and they are often very helpful. Amazon.com provides a nice example of a useful pop-up on its front door; if you move your mouse over the Product Categories tab, a large pop-up appears (see Figure 1) which displays the various top-level product categories. This kind of popup display context-sensitive information that provides a nice short-cut to certain actions.

In this article, I will show you how you can create pop-ups in your ASP.NET application using the ASP.NET AJAX framework and the ASP.NET AJAX Control toolkit (nee Atlas). In particular, you will learn how to use the HoverMenuExtender control to make good use of pop-ups in your ASP.NET Web applications. You will use pop-ups to display additional information about a Calendar control, as well as display RSS feeds when the user’s mouse hovers over a RSS feed icon.

Figure 1. Pop-up in Amazon.com: Customers of Amazon.com will be familiar with this large pop-up that helps shoppers get to category pages more easily.

?

Figure 2. This short video shows the behavior of the Calendar control used in the sample application, which makes it easier to return to the previously selected date. Single click the play button twice to start the video.

Creating the Application
The first application I will create uses a Calendar control. Using the Calendar control, you can navigate between different months to select a particular date. However, it is always a pain to return to the current date. Hence, in this project, I will use the HoverMenuExtender control to enhance the usability of the Calendar control. When the user moves the mouse over the Calendar control, you will display a panel to allow the user to jump back to today?s date. At the same time, dates selected by the user are automatically added to a drop-down list so that users can directly jump to the previously selected date (see Figure 2).

To get started, launch Visual Studio 2005, select File | New | Web Site?, and then select the ASP.NET AJAX-Enabled Web Site template (see Figure 3). Name the project HoverMenuExtender and click OK.

Figure 3. Create an ASP.NET AJAX-enabled Web Site project by selecting the corresponding icon from the Web site templates in Visual Studio.

?

Figure 4. Populate the Default.aspx page with the various controls as shown here.

Populate the Default.aspx page with the following controls (see also Figure 4):

• Calendar
• Panel
• HoverMenuExtender

Author’s Note: For this project, I am using the ASP.NET AJAX 1.0 Beta and the ASP.NET AJAX Control Toolkit. You can find the instructions to download them from: http://ajax.asp.net/Default.aspx.

The Panel control is what will eventually become the popup. Therefore, I need to prepare the Panel for my content. In the Panel control, add the following text and controls (see also Figure 5).

• Label
• LinkButton
• Dropdown List

Figure 5. Populate the Panel control with the text and controls as shown.

?

Figure 6. After adding the controls, the Default.aspx page should look like this.

To make the control more aesthetically appealing, apply the Colorful1 scheme to the Calendar control (via the Autoformat link in the Smart tag of the Calendar control). Also, check the “Enable AutoPostback” checkbox in the Smart tag of the DropDownList control. This important step is what creates the postback and updates the calendar control when the user selects a date. The Default.aspx page should now look like Figure 6.

Switch to the Source View of Default.aspx and add the attributes for the HoverMenuExtender control as follows:

        TargetControlID="Calendar1"            PopupControlID="Panel1"           PopDelay="500"            PopupPosition="Right" >        

The HoverMenuExtender control supports the following attributes:

• TargetControlID?the control the HoverMenuExtender is targeting.
• PopupControlID?the control to display when the mouse is over the target control.
• HoverCssClass?the CSS class to apply to the popup when it is visible.
• PopupPosition?the position to display the popup with respect to the target control; can be left, right, top, bottom, or center.
• OffsetX/OffsetY?the pixel offset between the target control and popup.
• PopDelay?the time for the popup to remain visible after the mouse moves away from the target control.

At the top of the page, define a CSS style:

In the Panel control, set the CssClass attribute to the CSS style that you have just defined. This CSS style defines what the panel will look like:

CssClass="popupMenu"    Height="50px" Width="256px">

I want the Label control within the Panel control to display today’s date. To do that, switch to the code-behind of Default.aspx and in the Page_Load event, code the following:

Figure 7. Testing the Application: The completed Calendar control provides a popup panel on mouseover that gives end users quick access to useful features.

    Protected Sub Page_Load( _       ByVal sender As Object, _       ByVal e As System.EventArgs) _       Handles Me.Load        lblDate.Text = Today.ToShortDateString    End Sub

When the user clicks on the “today’s” LinkButton control, you will display the Calendar control to today’s date. This is accomplished by the Click event of the LinkButton control:

    Protected Sub btnToday_Click( _       ByVal sender As Object, _       ByVal e As System.EventArgs) _       Handles btnToday.Click        Calendar1.VisibleDate = Today    End Sub

When the user clicks on a date in the Calendar control, add the date to the DropDownList control:

    Protected Sub Calendar1_SelectionChanged( _       ByVal sender As Object, _       ByVal e As System.EventArgs) _       Handles Calendar1.SelectionChanged        ddlSelectedDates.Items.Add(Calendar1.SelectedDate)    End Sub

Finally, when the user selects a saved date from the DropDownList control, set the Calendar control to display the selected date:

    Protected Sub ddlSelectedDates_SelectedIndexChanged( _       ByVal sender As Object, _       ByVal e As System.EventArgs) _       Handles ddlSelectedDates.SelectedIndexChanged        Calendar1.VisibleDate = ddlSelectedDates.SelectedItem.Text    End Sub

That’s it! Press F5 to test the application. Figure 7 shows what the application looks like when you move the mouse over the Calendar control.

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:

                  <%#XPath("title")%>
         <%#XPath("description") %>?         <%#XPath("pubDate")%>
         Link

                                       

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:

Configure the Panel control to use the CSS style:

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

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:

                  <%#XPath("title")%>
         <%#XPath("description") %>?         <%#XPath("pubDate")%>
         Link

                                                               

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.