處理沒有 UpdatePanel 的快顯視窗控制項回傳 (VB)

作者：Christian Wenz

下載 PDF

AJAX Control Toolkit 中的 PopupControl 擴充項提供在啟用任何其他控制項時觸發快顯視窗的簡單方式。 當回傳發生在這類型的面板中，且頁面上有許多面板時，往往很難判斷哪個面板遭到點選。

概觀

AJAX Control Toolkit 中的 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 Sub c1_SelectionChanged(sender As object, e As EventArgs)
 Dim id As String = tbHidden.Value
 If (id = "tbDeparture" Or id = "tbReturn")
 Dim tb As TextBox = CType(FindControl(id), TextBox)
 tb.Text = CType(sender, Calendar).SelectedDate.ToShortDateString()
 End If
 End Sub
</script>

當使用者按一下文字方塊時，就會顯示 [行事曆] (按一下以檢視完整大小的影像)

按一下日期會將它放在文字方塊中 (按一下以檢視完整大小的影像)