サーバー コードからモーダル ポップアップ ウィンドウを起動する (C#)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の ModalPopup コントロールは、クライアント側の手段を使用してモーダル ポップアップを作成する簡単な方法を提供します。 ただし、一部のシナリオでは、モーダル ポップアップの開きがサーバー側でトリガーされる必要があります。

概要

AJAX Control Toolkit の ModalPopup コントロールは、クライアント側の手段を使用してモーダル ポップアップを作成する簡単な方法を提供します。 ただし、一部のシナリオでは、モーダル ポップアップの開きがサーバー側でトリガーされる必要があります。

手順

まず、ModalPopup コントロールの動作を示すために、ASP.NET Button Web コントロールが必要です。 新しいページのフォーム>要素内に<このようなボタンを追加します。

<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />

次に、作成するポップアップのマークアップが必要です。 コントロールとして <asp:Panel> 定義し、ボタン コントロールが含まれていることを確認します。 ModalPopup コントロールは、このようなボタンをポップアップを閉じる機能を提供します。それ以外の場合は、簡単に消失させる方法はありません。

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

次に、ASP.NET AJAX Toolkit から ModalPopup コントロールをページに追加します。 コントロールを読み込むボタンのプロパティ、非表示にするボタン、実際のポップアップの ID を設定します。

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" 
 PopupControlID="ModalPanel" OkControlID="OKButton" />

ASP.NET AJAX に基づくすべての Web ページと同様に。スクリプト マネージャーは、さまざまなターゲット ブラウザーに必要な JavaScript ライブラリを読み込むのに必要です。

<asp:ScriptManager ID="asm" runat="server" />

ブラウザーで例を実行します。 ボタンをクリックすると、モーダル ポップアップが表示されます。 サーバー側コードを使用して同じ効果を実現するには、新しいボタンが必要です。

<asp:Button ID="ServerButton" runat="server" Text="Launch Modal Popup (Server)" 
 OnClick="ServerButton_Click" />

ご覧のように、ボタンをクリックするとポストバックが生成され、サーバー上で メソッドが ServerButton_Click() 実行されます。 このメソッドでは、 と呼ばれる launchModal() JavaScript 関数が正確に実行され、ページが読み込まれると JavaScript 関数が実行されます。

<script runat="server">
 protected void ServerButton_Click(object sender, EventArgs e)
 {
 ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModal();", true);
 }
</script>

の launchModal() ジョブは、ModalPopup を表示することです。 関数は launchModal() 、完全な HTML ページが読み込まれた後に実行されます。 ただし、その時点では、ASP.NET AJAX フレームワークはまだ完全には読み込まれていません。 したがって、この関数は launchModal() 、ModalPopup コントロールを後で表示する必要がある変数を設定するだけです。

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }

pageLoad() JavaScript 関数は、AJAX が完全に読み込まれた後 ASP.NET 実行される特別な関数です。 したがって、この関数にコードを追加して ModalPopup コントロールを表示しますが、以前に呼び出された場合 launchModal() にのみ追加します。

function pageLoad() 
 {
 if (launch) 
 {
 $find("mpe").show();
 }
 }
</script>

関数は $find() 、ページ上で名前付き要素を探しており、サーバー側 ID をパラメーターとして受け取ります。 したがって、 $find("mpe") は ModalPopup コントロールのクライアント表現を返します。その show() メソッドを使用すると、ポップアップが表示されます。

いずれかのボタンをクリックするとモーダル ポップアップが表示されます (フルサイズの画像を表示する場合はクリックします)

次へ