WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

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

by WebSurfer 2012年8月18日 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() + "}",
// 後略

その場合、上で述べた ScriptManager は不要ですし、プロキシにアクセスするスクリプト(上の例で言うと 173-ASPNETAjaxAndStaticMethod.js ファイル)も不要です。それゆえ、呼び出し元は .aspx ページである必要はなく、静的な .html ページとしても OK です。

Tags:

AJAX

WebBrowser で HttpOnly 属性の Cookie 取得

by WebSurfer 2012年8月13日 15:35

.NET Framework の WebBrowser を利用した Windows アプリで、ドキュメントに関連付けられている HTTP Cookie を取得するには HtmlDocument.Cookie プロパティ が利用できます。

ただし、HttpOnly 属性を持つ HTTP Cookie は例外です。その理由は、The Code Project のページ Retrieve HttpOnly Session Cookie in WebBrowser に述べられていますが、IE6 以降でクロスサイトスクリプティング対応のため HttpOnly 属性が追加され、その属性��持つ HTTP Cookie にはクライアントスクリプトからアクセスできなくなっているからだそうです。

HttpOnly 属性を持つ HTTP Cookie には、例えば、ASP.NET のセッションクッキー、匿名ユーザー識別用クッキーが該当します(下の Fiddler による応答ヘッダーの画像で、名前が ASP.NET_SessionId と .ASPXANONYMOUS のもの)。

HTTP Cookies(Fiddler による応答ヘッダー)

上の画像の HTTP Cookie の内、HtmlDocument.Cookie プロパティで取得できるのは RandomNumber と DateTimeCookie のみです。この例では、HtmlDocument.Cookie プロパティから取得できる文字列は以下のようになります。

DateTimeCookie=2012/08/13 14:22:48; RandomNumber=1123940529

すべての HTTP Cookie を取得するには、WININET.dll の InternetGetCookieExA 関数 (wininet.h) を利用できます(mshtml.dll ではない点に注意)。以下のような感じです。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace WebBrowserHttpOnlyCookie
{
  public partial class Form1 : Form
  {
    public Form1()
    {
      InitializeComponent();

      textBox1.Text = 
          "http://msdntestnew/171-SendCookies.aspx";
    }

    private void button1_Click(object sender, EventArgs e)
    {
      webBrowser1.Navigate(textBox1.Text);
    }

    [DllImport("wininet.dll", CharSet = CharSet.Auto, 
      SetLastError = true)]
    static extern bool InternetGetCookieEx(
        string pchURL, 
        string pchCookieName, 
        StringBuilder pchCookieData, 
        ref uint pcchCookieData, 
        int dwFlags, 
        IntPtr lpReserved);

    const int INTERNET_COOKIE_HTTPONLY = 0x00002000;

    public static string GetCookies(string uri)
    {
      uint datasize = 1024;           
      StringBuilder cookieData = 
        new StringBuilder((int)datasize);
      bool result = InternetGetCookieEx(
                         uri,
                         null,
                         cookieData,
                         ref datasize,
                         INTERNET_COOKIE_HTTPONLY,
                         IntPtr.Zero);

      if (result && cookieData.Length > 0)
      {
        return cookieData.ToString();
      }
      else
      {
        return null;
      }
    }

    private void webBrowser1_DocumentCompleted(
      object sender, 
      WebBrowserDocumentCompletedEventArgs e)
    {
      label1.Text = webBrowser1.Document.Cookie;
      label2.Text = GetCookies(textBox1.Text);
    }
  }
}

Tags: , ,

.NET Framework

WebBrowser で iframe の中の要素を取得

by WebSurfer 2012年8月10日 21:45
注意:
iframe に表示するページは親ページと同じドメインのものでないと、以下に紹介する方法では DOM は取得できないので注意してください(クロスサイトスクリプト対策だそうです)。

.NET Framework の WebBrowser に表示したページに iframe が含まれる場合、iframe の中の 要素 (HtmlElement) を取得するにはどうしたらいいかという話です。

WebBrowser に iframe を含むページを表示

ページが単一のドキュメントで構成されている場合は、WebBrowser.Document プロパティ で取得できる HtmlDocument オブジェクト から、HtmlDocument.GetElementById メソッドなどを使って、ドキュメントを構成する要素 (HtmlElement) を取得できます。

しかしながら、ページに iframe が含まれている場合、HtmlDocument オブジェクトや、その All プロパティで取得できる HtmlElementCollection オブジェクトから iframe の中の要素を直接取得することはできません。(iframe は取得できますが、その子要素は取得できません)

iframe の中の子要素 (HtmlElement) を取得するには一工夫必要です。では、どうしたらいいでしょう?

例として、以下のように iframe を持ち、iframe の src 属性にテキストボックス 2 つとボタン 1 つを持つログインページページを指定してあるページで、iframe の中の要素 (HtmlElement) を取得して操作することを考えます。

親ページ(iframe を持つ)

<!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>
    <title></title>
</head>
<body>
    <h1>iframe 中の Login ページ</h1>
    <iframe id="iframe1" src="168-Login.aspx" />
</body>
</html>

ログインページ(iframe に表示)

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        ID:<input id="Text1" 
            name="Text1" 
            type="text" />
        <br />
        PW:<input id="Text2" 
            name="Text2" 
            type="text" />
        <br />
        <input id="Submit1" 
            name="Submit1" 
            type="submit" 
            value="Login" />
    </div>
    </form>
</body>
</html>

上の「親ページ」を WebBrowser に表示したとします。

このとき、以下のコードでコメントアウトしたコードのように webBrowser1.Document.All で取得できる HtmlElementCollection には iframe の子要素は含まれないので id や pw は null になってしまいます。

iframe は WebBrowser コントロール内の別のウィンドウです。HtmlDocument.Window プロパティでドキュメントに関連付けられている HtmlWindow オブジェクトを取得し、HtmlWindow.Frames プロパティで Web ページ内で定義されている各 iframe 要素への参照を取得できます。(frame 要素の場合も同様です)

以下のようにして、iframe 内の要素 (HtmlElement) を取得して、操作することができます。

// これでは取得できない
//HtmlElement id = 
//    webBrowser1.Document.All.GetElementsByName("Text1")[0];
//HtmlElement pw = 
//    webBrowser1.Document.All.GetElementsByName("Text2")[0];
//id.InnerText = "loginName";
//pw.InnerText = "password";
//HtmlElement login = 
//    webBrowser1.Document.All.GetElementsByName("Submit1")[0];
//login.InvokeMember("click");


HtmlWindow iframe = webBrowser1.Document.Window.Frames[0];
HtmlElementCollection elements = iframe.Document.All;
            
HtmlElement id = elements.GetElementsByName("Text1")[0];
HtmlElement pw = elements.GetElementsByName("Text2")[0];
id.InnerText = "loginName";
pw.InnerText = "password";

HtmlElement login = elements.GetElementsByName("Submit1")[0];
login.InvokeMember("click");

Tags: ,

.NET Framework

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年3月  >>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar