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] とマークしてください

// 下記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

コメント

タイトルとURLをコピーしました