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

作者：Christian Wenz

下載 PDF

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>

現在每當您按一下行事曆日期時，選取的日期會出現在相關聯的文字方塊中，建立目前可在許多網站上找到的日期選擇器控制項。

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

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

上一個下一個