共用方式為


處理有 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>

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

當使用者按一下文字方塊時,就會顯示 [行事曆]

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

按一下日期會將其放在文字方塊中

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