AJAXControlToolKit控件入门实例之PopupControl

来源：互联网发布：网页美工面试问题编辑：程序博客网时间：2024/05/20 03:45

选认识一下它的基本属性:

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"    TargetControlID="DateTextBox"    PopupControlID="Panel1"    Position="Bottom" />

TargetControlID - The ID of the control to attach to
PopupControlID - The ID of the control to display
Position - Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupControl.aspx.cs" Inherits="PopupControl" %>
<%@ 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>无标题页</title>
    <style type="text/css">
    /*Popup Control*/
.popupControl{
background-color:White;
position:absolute;
visibility:hidden;
}

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    <div class="demoarea">
        <div class="demoheading">PopupControl Demonstration</div>

        Enter date for new reminder:
        <asp:TextBox ID="DateTextBox" runat="server" Width="80" autocomplete="off" /><br /><br />
        <asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                   <center>
                        <asp:Calendar ID="Calendar1" runat="server" Width="179px" DayNameFormat="Shortest"
                            BackColor="White" BorderColor="#999999" CellPadding="1" Font-Names="Verdana"
                            Font-Size="8pt" ForeColor="Black" OnSelectionChanged="Calendar1_SelectionChanged" Height="172px">
                                <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
                                <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                                <SelectorStyle BackColor="#CCCCCC" />
                                <WeekendDayStyle BackColor="#FFFFCC" />
                                <OtherMonthDayStyle ForeColor="Gray" />
                                <NextPrevStyle VerticalAlign="Bottom" />
                                <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
                                <TitleStyle BackColor="#999999" Font-Size="7pt" BorderColor="Black" Font-Bold="True" />
                        </asp:Calendar>
                    </center>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
            TargetControlID="DateTextBox"
            PopupControlID="Panel1"
            Position="Bottom" />

        Reminder message:
        <asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" /><br /><br />
        <asp:Panel ID="Panel2" runat="server" CssClass="popupControl">
            <div style="border: 1px outset white; width: 100px">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Text="Walk dog" />
                                <asp:ListItem Text="Feed dog" />
                                <asp:ListItem Text="Feed cat" />
                                <asp:ListItem Text="Feed fish" />
                                <asp:ListItem Text="Cancel" Value="" />
                        </asp:RadioButtonList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </asp:Panel>
        <ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"
            TargetControlID="MessageTextBox"
            PopupControlID="Panel2"
            CommitProperty="value"
            Position="Bottom"
            CommitScript="e.value += ' - do not forget!';" />

        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
                <asp:Button ID="ReminderButton" runat="server" Text="Add reminder" OnClick="ReminderButton_Click" />
                <br /><br />
                <asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div class="demobottom"></div>
    </div>
    </form>
</body>
</html>

后台代码:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class PopupControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

    }
    /// <summary>
    /// Handler for the "add reminder" button
    /// </summary>
    /// <param name="sender">source</param>
    /// <param name="e">arguments</param>
    protected void ReminderButton_Click(object sender, EventArgs e)
    {
        string text;
        try
        {
            text = string.Format("A reminder would have been created for {0} with the message /"{1}/"",
                DateTime.Parse(DateTextBox.Text).ToLongDateString(), MessageTextBox.Text);
        }
        catch (FormatException ex)
        {
            text = string.Format("[Unable to parse /"{0}/": {1}]", DateTextBox.Text, ex.Message);
        }
        Label1.Text = HttpUtility.HtmlEncode(text);
    }

    /// <summary>
    /// Handler for calendar changes
    /// </summary>
    /// <param name="sender">source</param>
    /// <param name="e">arguments</param>
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        // Popup result is the selected date
        PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
    }

    /// <summary>
    /// Handler for radio button changes
    /// </summary>
    /// <param name="sender">source</param>
    /// <param name="e">arguments</param>
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
        {
            // Popup result is the selected task
            PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
        }
        else
        {
            // Cancel the popup
            PopupControlExtender2.Cancel();
        }
        // Reset the selected item
        RadioButtonList1.ClearSelection();

}
}