バージョン

WebDialogWindow クライアント側を表示

始める前に

WebDialogWindow™ コントロールは、ユーザーのアクションに対応して通知を表示できます。WebDialogWindow クライアントサイド オブジェクト モデルを使用し、プロンプトのフィードバックを提供すると同時にユーザーのアクションに応答することができます。たとえば、ユーザーが製品コレクションから売り切れの製品を選択した場合、選択した製品が売り切れであることを顧客に通知するための通知を表示する必要があります。

達成すること

クライアント側オブジェクト モデルを使用して、WebDialogWindow コントロールを表示する方法を学習します。情報を提供するテキストと閉じるボタンを表示するダイアログ ボックスを作成します。エンド ユーザーが WebImageViewer から特定の画像を選択すると、ダイアログ ボックスが表示します。

次の手順を実行します。

  1. 新しい ASP.NET AJAX 対応の Web サイトを作成します。Visual Studio が新しい Web サイトを作成すると、WebForm に ScriptManager のインスタンス（デフォルトで追加された）を配置することを確認します。

  2. アプリケーションで Infragistics Application Styling が有効になっていることを確認します。これの実行方法の詳細は、 web.config ファイルを使用してアプリケーション スタイリングを有効にするを参照してください。

  3. WebImageViewer コントロールを WebForm に追加します。WebImageViewer でいくつかの画像を必要とします。詳細は、 WebImageViewer で開始を参照してください。

  4. フォーム上に WebDialogWindow を配置します。

  5. WebDialogWindow のコンテンツ領域内に HTML テーブルを配置します。

  6. 2 行 1 列しか含まないように HTML テーブルを変更します。

  7. HTML テーブルの一番上の行に ASP.NET Label を配置します。

  8. Label の Text プロパティを "選択した製品は無効です" に設定します。後ほど確認してください。

  9. HTML テーブルの 2 番目の行に HTML Button を配置します。

  10. Value プロパティを "OK" に設定し、ID プロパティを "btnDialogWindow" に設定します。

  11. ソース ビューで、WebDialogWindow コントロール内の HTML テーブルを指定します。

  12. Button の入力を囲む <TD> タグを修正すると、以下のコードの事例と一致します。

HTML の場合:

<td style="vertical-align:middle">
        ...
</td>

  1. HTML ボタンの入力で、onclick プロパティを作成し、"javascript:btnDialogWindow_onClick()" に設定します。詳細なガイドでこの JavaScript 関数を後で定義します。

  2. デザイン ビューで、WebDialogWindow コントロールを選択します。

  3. WebDialogWindow コントロールの  Header プロパティを指定して展開します。Header プロパティの CaptionText プロパティを見つけて "Product Not Available Dialog" に設定します。

  4. WebDialogWindow の InitialLocation プロパティを Centered に設定します。希望する場合、コンテンツと同じ大きさになるようにダイアログをリサイズできます。

  5. アプリケーションが初めて実行する時、WebDialogWindow コントロールを非表示にしたい場合には、 WindowState プロパティを Hidden に設定してください。

  6. WebImageViewer の ImageClick クライアント側イベントを作成します。クライアント側イベントの作成についての詳細は、 「クライアント側イベントの設定」を参照してください。

  7. WebImageViewer の ImageClick イベント内で、選択した画像の URL をテストして WebDialogWindow が表示すべきかどうかを決定することができます。以下のコードの例は、ImageClick イベントを例示します。

注：このコードを修正して、画像の URL で動作するようにする必要があります。

JavaScript の場合:

function WebImageViewer1_ImageClick(sender, imageArgs){
        var imgSelected = imageArgs.getImageItem();
        if(imgSelected.get_imageUrl() == "./images/spikes.jpg")
        {
                var dialog = $find("WebDialogWindow1");
                dialog.show();
        }
}

  1. btnDialogWindow_onClick と呼ばれる関数を作成します。この関数は、ユーザーがダイアログ ボックスで [OK] ボタンを選択するときに呼び出されます。この関数はダイアログ ボックスを非表示にします。以下のコードを使用してダイアログ ボックスを閉じます。

JavaScript の場合:

function btnDialogWindow_onClick(){
        var dialog = $find("WebDialogWindow1");
        dialog.hide();
}

  1. アプリケーションをビルドして実行します。売り切れの製品の画像をクリックすると、ダイアログ ボックスが表示します。[OK] ボタンをクリックして、ダイアログ ボックスを閉じます。

WebDialogWindow Displaying the WebDialogWindow Client Side 01.png
Note
注:

ウェブ プロジェクトではなくウェブ サイトでこのガイドを使用する場合、JavaScript の関数を正しく動作させるために WebDialogWindow の ClientIDMode オプションを Static に設定する必要があります。