ASP.NET で Ajax 対応 WCF サービスを利用する

先日の記事では WCF サービスの利用方法を紹介しました。今回は Ajax 対応 WCF の利用方法を紹介します。


WebSite を用意し、ソリューションエクスプローラーから Web サイト名を右クリックします。「追加」→「新しい項目の追加」と進み、Visual Studio のテンプレートを表示します。一覧から WCF サービスを追加します。名前は「Service.svc」としています。

「Service.svc」を追加すると、自動的に「App_Code」フォルダ及びフォルダ内に「Service.cs」も生成されます。ここで生成された「Service.cs」の内部にサービスのロジックを実装していきます。


Service.cs

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
 // HTTP GET を使用するために [WebGet] 属性を追加します (既定の ResponseFormat は WebMessageFormat.Json)。
 // XML を返す操作を作成するには、
 //     [WebGet(ResponseFormat=WebMessageFormat.Xml)] を追加し、
 //     操作本文に次の行を含めます。
 //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
 [OperationContract]
 public void DoWork()
 {
    // 操作の実装をここに追加してください
    return;
 }

 // 追加の操作をここに追加して、[OperationContract] とマークしてください
    
 // 下記２つの関数を追加
 [OperationContract]
 public string DoMyWork()
 {
    // 文字列を返す関数
    return "DidMyWork";
 }

 [OperationContract]
 public int DoMyWorkWithParam(int number)
 {
    // 計算結果を返す関数
    return number * 50;
 }
}

続いて Form 上に ScriptManager と HTML Button を配置します。

<form id="form1" runat="server">
<div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <input id="Button1" type="button" value="button" />

</div>
</form>

Ajax WCF サービスは ScriptManager と連携して動作します。ScriptManager の Services コレクションに、先ほど作成した Service.svc を登録します。

ASPX のソースコードはこうなります。

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="Service.svc" />
    </Services>
</asp:ScriptManager>

ここまでで WCF Ajax サービスの下準備が整いました。最後に HTML Button のクリックイベントに関数を登録し、非同期通信でサービスの呼び出しと結果を受け取ります。

<input id="Button1" type="button" value="button" onclick="callService()" />

登録した関数内に、サービスを呼び出す実装をします。

<script type="text/javascript">
    function callService()
    {
        var service = new Service();
        service.DoMyWork(onSuccess, null, null);
        service.DoMyWorkWithParam(30, onSuccess, null, null)
    }

    function onSuccess(result) {
        alert(result);
    }
</script>

実行結果
ボタンをクリックすると、非同期通信でサービスから取得した値がダイアログ内に表示されます。すごく地味(^_^;)























サンプルは下記よりダウンロードできます。
WCF_Ajax.zip