ポップアップ コントロールからポストバックを処理する (UpdatePanel あり) (C#)
作成者: Christian Wenz
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 void c1_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
pce.Commit((sender as Calendar).SelectedDate.ToShortDateString());
}
</script>
予定表の日付をクリックするたびに、選択した日付が関連付けられたテキスト ボックスに表示され、現在多くの Web サイトに見られる日付の選択コントロールが作成されます。
ユーザーがテキスト ボックスをクリックするとカレンダーが表示される (クリックするとフルサイズの画像が表示されます)
日付をクリックするとその日付がテキスト ボックス内に入力される (クリックするとフルサイズの画像が表示されます)
