功能:
Popupcontrol可以弹出任意类型的控件,不管是在服务器控件还是html控件。就是在某控件获取焦点时弹出另外一个控件,进行一些操作后,隐藏弹出的控件。
属性:
TargetControlID:需要弹出的控件的id
PopupControlID:作为弹出控件的id
Position:弹出控件的位置
OffsetX/OffsetY:弹出控件的位置与默认位置的相对坐标
实例代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Enter date for new reminder:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" Height="180px" Width="200px" OnSelectionChanged="Calendar1_SelectionChanged">
<selecteddaystyle backcolor="#666666" font-bold="True" forecolor="White" />
<selectorstyle backcolor="#CCCCCC" />
<weekenddaystyle backcolor="#FFFFCC" />
<todaydaystyle backcolor="#CCCCCC" forecolor="Black" />
<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>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<br />
<br />
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 runat="server" ID="up2">
<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!';" />
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="Panel1" Position="Right">
</ajaxToolkit:PopupControlExtender>
</form>
</body>
</html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Enter date for new reminder:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" Height="180px" Width="200px" OnSelectionChanged="Calendar1_SelectionChanged">
<selecteddaystyle backcolor="#666666" font-bold="True" forecolor="White" />
<selectorstyle backcolor="#CCCCCC" />
<weekenddaystyle backcolor="#FFFFCC" />
<todaydaystyle backcolor="#CCCCCC" forecolor="Black" />
<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>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<br />
<br />
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 runat="server" ID="up2">
<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!';" />
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="TextBox1" PopupControlID="Panel1" Position="Right">
</ajaxToolkit:PopupControlExtender>
</form>
</body>
</html>
后台 添加点击 Calendar和RadioButtonList的OnSelectedIndexChanged事件。
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
this.TextBox1.Text = this.Calendar1.SelectedDate.ToShortDateString();
PopupControlExtender1.Commit(this.TextBox1.Text);
}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
{
// 这里需要注意,执行选择操作
PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
}
else
{
// 取消操作
PopupControlExtender2.Cancel();
}
}
{
this.TextBox1.Text = this.Calendar1.SelectedDate.ToShortDateString();
PopupControlExtender1.Commit(this.TextBox1.Text);
}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
{
// 这里需要注意,执行选择操作
PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
}
else
{
// 取消操作
PopupControlExtender2.Cancel();
}
}
运行结果: