ポップアップ コントロールからポストバックを処理する (UpdatePanel あり) (VB)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の PopupControl エクステンダー コントロールを使用して、他のコントロールがアクティブになったときのポップアップのトリガーを簡単に行えます。 このようなポップアップ内でポストバックが発生した場合は、特別な注意が必要です。

概要

AJAX Control Toolkit の PopupControl エクステンダー コントロールを使用して、他のコントロールがアクティブになったときのポップアップのトリガーを簡単に行えます。 このようなポップアップ内でポストバックが発生した場合は、特別な注意が必要です。

手順

ポストバックで PopupControl を使用すると、UpdatePanel がポストバックによってページが更新されないようにすることができます。 次のマークアップは、いくつかの重要な要素を定義します。

  • ASP.NET AJAX Control Toolkit が動作する ScriptManager コントロール
  • 両方ともポップアップをトリガーする 2 つの TextBox コントロール
  • ポップアップとして機能する Panel コントロール
  • パネル内で、Calendar コントロールが UpdatePanel コントロール内に埋め込まれます
  • パネルをテキスト ボックスに割り当てる 2 つの 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 のプロキシ オブジェクトを生成する必要があります。 ASP.NET AJAX Control Toolkit で、GetProxyForCurrentPopup() メソッドが提供されます。 このメソッドが返すオブジェクトは、(メソッド呼び出しをトリガーしたコントロールではなく) ポップアップをトリガーしたコントロールに値を戻す Commit() メソッドをサポートします。 次のコードは、選択した日付を Commit() メソッドの引数として提供し、選択した日付をテキスト ボックスに書き戻します。

<script runat="server">
 Protected Sub c1_SelectionChanged(sender As object, e As EventArgs)
 Dim pce As PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
 pce.Commit(CType(sender, Calendar).SelectedDate.ToShortDateString())
 End Sub
</script>

予定表の日付をクリックするたびに、選択した日付が関連付けられたテキスト ボックスに表示され、現在多くの Web サイトに見られる日付の選択コントロールが作成されます。

ユーザーがテキスト ボックスの中をクリックすると Calendar が表示される

ユーザーがテキスト ボックスをクリックするとカレンダーが表示される (クリックするとフルサイズの画像が表示されます)

日付をクリックすると、その日付がテキスト ボックスに入力される

日付をクリックするとその日付がテキスト ボックス内に入力される (クリックするとフルサイズの画像が表示されます)

前へ次へ