複合型を使用した AJAX サービスのサンプル

  • [アーティクル]

ComplexTypeAjaxService のサンプルでは、Windows Communication Foundation (WCF) を使用して、複合型のインスタンスを作成し、それらをサービスとクライアント間で JSON (JavaScript Object Notation) として送信する ASP.NET AJAX (Asynchronous JavaScript and XML) サービスを作成する方法を示します。 AJAX サービスには、Web ブラウザー クライアントから JavaScript コードを使用してアクセスできます。 このサンプルは、「基本的な AJAX サービス」のサンプルに基づいています。

WCF での AJAX サポートは、ScriptManager コントロールを介して ASP.NET AJAX と共に使用できるように最適化されています。 ASP.NET AJAX と共に WCF を使用する例については、AJAX のサンプルをご覧ください。

Note

このサンプルのセットアップ手順とビルド手順については、このトピックの最後を参照してください。

次に示すサンプルのサービスは、AJAX 固有のコードを持たない WCF サービスです。 WebGetAttribute 属性は適用されないため、既定の HTTP 動詞 ("POST") が使用されます。 サービスには 1 つの DoMath 操作があります。この操作は、MathResult という名前の複合型を返します。 複合型は標準のデータ コントラクト型で、AJAX 固有のコードも含まれていません。

[DataContract]
public class MathResult
{
    [DataMember]
    public double sum;
    [DataMember]
    public double difference;
    [DataMember]
    public double product;
    [DataMember]
    public double quotient;
}

基本的な AJAX サービスのサンプルの場合と同様に、WebScriptServiceHostFactory を使用してサービスに AJAX エンドポイントを作成します。

クライアント Web ページ ComplexTypeClientPage.aspx には、ユーザーがページの [Perform calculation] ボタンをクリックしたときにサービスを呼び出す ASP.NET および JavaScript コードが含まれています。 サービスを呼び出すコードでは、「HTTP POST を使用する AJAX サービス」のサンプルと同じように、JSON 本文を作成し、HTTP POST を使用してそれを送信します。

サービス呼び出しに成功したら、生成された JavaScript オブジェクトのそれぞれのデータ メンバー (sum、difference、product、および quotient) にアクセスできます。

function onSuccess(mathResult){
     document.getElementById("sum").value = mathResult.sum;
     document.getElementById("difference").value = mathResult.difference;
     document.getElementById("product").value = mathResult.product;
     document.getElementById("quotient").value = mathResult.quotient;
}

サンプルをセットアップ、ビルド、および実行するには

  1. Windows Communication Foundation サンプルの 1 回限りのセットアップの手順を実行したことを確認します。

  2. 「Windows Communication Foundation サンプルのビルド」の説明に従って、ソリューション ComplexTypeAjaxService.sln をビルドします。

  3. http://localhost/ServiceModelSamples/ComplexTypeClientPage.aspx に移動します (プロジェクト ディレクトリからブラウザーで ComplexTypeClientPage.aspx を開かないでください)。

関連項目