JavaScript から WebMethod を呼び出す方法

開発 ASP.NET Ajax Tips

この記事では、 ASP.NET 2.0 AJAX Extensions を使用して「JavaScript から WebMethod を呼び出す方法」について説明します。 *1

WebService の作成

まず、 WebService を作成します。 Visual Studio の「新しい項目の追加」から「Web サービス」を選択し、「Sample.asmx」を作成してください。このサンプル記事では、ウィザードによって作成された HelloWorld() を以下のように修正します。

using System;
using System.Web.Script.Services;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService()]
public class Sample : System.Web.Services.WebService
{
    [WebMethod]
    public string GetSample(string name)
    {
        return "Hello World: " + name;
    }
}

HelloWorld() の名称を GetSample(string name) とし、引数をとるように変更しました。また、 ScriptService 属性 (System.Web.Script.Services 名前空間) をクラスの属性として追加しました。 JavaScript から WebMethod を呼び出すには、 ScriptService 属性 が必要になります。

ToolkitScriptManager の設定 (Sample.asmx を参照する)

ToolkitScriptManager の Services を以下のように設定します。 Path 属性は、各自の環境で作成した Sample.asmx を指すように変更します。

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManagerMain" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebService/Sample.asmx" />
    </Services>
</ajaxToolkit:ToolkitScriptManager>

以上で、 JavaScript から WebService を呼び出す準備が完了しました。

JavaScript の記述

// ボタンクリック時に、非同期で GetSample() を呼び出す
function OnSampleButtonClick()
{
    // GetSample() は引数を 1 つとるため、 "yamada" は GetSample() に渡されます。
    // (以下で指定した引数の頭から順に、作成した WebMethod の引数分だけ渡されます。)
    Sample.GetSample("yamada", onComplete, onError, "spanResult");
}

// GetSample() の呼び出しが成功した場合
function onComplete(result, context)
{
    $get(context).innerText = result;
}

// GetSample() の呼び出しが失敗した場合
function onError(error)
{
    alert(error.get_message());
}

呼び出し元のボタンと span 要素は以下のようになります。ボタンをクリックすることで OnSampleButtonClick() が呼び出され、span 要素に結果が書き込まれます。

<asp:Button ID="ButtonSample" runat="server" Text="GetSample" OnClientClick="OnSampleButtonClick(); return false;" /> <span id="spanResult"></span>

参考文献

以上、 JavaScript から WebMethod を呼び出す基本的な方法について説明しました。より詳しい内容を知りたい場合、以下のサイトを確認してください。

*1:ASP.NET と JavaScript に関する基本的な知識は有しているものとします。