PopupControl:帮助用户输入的面板

最新推荐文章于 2024-08-27 07:48:25 发布

原创最新推荐文章于 2024-08-27 07:48:25 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp #calendar #server #textbox #object #stylesheet

AJAX ASP.NET系列专栏收录该内容

24 篇文章

订阅专栏

PopupControl扩展器在用户点击目标控件时显示一个Panel，提供额外信息或交互，如日期选择或选项列表。当用户失去焦点，Panel会自动关闭并将选择应用到目标控件。示例展示了如何用PopupControl与Calendar和RadioButtonList配合，为日期输入和提醒消息添加交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

<title>PopupControl Demo</title>

/*Popup Control*/

.popupControl

{

background-color:White;

position:absolute;

visibility:hidden;

}

</style>

</head>

<body>

<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">

<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">

</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">

<asp:UpdatePanel ID="up2" runat="server">

<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">

<asp:Button ID="ReminderButton" runat="server" Text="Add reminder" OnClick="ReminderButton_Click" />

<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);

}