.NET TIPS

[Silverlight 2]HTML要素クリック時にSilverlightのメソッドを実行するには?[C#、VB]

デジタルアドバンテージ 一色 政彦
2009/06/25

 SilverlightアプリケーションをHTMLページの一部として埋め込んでいる場合、そのHTMLページとやりとりを行いたい場面が出てくることが多い。例えば、HTMLページ上でボタンが押されたときに、Silverlightアプリケーション上の一部の表示を変えるような場合だ。

 次のSilverlightアプリケーションでは、HTMLページ上のボタンをクリックすると、Silverlightアプリケーション内のメソッドを実行して、Silverlightアプリケーション上のTextBlockコントロールにメッセージを表示する。

JavaScriptコードからSilverlightアプリケーションのメソッドを実行してメッセージ表示を行うサンプル

 このようにHTMLページ上の要素(この場合はボタン。以降、HTML要素)からSilverlightアプリケーションのコードを呼び出すには、まずはHTML要素を記述する(必ずid属性を記述すること)。本稿の例では次のようになる。

<input type="button" id="btnCallSilverlihgtMethod"
  value= "Silverlightアプリケーションのメソッドを実行" />
Silverlightアプリケーションのメソッドを呼び出す出すためのHTMLページ上のボタン

 次にSilverlightアプリケーション側で、このHTML要素のclickイベントで実行されるイベント・ハンドラを登録する(つまり、このボタンがクリックされたときに発生するJavaScriptのイベントを利用して、Silverlightアプリケーションのメソッドが呼び出されるようにするわけである)。

 JavaScriptでは、上記のHTML要素は、WebブラウザのDocumentオブジェクトのGetElementByIdメソッドにより取得できる。これがSilverlight上では、DocumentオブジェクトはHtmlDocumentクラス(System.Windows.Browser名前空間)のオブジェクトとして表現され、HtmlPageクラス(System.Windows.Browser名前空間)の静的プロパティであるDocumentプロパティにより取得できる。

 GetElementByIdメソッドは、引数としてHTML要素のid値を指定する。戻り値としてHtmlElementクラス(System.Windows.Browser名前空間)のオブジェクトが返される。このHtmlElementオブジェクトがHTML要素に対応するSilverlightのオブジェクトである。

HtmlDocument doc = HtmlPage.Document;
HtmlElement btnElement =
  doc.GetElementById("btnCallSilverlihgtMethod");
Dim doc As HtmlDocument = HtmlPage.Document
Dim btnElement As HtmlElement = _
  doc.GetElementById("btnCallSilverlihgtMethod")
HTML要素を取得するSilverlightのサンプル・コード(上:C#、下:VB)
サンプル・コードなので、btnElementオブジェクトが取得できない場合(=nullの場合)の例外処理などは記述していないので実際のコーディングに利用する場合には注意してほしい。以下同様。

 HtmlElementオブジェクトにはHTML要素のJavaScriptイベントとSilverlightアプリケーションのメソッドを結び付けるためのAttachEventメソッドが用意されているので、これを次のようにして呼び出せばよい。

btnElement.AttachEvent(
  "click", new EventHandler(this.CallSilverlihgtMethod));
btnElement.AttachEvent( _
  "click", New EventHandler(AddressOf Me.CallSilverlihgtMethod))
HTML要素のJavaScriptイベントとSilverlightアプリケーションのメソッドを結び付けるSilverlightのサンプル・コード(上:C#、下:VB)

 このサンプル・コードを見ると分かるが、JavaScriptのイベント名(この例では「click」)を第1引数として指定し、第2引数にEventHandlerオブジェクトを指定すればよい。EventHandlerオブジェクトを生成するためのEventHandlerクラスのコンストラクタにSilverlightアプリケーションのメソッド(この例では「CallSilverlihgtMethod」)のデリゲートを指定する。

 Silverlightアプリケーションのメソッドは、本稿の例では次のようになる。

private void CallSilverlihgtMethod(object sender, EventArgs e)
{
  Page pageView = this.RootVisual as Page;
  pageView.textBlockMessage.Text =
    "Silverlightメソッドが呼び出されました。";
}
Private Sub CallSilverlihgtMethod(ByVal sender As Object, ByVal e As EventArgs)
  Dim pageView As Page = Me.RootVisual
  pageView.textBlockMessage.Text = _
    "Silverlightメソッドが呼び出されました。"
End Sub
Silverlightアプリケーションのメソッドのサンプル・コード(上:C#、下:VB)

 このメソッド例では、Silverlightアプリケーションのルート・ページのTextBlockコントロール(textBlockMessage)にメッセージを設定している。

 以上の実装内容をまとめたのが次のコードだ。

private void Application_Startup(object sender, StartupEventArgs e)
{
  HtmlDocument doc = HtmlPage.Document;
  HtmlElement btnElement =
    doc.GetElementById("btnCallSilverlihgtMethod");

  btnElement.AttachEvent(
    "click", new EventHandler(this.CallSilverlihgtMethod));

  this.RootVisual = new Page();  // Page.xamlをルート・ページに設定
}

private void CallSilverlihgtMethod(object sender, EventArgs ee)
{
  Page pageView = this.RootVisual as Page;
  pageView.textBlockMessage.Text =
    "Silverlightメソッドが呼び出されました。";
}
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
  Dim doc As HtmlDocument = HtmlPage.Document
  Dim btnElement As HtmlElement = _
    doc.GetElementById("btnCallSilverlihgtMethod")

  btnElement.AttachEvent( _
    "click", New EventHandler(AddressOf Me.CallSilverlihgtMethod))

  Me.RootVisual = New Page()  ' Page.xamlをルート・ページに設定
End Sub

Private Sub CallSilverlihgtMethod(ByVal sender As Object, ByVal e As EventArgs)
  Dim pageView As Page = Me.RootVisual
  pageView.textBlockMessage.Text = _
    "Silverlightメソッドが呼び出されました。"
End Sub
HTML要素クリック時にSilverlightアプリケーションのメソッドを実行するサンプル・コード(上:C#、下:VB)

 Application_StartupメソッドはSilverlightアプリケーションが起動されたときに呼び出されるイベント・ハンドラだ。通常、HTML要素のJavaScriptイベントとSilverlightアプリケーションのメソッドの結び付けはアプリケーション起動直後から必要になるので、基本的には(本稿のように)このメソッド内でその結び付け(=AttachEventメソッドの呼び出し)を行うとよいだろう。End of Article

カテゴリ:Silverlight 2 処理対象:ブラウザ
使用ライブラリ:HtmlDocumentクラス(System.Windows.Browser名前空間)
使用ライブラリ:HtmlElementクラス(System.Windows.Browser名前空間)
使用ライブラリ:EventHandlerクラス(System名前空間)

この記事と関連性の高い別の.NET TIPS
[Silverlight 2]JavaScriptコードからSilverlightのオブジェクトを利用するには?
[Silverlight 2]HTML要素にフォーカスを設定するには?
[Silverlight 2]HTMLページ内のJavaScriptコードを実行するには?
[Silverlight 2]文字列として作成したJavaScriptコードを実行するには?
[Silverlight 2]HTML要素のDOMメソッドを呼び出すには?
[Silverlight 2]HTML要素の属性を設定/取得するには?
[Silverlight 2]マウス・オーバー時にSilverlightコントロールを大きく表示するには?
[Silverlight 2]HTML要素の属性を追加/削除するには?
[Silverlight 2]Silverlightプラグイン・ロード時にJavaScriptコードを実行するには?
[Silverlight 2]HTML要素のDOMプロパティを取得/設定するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間