使用没有 UpdatePanel 的弹出控件处理回发 (C#)

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的 PopupControl 扩展程序提供了一种在激活任何其他控件时触发弹出窗口的简单方法。 当此类面板中发生回发并且页面上有多个面板时，很难确定单击了哪个面板。

概述

AJAX 控件工具包中的 PopupControl 扩展程序提供了一种在激活任何其他控件时触发弹出窗口的简单方法。 当此类面板中发生回发并且页面上有多个面板时，很难确定单击了哪个面板。

步骤

当使用 PopupControl 具有回发，但页面上没有 UpdatePanel 时，Control Toolkit 不提供一种方法来确定哪个客户端元素触发了导致回发的弹出窗口。 但是，一个小技巧为这种情况提供了一种解决方法。

首先，下面是基本设置：两个文本框，它们都触发相同的弹出窗口，一个日历。 两个 PopupControlExtenders 将文本框和弹出窗口组合在一起。

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
 </div>
 <asp:Panel ID="pnlCalendar" runat="server">
 <asp:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
 </asp:Panel>
 <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
 <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
</form>

基本思路是在元素中添加隐藏的窗体字段， <form> 该元素包含启动弹出窗口的文本框：

<input type="hidden" id="tbHidden" runat="server" />

加载页面时，JavaScript 代码会将事件处理程序添加到这两个文本框：每当用户单击文本框时，其名称将写入隐藏的窗体字段：

<script type="text/javascript">
 function pageLoad()
 {
 $get("tbDeparture").onclick = saveTextBox;
 $get("tbReturn").onclick = saveTextBox;
 }
 function saveTextBox()
 {
 $get("tbHidden").value = this.id;
 }
</script>

在服务器端代码中，必须读取隐藏字段的值。 由于隐藏的窗体字段很难操作，因此需要安全列表方法来验证隐藏值。 确定正确的文本框后，日历中的日期将写入其中。

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 string id = tbHidden.Value;
 if (id == "tbDeparture" || id == "tbReturn")
 {
 TextBox tb = (TextBox)FindControl(id);
 tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
 }
 }
</script>

当用户单击文本框 (单击以查看全尺寸图像)

单击日期将其置于文本框中 (单击以查看全尺寸图像)

上一页下一页