先日の記事では 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] とマークしてください // 下記2つの関数を追加 [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