PopupControl:帮助用户输入的面板

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

<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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值