處理有 UpdatePanel 的快顯視窗控制項回傳 (C#)
AJAX Control Toolkit 中的 PopupControl 擴充項提供在啟用任何其他控制項時觸發快顯視窗的簡單方式。 在這類快顯視窗內發生回傳時,必須特別小心。
概觀
AJAX Control Toolkit 中的 PopupControl 擴充項提供在啟用任何其他控制項時觸發快顯視窗的簡單方式。 在這類快顯視窗內發生回傳時,必須特別小心。
步驟
搭配回傳使用 PopupControl
時,UpdatePanel
可能會防止回傳所造成的頁面重新整理。 下列標記會定義幾個重要項目:
ScriptManager
控制項讓 ASP.NET AJAX Control Toolkit 運作- 兩個會觸發快顯視窗的
TextBox
控制項 - 將做為快顯視窗的
Panel
控制項 - 在面板中,
Calendar
控制項內嵌在UpdatePanel
控制項內 - 將面板指派給文字方塊的兩個
PopupControlExtender
控制項
<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:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Calendar ID="c1" runat="server"
OnSelectionChanged="c1_SelectionChanged" />
</ContentTemplate>
</asp:UpdatePanel>
</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>
請注意,Calendar
控制項的 OnSelectionChanged
屬性已設定。 因此,當使用者在行事歷內選取日期時就會發生回傳,並執行伺服器端方法 c1_SelectionChanged()
。 在該方法中,必須擷取目前的日期,並寫回文字方塊。
其語法如下:首先,必須為頁面上的 PopupControlExtender
產生 Proxy 物件。 ASP.NET AJAX Control Toolkit 提供 GetProxyForCurrentPopup()
方法。 這個方法傳回的物件支援 Commit()
方法,該方法會將值傳回觸發快顯視窗的控制項 (而不是觸發方法呼叫的控制項!)。 下列程式碼會提供選取的日期做為 Commit()
方法的引數,導致程式碼將選取的日期寫回文字方塊:
<script runat="server">
protected void c1_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
pce.Commit((sender as Calendar).SelectedDate.ToShortDateString());
}
</script>
現在每當您按一下行事曆日期時,選取的日期會出現在相關聯的文字方塊中,建立目前可在許多網站上找到的日期選擇器控制項。
當使用者按一下文字方塊時,就會顯示 [行事曆] (按一下以檢視完整大小的影像)
按一下日期會將它放在文字方塊中 (按一下以檢視完整大小的影像)