WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ASP.NET AJAX でページの静的メソッド呼び出し

by WebSurfer 18. August 2012 16:32

ASP.NET の AJAX 機能を使って、ブラウザからクライアントスクリプトでサーバー側のメソッドを呼び出し、データを受け取って表示する方法を、先の記事 ASP.NET AJAX と Web サービス で紹介しました。

その例では、呼び出す相手は Web サービス (.asmx) のメソッドでしたが、それ以外に、自分のページ (.aspx) の静的メソッドを呼び出すことも可能です。

そのためのポイントは、簡単に書くと以下の 3 点です。

  1. ScriptManager で EnablePageMethods を true に設定。
  2. クライアントスクリプトから呼び出すサーバー側のメソッドは public static にして WebMethodAttribute 属性を付与。
  3. クライアントスクリプトからは、プロキシクラス 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() + "}",
// 後略

Tags:

AJAX

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  December 2014  >>
MoTuWeThFrSaSu
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar