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

作者 ：一個是一個

下載 PDF

AJAX 控制項工具組中的 PopupControl 擴充器提供一種簡單的方式，可在啟動任何其他控制項時觸發快顯。 在這類快顯內發生回傳時，必須特別小心。

概觀

AJAX 控制項工具組中的 PopupControl 擴充器提供一種簡單的方式，可在啟動任何其他控制項時觸發快顯。 在這類快顯內發生回傳時，必須特別小心。

步驟

搭配回傳使用 PopupControl 時， UpdatePanel 可能會防止由回傳所造成的頁面重新整理。 下列標記會定義幾個重要元素：

• 控制項 ScriptManager ，讓 ASP.NET AJAX 控制項工具組運作
• 兩 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>

請注意， OnSelectionChanged 已設定 控制項的 Calendar 屬性。 因此，當使用者在行事曆內選取日期時，就會發生回傳，並執行伺服器端方法 c1_SelectionChanged() 。 在該方法中，必須擷取目前的日期，並寫回文字方塊。

的語法如下：首先，必須產生頁面上 的 Proxy 物件 PopupControlExtender 。 AJAX Control Toolkit ASP.NET 提供 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>

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

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

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

上一個下一個