UpdatePanel を使用したポップアップコントロールからのポストバックの処理 (C#)

[アーティクル]
07/13/2023

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

概要

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

手順

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

ScriptManager ASP.NET AJAX Control Toolkit が動作するようにするコントロール
両方ともポップアップをトリガーする 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>

コントロールの OnSelectionChanged 属性が設定されていることに Calendar 注意してください。そのため、ユーザーが予定表内の日付を選択すると、ポストバックが発生し、サーバー側のメソッド c1_SelectionChanged() が実行されます。そのメソッド内では、現在の日付を取得し、テキストボックスに書き戻す必要があります。

の構文は次のとおりです。まず、ページ上のの PopupControlExtender プロキシオブジェクトを生成する必要があります。 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>

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