使用多個快顯視窗控制項 (C#)

by Christian Wenz

下載 PDF

AJAX Control Toolkit 中的 PopupControl 擴充項提供在啟用任何其他控制項時觸發快顯視窗的簡單方式。 您也可以在單一頁面上使用多個快顯視窗控制項。

概觀

AJAX Control Toolkit 中的 PopupControl 擴充項提供在啟用任何其他控制項時觸發快顯視窗的簡單方式。 您也可以在單一頁面上使用多個快顯視窗控制項。

步驟

若要啟用 ASP.NET AJAX 及控制工具組的功能，ScriptManager 控制項必須放置在頁面上的任何位置（但必須在

元素內）：

<asp:ScriptManager ID="asm" runat="server" />

接下來，新增作為快顯視窗的面板。 在目前的案例中，面板包含 Calendar 控制項。 為了避免「行事曆」的回傳所造成的頁面重新整理，面板會放在 UpdatePanel 控制項內：

<asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
</asp:Panel>

此頁面也包含兩個文字方塊。 針對每個文字方塊，一旦啟用文字方塊，就會顯示行事曆快顯視窗。

<div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>

現在，使用 PopupControlExtender 來擴展這兩個文字方塊。 TargetControlID 屬性提供了與擴充程式繫結的控制項的 ID。 PopupControlID 屬性包含快顯面板的識別碼。 在這種情況下，這兩個延伸器顯示相同的面板，但也可以顯示不同的面板。

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

現在每當您在文字欄位中按一下時，就會在欄位下方顯示行事曆，讓您選取日期。 (將選取的日期重新放入文字方塊中，將會涵蓋在不同的教學課程中。)

當使用者按一下文字方塊時，就會顯示行事曆。

當使用者點選文字方塊時，行事曆會顯示出來 (點擊以查看完整大小的圖片)

下一步

  • 上次更新時間：