ASP.NETのウェブサービスをJavaScriptから呼び出す - ASP.NET

ASP.NETのウェブサービスをJavaScriptから呼び出す方法を紹介します。

手順

プロジェクト作成の手順を紹介します。

Visual Studio 2010を起動し、[ファイル]>[新規作成]>[プロジェクト]メニューを選択します。[新しいプロジェクト]ダイアログが表示されます。プロジェクトの種類から[ASP.NET 空の Web アプリケーション]を選択し、プロジェクト名をダイアログ下部の[名前]欄のテキストボックスに入力します。今回は、[WebServiceCallJS]としました。入力ができたら[OK]ボタンをクリックします。

空のプロジェクトが作成されました。次に、Webサービスを作成します。[ソリューションエクスプローラー]のプロジェクトノードを選択し、右クリックしてポップアップメニューを表示します。ポップアップメニューの[追加]メニューの[新しい項目]メニューをクリックします。[新しい項目の追加]ダイアログボックスが表示されますので、[Web サービス]を選択します。[名前]のテキストボックス欄にWebサービス名を入力します。今回は[WebServiceSample.asmx]としました。

Webサービスが追加されました。

次に、呼び出し側のWebフォームを作成します。先ほどと同様にソリューションエクスプローラから新しい項目を追加します。[新しい項目の追加]ダイアログボックスから[Web フォーム]を選択します。[名前]のテキストボックス欄にWebフォーム名を入力します。今回は[call.aspx]としました。

Webフォームが作成されました。ツールボックスから[ScriptManager]コンポーネントを選択し、作成されたWebフォームにドラッグ＆ドロップします。下図はWebフォームにScriptManagerコンポーネントが追加された状態の画面です。

Webフォームに追加した、ScriptManagerをクリックして選択します。右側のプロパティウィンドウのServicesプロパティの右側の[...]ボタン(参照ボタン)をクリックします。

参照ボタンをクリックすると、[ServiceReference コレクションエディター]のダイアログが表示されます。ダイアログの左下にある[追加]ボタンをクリックします。

メンバーの欄にサービスの参照アイテムが追加されます。アイテムを選択し右側の[Path]に参照したいWebサービスのパスを入力します。今回は[WebServiceSample.asmx]を入力しました。

Webサービス(WebServiceSample.asmx)、Webフォーム(call.aspx)を実行します。コードは以下になります。

コード

WebServiceSample.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebServiceCallJS
{
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.ComponentModel.ToolboxItem(false)]

  [System.Web.Script.Services.ScriptService]
  public class WebServiceSample : System.Web.Services.WebService
  {
    [WebMethod]
    public int Add(int a, int b)
    {
      return a + b;
    }

    [WebMethod]
    public string HelloWorld()
    {
      return "Hello World";
    }
  }
}

解説

[System.Web.Script.Services.ScriptService]

JavaScriptからWebサービスを呼び出すため、上記の行をクラス宣言の前の行に追加します。(Visual StudioでWebサービスを作成した場合はコメントアウトされているので、コメントをはずして有効にします。)

[WebMethod]
public int Add(int a, int b)
{
return a + b;
}

Webサービスのメソッド(Webメソッド)を実装します。今回は引数の和を返すシンプルなWebメソッドを実装しました。

call.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="call.aspx.cs" 
  Inherits="WebServiceCallJS.call" %>

<!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></title>
    <script type="text/javascript" language="javascript">
        function onButtonClick() {
            WebServiceCallJS.WebServiceSample.Add(2, 5, AddSuccess, null, null);
        }

        function AddSuccess(result) {
            target = document.getElementById("output");
            target.innerHTML = result;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="Exec" onclick="onButtonClick();" />
    </div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="WebServiceSample.asmx" />
        </Services>
    </asp:ScriptManager>
    </form>
    <div id="output"></div>

</body>
</html>

解説

<script type="text/javascript" language="javascript">
  function onButtonClick() {
    WebServiceCallJS.WebServiceSample.Add(2, 5, AddSuccess, null, null);
  }
  function AddSuccess(result) {
    target = document.getElementById("output");
    target.innerHTML = result;
  }
</script>

上記の部分が、Webサービス呼び出しの関数と結果を受け取る関数になります。Webフォームの[Exec]ボタンがクリックされると、onButtonClick()関数が呼び出されます。関数内の

WebServiceCallJS.WebServiceSample.Add(2, 5, AddSuccess, null, null);

にて、Webサービスのメソッドが呼び出されます。書式は、

(プロジェクト名).(Webサービス名).メソッド名(引数,...);

となります。

メソッド呼び出し結果はメソッド呼び出し時に指定したAddSuccess()関数で取得します。呼び出したWebメソッドの実行が完了すると、非同期でAddSuccess()関数が呼び出されます。関数の引数resultにWebメソッドの結果が入っています。
AddSuccess()関数内の

target = document.getElementById("output");
target.innerHTML = result;

にて、結果を画面に出力しています。