複数のポップアップ コントロールを使用する (VB)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の PopupControl エクステンダーは、他のコントロールがアクティブになったときにポップアップをトリガーする簡単な方法を提供します。 また、1 つのページで複数のポップアップ コントロールを使用することもできます。

概要

AJAX Control Toolkit の PopupControl エクステンダーは、他のコントロールがアクティブになったときにポップアップをトリガーする簡単な方法を提供します。 また、1 つのページで複数のポップアップ コントロールを使用することもできます。

手順

ASP.NET AJAX と Control Toolkit の機能をアクティブにするには、コントロールを ScriptManager ページ上の任意の場所 (ただし、 要素内) に配置する <form> 必要があります。

<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>

ページには、2 つのテキスト ボックスも含まれています。 テキスト ボックスごとに、テキスト ボックスがアクティブになると、予定表ポップアップが表示されます。

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

次に、2 つのテキスト ボックスのそれぞれを で PopupControlExtender拡張します。 属性は TargetControlID 、エクステンダーに関連付けられているコントロールの ID を提供します。 属性には PopupControlID 、ポップアップ パネルの ID が含まれています。 この場合、両方のエクステンダーは同じパネルを表示しますが、異なるパネルも可能です。

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

テキスト フィールド内をクリックするたびに、フィールドの下に予定表が表示され、日付を選択できます。 (選択した日付をテキスト ボックスに戻す方法については、別のチュートリアルで説明します)。

[予定表] は、ユーザーがテキスト ボックスをクリックしたときに表示されます (フルサイズの画像を表示する場合にクリックします)

前へ次へ