ASP.NET の AJAX 機能を使って、ブラウザからクライアントスクリプトでサーバー側のメソッドを呼び出し、データを受け取って表示する方法を、先の記事 ASP.NET AJAX と Web サービス で紹介しました。
その例では、呼び出す相手は Web サービス (.asmx) のメソッドでしたが、それ以外に、自分のページ (.aspx) の静的メソッドを呼び出すことも可能です。
そのためのポイントは、簡単に書くと以下の 3 点です。
-
ScriptManager で EnablePageMethods を true に設定。
-
クライアントスクリプトから呼び出すサーバー側のメソッドは public static にして WebMethodAttribute 属性を付与。
-
クライアントスクリプトからは、プロキシクラス PageMethods を通じて呼び出し。プロキシクラス PageMethods のコードはサーバーで自動生成され、html ソースにインラインで含まれてブラウザに送信されます。（呼び出し先が Web サービスの場合は WebService.asmx/js というような外部ファイルになります）
詳しくは、MSDN ライブラリの クライアント スクリプトへの Web サービスの公開 の「ASP.NET Web ページ内の静的メソッドの呼び出し」というセクションを参照してください。
サンプルコードは上に紹介した MSDN ライブラリのページにもありますが、先の記事 ASP.NET AJAX と Web サービス で書いた Web サービスの例を、Page の静的メソッドを使う方法に置き換えたサンプルコードを以下に書いておきます。
(1) Web ページ (173-ASPNETAjaxAndStaticMethod.aspx)
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public class Car
{
public string Make;
public string Model;
public int Year;
public int Doors;
public string Colour;
public float Price;
}
static protected List<Car> Cars = new List<Car>{
new Car{Make="Audi",Model="A4",Year=1995,
Doors=5,Colour="Red",Price=2995f},
new Car{Make="Ford",Model="Focus",Year=2002,
Doors=5,Colour="Black",Price=3250f},
new Car{Make="BMW",Model="5 Series",Year=2006,
Doors=4,Colour="Grey",Price=24950f},
new Car{Make="Renault",Model="Laguna",Year=2000,
Doors=5,Colour="Red",Price=3995f},
new Car{Make="Toyota",Model="Previa",Year=1998,
Doors=5,Colour="Green",Price=2695f},
new Car{Make="Mini",Model="Cooper",Year=2005,
Doors=2,Colour="Grey",Price=9850f},
new Car{Make="Mazda",Model="MX 5",Year=2003,
Doors=2,Colour="Silver",Price=6995f},
new Car{Make="Ford",Model="Fiesta",Year=2004,
Doors=3,Colour="Red",Price=3759f},
new Car{Make="Honda",Model="Accord",Year=1997,
Doors=4,Colour="Silver",Price=1995f}
};
[WebMethod]
public static List<Car> GetCarsByDoors(int doors)
{
var query = from c in Cars
where c.Doors == doors
select c;
return query.ToList();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET AJAX to call static method</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server"
EnablePageMethods="True">
<Scripts>
<asp:ScriptReference
Path="~/173-ASPNETAjaxAndStaticMethod.js" />
</Scripts>
</asp:ScriptManager>
<div>
Number of doors:
<asp:DropDownList ID="ddlDoors" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<input
type="button"
id="Button1"
value="Get Cars"
onclick="getCars($('#<%=ddlDoors.ClientID%>').val());" />
<div id="output"></div>
</form>
</body>
</html>
(2) JavaScript (173-ASPNETAjaxAndStaticMethod.js)
var serviceProxy;
// プロキシの初期化
function pageLoad() {
serviceProxy = new PageMethods();
}
// ボタンクリックで呼び出されるメソッド
function getCars(doors) {
serviceProxy.GetCarsByDoors(doors, Succeeded, Failed);
}
// AJAX 通信が成功したときに呼び出され、戻ってきたデータ
// を処置するコールバック関数。
// 引数 cars は JSON 文字列ではなく、パース済みのオブジェ
// クト。.NET 3.5 で追加された d パラメータはプロキシで
// 適切に処置されるらしい。
function Succeeded(cars) {
$('#output').empty();
$.each(cars, function (index, car) {
$('#output').append(
'<p><strong>' + car.Make + ' ' +
car.Model + '</strong><br /> Year: ' +
car.Year + '<br />Doors: ' +
car.Doors + '<br />Colour: ' +
car.Colour + '<br />Price: £' +
car.Price + '</p>');
});
}
// 通信に失敗したとき呼び出されるコールバック関数。
function Failed(error, userContext, methodName) {
if (error !== null) {
var msg = "An error occurred: " +
error.get_message();
$('#output').text(msg);
}
}
if (typeof (Sys) !== "undefined") {
Sys.Application.notifyScriptLoaded();
}
なお、上記 Web ページの静的メソッド GetCarsByDoors は jQuery.ajax からも呼び出せます。先の記事 jQuery AJAX と Web サービス で紹介したコードで、呼び出し先 (url) を変更するだけです。呼び出し先の Web ページの URL が上の例のように 173-ASPNETAjaxAndStaticMethod.aspx とすると、以下のような感じです。
// 前略
function getCars() {
$.ajax({
type: "POST",
url: "173-ASPNETAjaxAndStaticMethod.aspx/GetCarsByDoors",
data: "{doors: " + $('#ddlDoors').val() + "}",
// 後略
その場合、上で述べた ScriptManager は不要ですし、プロキシにアクセスするスクリプト（上の例で言うと 173-ASPNETAjaxAndStaticMethod.js ファイル）も不要です。それゆえ、呼び出し元は .aspx ページである必要はなく、静的な .html ページとしても OK です。