處理沒有 UpdatePanel 的快顯視窗控制項回傳 (C#)
作者 :一個是一個
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>
當使用者按一下文字方塊時,就會顯示 [行事曆], (按一下以檢視大小完整的影像)
按一下日期會將它放在文字方塊中, (按一下即可檢視大小完整的影像)
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應