ASP.NET AJAX フレームワークを使用した HTML Map コントロールの拡張

次に、Web メソッドを作成します。

引用スニペットは次のとおりです。
[ウェブメソッド]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
パブリック文字列 GetAreaInfo(文字列エリア)
{
返品エリア。
}

権威ある情報源のアドバイスによると、セキュリティ上の理由から、Web メソッドにアクセスするには通常 HttpPost (または HttpGet= false) を使用します。次に、返されるデータ形式を JSON 形式に設定します (デフォルトのモードは JSON モードです)。

わかりやすくするために、ここでは GetAreaInfo メソッドは入力パラメーターの同じ値を返すだけですが、実際の開発ではデータベースからデータを取得するためにここを置き換える必要があります。

これまでのところ、AJAX を使用してクライアントから呼び出される Web サービスを正常に作成できました。

ただし、以下に示すように、ページ内のサーバー コントロール ScriptManager に対していくつかの適切な構成を行う必要もあります。

以下は引用部分です。
<asp:ScriptManager ID="ScriptManager1" runat="server">
<サービス>
<asp:servicereference path="~/LocationService.asmx" />
</サービス>
</asp:スクリプトマネージャー>

ここでは、ノードの下にサービス参照を追加しただけですが、その役割は何ですか?

生成された HTML ソース コードの分析から、上記の構成により次の内容が生成されます。

以下は参照フラグメントです:

<script src="LocationService .asmx /jsdebug" type="text/javascript"></script>

ここの script タグは、JavaScript ファイル LocationService.asmx/jsdebug を参照します。実際、これは Web サービス プロキシ クラスです。このプロキシ クラスを通じて、クライアントからサーバー側 Web サービスを非同期に呼び出すことができます。

さらに興味深いのは、上記のパスをブラウザにコピーするだけで、実行時に AJAX 環境によって生成された JavaScript ファイルが表示されることです。このファイルにより、スクリプト サービス呼び出しが利用可能になります。プロキシ クラスについては詳しく説明しません。

次に、カスタム クライアント クラスを作成する方法を見てみましょう。

4. クライアント側のカスタム クラスを作成する

ASP.NET AJAX フレームワークの主要な「発明」の 1 つは、オブジェクト指向 JavaScript プログラミング モデルを導入したことであることがわかっています。 JavaScript デザイン パターンの助けを借りて、独自のテンプレートやクラスの作成、継承の概念の追加、インターフェイスや列挙の作成などを簡単に行うことができます。

この記事では、この例で必要なすべての機能をカプセル化するクライアント クラスを開発します。

ここで、プロジェクトを右クリックし、ImageMap という新しい JavaScript ファイルを追加します。このファイルでは、新しい名前空間 MyServices を定義します。この名前空間には、開発するクライアント クラスが含まれます。以下に示すように:

以下は引用の一部です。
Type.registerNamespace("MyServices");

次に、作成するクライアント クラスのコンストラクターを定義します。

リファレンス スニペットは次のとおりです。

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

テンプレートまたはクラス コンストラクターは、通常の JavaScript 関数にすぎません。このコンストラクターには、uiElement と uiBody という 2 つのパラメーターがあります。

両方のパラメータは、ページに表示されるポップアップ ウィンドウを記述するために使用されます。他の 2 つのプライベート変数 _xAxis と _yAxis は、ポップアップ ウィンドウの表示位置を記述するために使用されます。通常、コンストラクター内ですべてのプライベート メンバーを宣言するのが最善です。

次に、プロトタイプ設計パターンを使用して、このクラスのメンバー関数とプロパティを記述します。

参照フラグメントは次のとおりです:

MyServices.Location.prototype =
{
get_uiElement: 関数()
{
this._uiElement を返します。
}、
set_uiElement: 関数(値)
{
this._uiElement = 値;
}、
get_uiBody: 関数()
{
これを返します。_uiBody;
}、
set_uiBody: 関数(値)
{
this._uiBody = 値;
}、

なお、ここでのUI要素の属性メソッドの定義は、.NETにおける各種言語の定義形式と非常に似ています。

次のメンバー関数が私たちの焦点であり、リモート Web サービスの呼び出しを担当します。

以下は参照フラグメントです。
ShowPopupinfo: 関数(イベント, エリア名)
{
MyServices.LocationService.GetAreaInfo(エリア名,
Function.createDelegate(this, this.OnCompleted),
this.OnError, //エラー処理を担当するコールバック関数
this.OnTimeOut); //タイムアウト処理を担当するコールバック関数
this._xAxis = イベント.clientX;
this._yAxis = イベント.clientY;
}

上記のコードは、クライアントから Web サービスを呼び出す非常に一般的な方法を示しています。1

) フォームは、通常のローカル メソッドを呼び出すのとほぼ同じくらい便利です。2

) Function.createDelegate 関数は、ASP.NET AJAX クライアント開発グローバルにおいて非常に重要です。関数。この関数を作成した本来の目的の 1 つは、このキーワードの問題を解決することでした。 DOM 要素によってトリガーされるイベント ハンドラーでは、this キーワードは常にクラス自体ではなく DOM 要素を参照します。ただし、ここでこの関数を使用する理由は、AJAX 環境が Web サービスをトリガーしたのと同じクラス インスタンスで成功したときにコールバック関数を呼び出すためです。これは、クライアント クラスのプロパティとメソッドを参照する必要がある場合に非常に重要です。つまり、この関数を使用すると、Web サービスを呼び出すクライアント クラスのプロパティやメソッドに安全かつ正確にアクセスできるようになります。それ以外の場合、Web サービスの応答は別のコンテキストで実行されるため、非同期呼び出しを行うクライアント クラス インスタンスは null になります。このコンテキストは、非同期 Web 呼び出しリクエストが行われたコンテキストと等価ではなくなります。

3) 興味深いことに、ここでの GetAreaInfo メソッドは、前に作成した Web サービス内のメソッドではなく、実行時に作成された Web サービス プロキシ クラスに属しています。このプロキシ クラスは、サーバー側の ASMX Web サービスにアクセスするためのクライアント プロキシとして機能します。 。

上記の ShowPopupInfo 関数のコードの最後の 2 行では、イベントの入力パラメーターを使用して 2 つのプライベート変数 xAxis と yAxis の値を設定します。ここでの目標は、ユーザーがクリックした場所のできるだけ近くにポップアップを表示することです。

以下は、呼び出しが成功したときの対応するコールバック関数の実装コードです。

以下は参照フラグメントです:

OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody != null)
{
var textNode = uiBody.firstChild;
if (!textNode)
{
textNode = document.createTextNode(結果);
uiBody.appendChild(textNode);
}
それ以外
{
textNode.nodeValue = 結果;
}
if (uiElement != null)
{
uiElement.style.visibility = "可視";
uiElement.style.display = "インライン";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
}、

内容は非常に簡単で、サーバーから返されたデータをポップアップウィンドウの表示内容に設定し、状況に応じてこのウィンドウが表示されるようにするだけです。

クライアント クラスの作成の最後に、クライアントからアクセスできるように、クライアント クラスをクライアント側に登録するように AJAX フレームワークに指示する必要もあります。

引用スニペットは次のとおりです。
MyServices.Location.registerClass("MyServices.Location");

この時点で、クライアント クラス MyServices.Location が正常に作成されました。では、どのように使用するのでしょうか?

まず、ページの読み込み時にクライアント クラスの新しいインスタンスを定義する必要があります。これを行うには、pageLoad 関数でプログラムする必要があります。

引用スニペットは次のとおりです。
変数の場所 = null;
関数 pageLoad(sender, args) {
location = new MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
}

上記のコードは、MyServices.Location クラスの新しいインスタンスを作成するだけです。次に、クライアント クラスのメンバー関数の 1 つを呼び出して、ページ内のポップアップ ウィンドウを非表示にします。 pageLoad 関数でクライアント クラスのインスタンスを作成するのはなぜですか? その理由は、AJAX 環境制御フローが pageLoad 関数に到達すると、すべての AJAX クライアントとユーザー定義の JavaScript コードが正常にロードされるためです。したがって、現時点では、ユーザーまたはシステム定義の JavaScript コードに安全にアクセスできます。

他のいくつかのツール機能は比較的単純なので、ここでは詳しく説明しません。

5. まとめ

この記事では、AJAX サービスを作成し、独自のカスタム クライアント クラスを作成して、HTML Map コントロールを拡張する方法を説明しました。拡張されたコントロールでは、画像内の特定の領域をクリックすると、Web ページ全体を更新することなく、新しい AJAX メソッドを通じて関連する詳細情報を提供できます。ほとんどの Web アプリケーションではこの Map コントロールを使用することはほとんどありません (おそらくこのため、VS2005 ツールバーから省略されています) が、大量の画像、画像、地図操作に関連する Web アプリケーションを開発する場合、AJAX 変換後の Map はこの記事に基づくと、コントロールは間違いなく Web アプリケーションをよりカラフルにします。

【別紙】本記事のソースコードデバッグ環境：Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0。