2007-10-16

ScriptManager と ToolkitScriptManager

開発 ASP.NET Ajax Memo

ASP.NET で Ajax を使用する場合は ScriptManager をページ内に設置しますが、 Ajax Control Toolkit を採用している場合は ToolkitScriptManager が利用できます。 ScriptManager と ToolkitScriptManager で基本的な機能は同等ですが、多数の js ファイルが読み込まれる場合、 ToolkitScriptManager の性能の方が良いようです。

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManagerMain" runat="server">
</ajaxToolkit:ToolkitScriptManager>

どちらを使用しても OK ですが、検証した範囲内で特に問題はなさそうなので ToolkitScriptManager を使用しています。

2007-10-16

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 に関する基本的な知識は有しているものとします。

2007-10-16

ページ内の WebMethod (PageMethod) を呼び出す

開発 ASP.NET Ajax Tips

ページ内の WebMethod (PageMethod) を JavaScript から呼び出すには、 ScriptManager の EnablePageMethods 属性を true に設定します。 (Ajax Control Toolkit を使用する機会が多いため、以下の例では ToolkitScriptManager を使用しています。)

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManagerMain" runat="server" EnablePageMethods="True">
</ajaxToolkit:ToolkitScriptManager>

JavaScript 側からの呼び出しには、 PageMethods を使用します。

function OnSampleButtonClick()
{
    // .aspx.cs などコードビハインドに GetSample() という WebMethod を作成した場合
    PageMethods.GetSample(onComplete, onError, "spanResult");
}

2007-10-16

ScriptManagerProxy の用途

開発 ASP.NET Ajax Tips

ScriptManager (ToolkitScriptManager) はページ内に 1 つしか配置することができません。そのため、マスタページに ScriptManager が含まれていて、各ページ内でサービスを参照する必要がある場合は、 ScriptManagerProxy を使用します。使用例は以下のようになります。

<asp:ScriptManagerProxy ID="ScriptManagerProxyMain" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebService/Sample.asmx" />
    </Services>
</asp:ScriptManagerProxy>