2011年8月27日土曜日

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関数に記述した文字列なので,対応さえしっかりしていれば変更可能です.
このエントリーをはてなブックマークに追加

1 件のコメント:

đa さんのコメント...

đang cầm một tinh thạch màu trắng, hai mắt hồng quang lấp lánh.

-Hai tên oắt con các ngươi cứ đợi đến khi ta thoát vây sẽ để các ngươi thấy được thực lực thật sự của Thác Sâm ta!

Thác Sâm cười to. rồi hóa thành một tia chớp. Mục tiêu của hắn lần này chính là Vương Lâm.

-Vương Lâm! Bây giờ đến lượt ngươi!

Giọng nói của Thác Sâm hết sức lạnh lẽo, rơi vào tai Vương Lâm lập tức làm cho cơ thể hắn chấn động. Hồn Phiên quấy lấy cơ thể hắn vào bên trong rồi điên cuồng bay đi như tên bắn. Nhưng tốc độ của Thác Sâm lại nhanh hơn. Trong chớp mắt hắn đã đuổi kịp Vương Lâm, giọng nói âm u của hắn truyền vào trong tai Vương Lâm.
dong tam mu lậu cho thuê nhà trọ cho thuê nhà trọ nhạc sàn cực mạnh tư vấn pháp luật qua điện thoại công ty luật ở hà nội số điện thoại tư vấn pháp luật dịch vụ thành lập doanh nghiệp
-Ngươi không chạy thoát được đâu! Vương Lâm! Ta đợi ngày thôn phệ ký ức truyền thừa của ngươi đã lâu lắm rồi... ....

Sắc mặt Vương Lâm trở nên âm trầm. Tay phải hắn phất nhẹ, Chiến Phủ lập tức xuất hiện trên tay. Hắn đột nhiên xoay người lại, đem toàn bộ tiên lực bên trong cơ thể điên cuồng

コメントを投稿