Pop-up Controls

One of the things that has historically been different about web applications and desktop applications is dialogs that pop up or are modal. Of course, we have all seen the annoying pop-ups that some applications use in excess. It’s easy to launch another browser instance and show it, but this is obviously not the same as providing a transient piece of UI that is integrated into the application.

Calendar

Selecting a date is a common requirement of many applications. The CalendarExtender attaches to a textbox and pops up a calendar for selecting a date. By default, the calendar is shown when the textbox gets focus, but if you set the PopupButtonID to the ID of another control, the calendar will become visible when that control is clicked.

The CalendarExtender is very easy to use with just a few key properties. The TargetControlID points to the textbox that gets the selected date. The Format property specifies the string format for the date input of the textbox. Listing 8-9 (Calendar.aspx) shows the basic CalendarExtender usage.

Listing 8-9

<%@ Page Language="C#" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Calendar Extender</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager" />
    <div>
    <asp:TextBox runat="server" ID="textbox1" />
    <ajaxToolkit:CalendarExtender runat="server" ID="calendarExtender1"
TargetControlID="textbox1" />
    </div>
    </form>
</body>
</html>

You can see in Figure 8-5 how a calendar becomes visible and the selected value is automatically written into the textbox.

Figure 8-5

ConfirmButton

The ConfirmButtonExtender is slick. I believe slick is the technical term. You set the TargetControlID to a button control or a control that derives from a button. When the button is clicked, the ConfirmText is shown along with OK and Cancel buttons. If the user clicks the OK button, the button fires normally. If not, the button click is canceled. Listing 8-10 (ConfirmButton.aspx) is a page that updates a label with the time on the server each time the button is clicked but only if the ConfirmButtonExtender allows the submit to occur.

Listing 8-10

<%@ Page Language="C#" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
    protected override void OnLoad(EventArgs e) {
        base.OnLoad(e);
        theLabel.Text = DateTime.Now.ToLongTimeString();
    }
</script>
<head runat="server">
    <title>Confirm Button</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager" />
    <div>
    <asp:Label runat="server" ID="theLabel" />
    <asp:Button runat="server" ID="button1" Text="Submit" />
    <ajaxToolkit:ConfirmButtonExtender runat="server" 
            ID="cfe1" 
            ConfirmText="Are You Sure?"
            TargetControlID="button1" />
    </div>
    </form>
</body>
</html>

HoverMenu

The HoverMenuExtender is used to display what is designated by the PopupControlID when the user hovers over the control you specify with the TargetControlID property. This is an easy way to add hover behavior using familiar ASP.NET controls to existing applications or as you develop new applications. The PopupPosition property is used to control where the hover control should be displayed. The options are:

Left
Right
Top
Bottom
Center

The OffsetX and OffsetY properties are the delta from the control’s position where the hover control should be displayed. Negative values are allowed. You can also specify the position using the PopupPosition property.

    <asp:Label runat="server" ID="theLabel" Text="hover over me" />
    <asp:Label runat="server" ID="popupLabel" Text="hover">the Hover
Menu</asp:Label>
    </div>
    <ajaxToolkit:HoverMenu 
        runat="server" 
        ID="HoverExtender1" 
        TargetControlID="theLabel" 
        HoverDelay="25" 
        UnhoverDelay="25" 
        PopupControlID="popupLabel" />

PopupControl

The PopupControlExtender is the general-purpose way to reveal content based on user action. You specify the TargetControlID that, when selected by the user, should activate the pop-up, along with the ID of the control that should be shown using the PopupControlID. You can also specify the PopupPosition or OffsetX and OffsetY properties. In this example, when the user selects the textbox, a radio button list is shown. I have included explicit script that populates the textbox and hides the pop-up panel when a value is selected.

<asp:Panel runat="server" ID="thePanel" >
<asp:RadioButtonList runat="server" ID="rbl" >
<asp:ListItem Text="Phish" Value="Phish" 
onClick="$find('popupBehavior').
<asp:ListItem Text="Daft Punk" Value="Daft Punk" 
onClick="$find('popupBehavior').
<asp:ListItem Text="Irina" Value="Irina" 
onClick="$find('popupBehavior').
</asp:RadioButtonList>
</asp:Panel>
<div>
<asp:TextBox runat="server" ID="textbox1" />
<ajaxToolkit:PopupControlExtender runat="server" ID="pce" 
        TargetControlID="textbox1"
        PopupControlID="thePanel"
        BehaviorID="popupBehavior"
        CommitProperty="value"
    />

ModalPopup

The ModalPopupExtender prevents the user from interacting with the underlying page until a modal dialog has been addressed by the user. It is very similar to the HoverMenuExtender, except that the user must work with the control designated by the PopupControlID before he can proceed. It has properties for specifying the OkControlID and the CancelControlID, along with OnOkScript and

<asp:Button runat="server" ID="theButton" Text="Go" />
<asp:Panel runat="server" ID="popupPanel" Style="display:none" >
<asp:Button runat="server" ID="okButton" Text="ok" /><br />
<asp:Button runat="server" ID="cancelButton" Text="cancel" />
</asp:Panel>
</div>
<ajaxToolkit:ModalPopupExtender 
    runat="server"
    TargetControlID="theButton" 
    ID="ModalPopupExtender1" 
    PopupControlID="popupPanel"
    BackgroundCssClass="modalFilter"
    OkControlID="okButton"
    CancelControlID="cancelButton"      
     />

When the button identified by the TargetControlID is selected, the underlying page takes on the BackgroundCssClass, and the Panel designated as the PopupControlID is shown.

CascadingDropDown

The available options for one DropDownList can be a function of the selection made in another DropDownList. The CascadingDropDownExtender makes it easy to enable this in your application. You set the TargetControlID to the DropDownList that should be populated by a call back to the server. You also assign a category to classify the DropDownList.

Before the DropDownList is populated, the PromptText is shown. And while the call to the server is underway, the LoadingText is displayed. You can set the ServicePath property to call a ServiceMethod on a separate web service, or you can just set the ServiceMethod name to a static ScriptMethod located directly in the page, as in Listing 8-11 (CascadingDropDown.aspx).

The first DropDownList lets the user pick a state. In this example, I have included only Washington and Oregon. Once a state is selected, a second DropDownList is populated based on the value selected by the user in the first DropDownList. The way to specify that one DropDownList is dependent on the value of another is to set the ParentControlID of the CascadingDropDownExtender.

Listing 8-11

<%@ Import Namespace="System.Web.Services" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script runat="server" language="C#">
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static CascadingDropDownNameValue[] 
       GetStates(string knownCategoryValues, string category) {
    return new CascadingDropDownNameValue[] { 
        new CascadingDropDownNameValue("Washington", "Washington"),
        new CascadingDropDownNameValue("Oregon", "Oregon") };

}

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static CascadingDropDownNameValue[] 
       GetCounties(string knownCategoryValues, string category) {
    if(knownCategoryValues.Contains("Washington")) {
        return new CascadingDropDownNameValue[] {
            new CascadingDropDownNameValue("Adams", "Adams"),
            new CascadingDropDownNameValue("Asotin", "Asotin"),
            new CascadingDropDownNameValue("Benton", "Benton"),
            new CascadingDropDownNameValue("Chelan", "Chelan"),
            new CascadingDropDownNameValue("Clallam", "Clallam") };
    }
    else if (knownCategoryValues.Contains("Oregon")) {
        return new CascadingDropDownNameValue[] {
            new CascadingDropDownNameValue("Baker", "Baker"),
            new CascadingDropDownNameValue("Benton", "Benton"),
            new CascadingDropDownNameValue("Clackamas", "Clackamas"),
            new CascadingDropDownNameValue("Clatsop", "Clatsop"),
            new CascadingDropDownNameValue("Columbia", "Columbia") };
    }
    else {
        return null;
    }
}

</script>
    <title>CascadingDropDown</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager" />
    <div>
    <asp:DropDownList runat="server" ID="ddl1" Width="200" /><br />
    <asp:DropDownList runat="server" ID="ddl2" Width="200" /><br />
    <ajaxToolkit:CascadingDropDown runat="server" ID="cdd1"
        TargetControlID="ddl1"
        PromptText="Select a State"
        Category="state" 
        LoadingText="[Loading States]"
        ServiceMethod="GetStates"
    />

    <ajaxToolkit:CascadingDropDown runat="server" ID="cdd2"
        TargetControlID="ddl2"
        ParentControlID="ddl1"
        PromptText="Select County"
        Category="county"
        LoadingText="[Loading Counties]"
        ServiceMethod="GetCounties"
    />
    </div>
    </form>
</body>
</html>