ASP.NET AJAXで提供されるAJAX Web サービスブリッジ機能を利用すると、Webサービスやページメソッドのシグネチャからjavascriptからサービスを呼び出すためのプロキシをScriptManagerに作成させることができるので、クライアントスクリプトからのWebサービスを簡単に利用できるようになります。

動作環境

  • サーバ:Visual Studio 2008の組み込みコンテナ
  • クライアント: IE7.0 (サーバとクライアントは同一マシン)
  • 開発環境: Visual Studio 2008 Professional 英語版
  • .NET 3.5

1. プロジェクトの作成

空のソリューションを作成し、ASP.NET Webサイトプロジェクトを新規作成します。

1.1 Webサービスの作成

Webサイトプロジェクトを右クリック→[Add New Item]でAdd New Itemダイアログを表示します。TemplatesにWeb Serviceをセンタｋ水、WebServiceという名前でasmxファイルを新規作成します。asmxの中身を以下のように編集します。

<%@ WebService Language="C#" CodeBehind="~/App_Code/WebService.cs" Class="Test.WebService" %>

 次に、コードビハインドファイルWebService.csを編集します。既定で作成されるソースとの変更点は、以下の3点です。

  • namespaceにTestを設定
  • クラスにScriptServiceAttributeをアノテート
  • サービスメソッドGetDatasにScriptMethodAttributeをアノテート
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
using System.Web.Script.Services;

namespace Test
{
    /// <summary>
    /// Summary description for WebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        public WebService()
        {

            //Uncomment the following line if using designed components 
            //InitializeComponent(); 
        }
        [WebMethod]
        [ScriptMethod]
        public SearchResult GetDatas(string cond1, string cond2)
        {
            SearchResult result = new SearchResult();
            result.Result1 = cond1;
            result.Result2 = cond2;

            return result;
        }
        [Serializable]
        public class SearchResult
        {
            public string Result1 = "";
            public string Result2 = "";
        }
    }
}

1.2 Webフォームの編集

プロジェクトで作成される規定のDefault.aspx以下のように編集します。ScriptManagerの記述でServiceReferenceを設定し、Webサービスのパスを設定します。この設定により、Webサービスを呼び出すためのjavascriptのプロキシを作成してくれるようになります。

処理としてはボタンが押されたときにaction1()メソッドを呼び出します。action1メソッドでAJAX Webサービスを呼び出すプロキシオブジェクトを使用してGetDatasというWebサービスメソッドを呼び出しています。呼び出しが成功するとonSuccessというメソッドがコールバックされるので、結果をLabelに設定しています。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
    function action1(){
        Test.WebService.GetDatas("条件1", "条件2", onSuccess, onFailed);
        
    }
    function onSuccess(results, context, methodName){
        $get("Label1").innerHTML = results.Result1;
        $get("Label2").innerHTML = results.Result2;
    }
    function onFailed(results, context, methodName){
        alert(results.get_Message());
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
    </asp:ScriptManager>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:action1(); return false;"/>
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <asp:Label ID="Label2" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

作成されるjavascriptのプロキシを確認することができます。
Webサービスasmxファイルのパスに/jsを追加したパスがjavascriptのプロキシファイルのパスとなります。asmxファイルへのパスがhttp://localhost/WebSite/WebService.asmxの場合は以下のようになります。 http://localhost:49181/WebSite/WebService.asmx/js

 解説は以上です。指摘、誤り等があればご連絡ください。