ポップアップ コントロールからポストバックを処理する (UpdatePanel なし) (C#)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の PopupControl エクステンダーは、他のコントロールがアクティブになったときにポップアップをトリガーする簡単な方法を提供します。 ポストバックがこのようなパネルで発生し、ページ上に複数のパネルがある場合、どのパネルがクリックされたかを判断するのは困難です。

概要

AJAX Control Toolkit の PopupControl エクステンダーは、他のコントロールがアクティブになったときにポップアップをトリガーする簡単な方法を提供します。 ポストバックがこのようなパネルで発生し、ページ上に複数のパネルがある場合、どのパネルがクリックされたかを判断するのは困難です。

手順

ポストバックで を PopupControl 使用するが、ページに が UpdatePanel 存在しない場合、Control Toolkit は、どのクライアント要素がポップアップをトリガーしたかを判断する方法を提供しません。これによりポストバックが発生しました。 ただし、小さなトリックは、このシナリオの回避策を提供します。

まず、基本的なセットアップは次のとおりです。両方とも同じポップアップ、カレンダーをトリガーする2つのテキストボックスです。 2 つの PopupControlExtenders テキスト ボックスとポップアップを一緒に表示します。

<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:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
 </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>

基本的な考え方は、ポップアップを起動したテキスト ボックスを <form> 保持する要素に非表示のフォーム フィールドを追加することです。

<input type="hidden" id="tbHidden" runat="server" />

ページが読み込まれると、JavaScript コードは両方のテキスト ボックスにイベント ハンドラーを追加します。ユーザーがテキスト ボックスをクリックするたびに、その名前が非表示のフォーム フィールドに書き込まれます。

<script type="text/javascript">
 function pageLoad()
 {
 $get("tbDeparture").onclick = saveTextBox;
 $get("tbReturn").onclick = saveTextBox;
 }
 function saveTextBox()
 {
 $get("tbHidden").value = this.id;
 }
</script>

サーバー側コードでは、非表示フィールドの値を読み取る必要があります。 非表示のフォーム フィールドは操作が簡単であるため、非表示の値を検証するためのセーフリストアプローチが必要です。 正しいテキスト ボックスが特定されると、カレンダーの日付が書き込まれます。

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 string id = tbHidden.Value;
 if (id == "tbDeparture" || id == "tbReturn")
 {
 TextBox tb = (TextBox)FindControl(id);
 tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
 }
 }
</script>

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

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

前へ次へ