PopupControl扩展器控件可以附加到任何控件之上,当用户点击该控件时,将弹出一个预先指定好的、显示附加信息或用来帮助用户执行某些设定的Panel。当该控件失去输入焦点之后,Panel将自动消失,且用户在其中进行的配置将被设定到扩展器的目标控件之上。
示例运行代码:

图(1)

图(2)

图(3)
PopupControlDemo.aspx代码示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupControlDemo.aspx.cs" Inherits="Chapter09_PopupControlDemo" %>

<!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>PopupControl Demo</title>
<link href="styleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*Popup Control*/
.popupControl
{
background-color:White;
position:absolute;
visibility:hidden;
}
</style>
</head>
<body>
<form id="PopupControlForm" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<div class="demoheading">PopupControl Demonstration</div>
Enter date for new reminder:
<asp:TextBox ID="DateTextBox" runat="server" Width="150" /><br /><br />
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<center>
<asp:Calendar ID="Calendar1" runat="server" Width="200px" DayNameFormat="Shortest"
BackColor="White" BorderColor="#999999" CellPadding="4" Font-Names="Verdana"
Font-Size="8pt" ForeColor="Black" Height="180px" OnSelectionChanged="Calendar1_SelectionChanged">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
</center>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
TargetControlID="DateTextBox"
PopupControlID="Panel1"
Position="bottom" />
Reminder message:
<asp:TextBox ID="MessageTextBox" runat="server" Width="200" /><br /><br />
<asp:Panel ID="Panel2" runat="server" CssClass="popupControl">
<div style="border:1px outset white;width:100px">
<asp:UpdatePanel ID="up2" 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="pce2" runat="server"
TargetControlID="MessageTextBox"
PopupControlID="Panel2"
CommitProperty="value"
Position="Bottom"
CommitScript="e.value += ' - do not forget!';" />
<!--
TargetControlID:该扩展器目标控件的ID,即用户鼠标点击之后显示弹出面板的控件的ID
PpoupControlID:作为弹出面板的Panel的ID
Position:弹出面板与目标控件位置的相对关系,可选Bottom(底部)、Center(中心)、Left(左边)、Right(右边)或Top(顶部)
OffsetX:基于Position设定,弹出面板与目标控件在X方向的额外偏移量,单位为像素(px)
OffsetY:基于Position设定,弹出面板与目标控件在Y方向的额外偏移量,单位为像素(px)
CommitProperty:目标控件的一个HTML属性,例如TextBox的value、Label的innerHTML等。用户在弹出面板内作出的选择值
将通过该扩展器控件的Commit()方法设定到目标控件的该属性上。该属性的默认值会自动选择目标控件的
默认属性
CommitScript:在设置万CommitProperty属性之后,附加执行的一段JavaScript脚本,可用来对刚刚的设定值进行修饰等操作
-->
<asp:UpdatePanel ID="up3" runat="server">
<ContentTemplate>
<asp:Button ID="ReminderButton" runat="server" Text="Add reminder" OnClick="ReminderButton_Click" />
<br /><br />
<asp:Label ID="lblResutl" runat="server" Text="[No response provided yet]" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
PopupControlDemo.aspx.cs代码示例
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 Chapter09_PopupControlDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
pce1.Commit(Calendar1.SelectedDate.ToShortDateString());
}

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
{
pce2.Commit(RadioButtonList1.SelectedValue);
}
else
{
pce2.Cancel();
}

RadioButtonList1.ClearSelection();
}

protected void ReminderButton_Click(object sender, EventArgs e)
{
string text;
try
{
text = string.Format("A reminder would been created for {0} with the message "{1}"",
DateTime.Parse(DateTextBox.Text).ToShortDateString(), MessageTextBox.Text);
}
catch (FormatException ex)
{
text = string.Format("[Unable to parse "{0}": {1}]", DateTextBox.Text, ex.Message);
}

lblResutl.Text = HttpUtility.HtmlEncode(text);
}

}
示例运行代码:
图(1)
图(2)
图(3)
PopupControlDemo.aspx代码示例


































































































PopupControlDemo.aspx.cs代码示例






















































