JavaScriptとC#の連携方法(2)

ずっと前にJavaScriptとC#の連携について投稿しました．まずはDOM要素にアクセスするところだけ投稿して，その後C#からJavaScriptの関数を呼んだり，その逆を投稿しようとして後回しにしたまま忘れていました．と言うことで，C#からJavaScriptの関数を呼ぶ方法および，JavaScriptからC#の関数を呼ぶ方法について説明します．
今回は「Microsoft Visual Web Developer 2010 Express」(以下VWD)を使用して，C#を使ってSilverlight3アプリケーションを作成しました．HTMLファイルはVWDによって自動生成されたものに若干手を入れています．

また，ものすごく単純化して，以下の2つの機能を持つ一つのアプリケーションを作成します．Silverlight→JavaScriptの例として，Silverlightで一つのTextBoxと一つのButtonを設置し，Buttonが押されたらJavaScriptにTextBoxの内容を受け渡して，JavaScriptでAlertを使って受け取った内容を表示します．次にJavaScript→Silverlightの例として，HTMLで一つのTextと一つのButtonを設置して，Buttonが押されたらSilverlightにTextの内容を受け渡して，SilverlightのTextBoxに受け取った内容を表示します．

C#からJavaScriptの関数を呼ぶ方法

まず，呼び出される関数（JavaScript）を生成します．VWDが自動生成したMHTMLファイルは，"<プロジェクト名>TestPage.html"という名前で保存されています．その中の（今回は）21行目から56行目にJavaScriptの記述があるので，そこに以下の内容を追加します．見れば分かると思いますが，messageを受け取って，その内容をalertとして表示するだけです．
注意事項として，"<プロジェクト名>TestPage.html"は，コンパイルの度に標準状態に戻されます．悲しい思いをしないよう，バックアップを作成しながら作業してください．


次に，上記alertData関数を呼び出すC#のプログラムを記述します．VWDでは当たり前ですが，C#のプログラムは，TextBoxやButtonを配置した後，そのButtonをダブルクリックすれば，面倒な関数定義などは自動でやってくれます．念のため断っておくと，MainPage.xaml.csというファイルを編集します．
プログラムでは，button1が押された場合に，textBox1の内容をalertDataに送るという処理を記述します．実際の呼び出しはInvokeメソッドで行います．第一引き数に呼び出したい関数名を文字列で与え，第二引き数にオブジェクト型の配列として，実際にalertDataに与えたい引き数を列挙します．


この例では使用しませんが，例えばalertDataが三つの文字列を受け取るのであれば，次のように記述します．

System.Windows.Browser.HtmlPage.Window.Invoke( "alertData", new Object[] { "mouse", "cow", "tiger" } );

JavaScriptからC#の関数を呼ぶ方法

C#→JavaScriptは簡単でしたが，JavaScript→C#はちょっとやっかいです．順に説明するので，焦らずにいきましょう．先ほどと同じように，まずは呼び出される関数から記述します．記述するファイルは先程と同じくMainPage.xaml.csです．


一目瞭然ですが，messageを受け取って，textBox1に代入しています．ScripttableMember()は，外部からアクセスできるメソッドであることを示します．次に，外部からプログラム内部にアクセスできるように設定するため，App.xaml.csに変更を加えます．具体的には，27行から始まるApplication_Startup関数に追加します．以下にApplication_Startup関数を全て掲載しますが，実際には4行目を追加することになります．


次に，HTMLに入力欄とボタンを設置し，さらにSilverlightオブジェクトにIDを付加してJavaScriptからアクセスできるようにします．1行目から4行目を追加し，7行目に「id="slobj"」を挿入してください．1〜4行目では，入力欄とボタンを設置しています．ボタンがクリックされたらsendSL関数（後述）を呼び出します．記述するファイルは"<プロジェクト名>TestPage.html"です．繰り返しますが，"<プロジェクト名>TestPage.html"はコンパイルの度に標準状態に戻されます．


最後に，"<プロジェクト名>TestPage.html"にsendSL関数を記述します．これは，前述したalertData関数に続けて記述してください．

見ての通り，HTMLのIDからSilverlightオブジェクトを取得（3行目）して，呼び出したい関数を記述（4行目）するだけです．4行目のMainPageは，App.xaml.csのApplication_Startup関数に記述した文字列なので，対応さえしっかりしていれば変更可能です．
ツイート