SilverlightからJavascriptの使い方

 Silverlight⇔Javascriptの双方向呼び出し方法について調べたので情報公開します。
WPFでも使えそう。


まず、C#側でのJavaScript関数の呼び出しです！

●マネージコード(C#)でクラスを作成する
呼び出される関数にはScriptableMember属性が必要となります。
 
【ScriptableClass.cs】
 public class ScriptableClass 
 { 
 　[ScriptableMember] 
　 public void ShowAlertPopup(string message) 
　 { 
　　　MessageBox.Show(message, "Message From JavaScript", MessageBoxButton.OK);
 　} 
 }

●マネージコード(C#クラス）の登録
 スクリプト可能なマネージ コード オブジェクトを作成して、スクリプトから呼び出されるようにします。
　例えば、App.csのApplication_Startup関数内で、次のように記載します。

【App.xaml.cs 】
private void Application_Startup(object sender, StartupEventArgs e)
 { 
 　this.RootVisual = new MainPage(); 

 　HtmlPage.RegisterScriptableObject("ScriptableClass", new ScriptableClass());
 }

● MainPageにボタンの追加
ボタンクリック時の実行される”DisplayAlertMessage”がJavaScriptの関数になります。
二番目の引数が ”DisplayAlertMessage”へのデータ私になります。
 
【MainPage.xaml 】
<Button x:Name="CallingButton" Content="Call JavaScript Method From Silverlight" Height="25" Click="CallingButton_Click"/>

【MainPage.xaml.cs】
private void CallingButton_Click(object sender, RoutedEventArgs e)
 { 
System.Windows.Browser.HtmlPage.Window.Invoke ("DisplayAlertMessage", "From Silverlight");
 }

● HTMLにJavaScriptの追加
<script type="text/javascript">
  function DisplayAlertMessage(param1)
 {
 　　alert("your are invoke method of javascript \n" + param1);
 }  
</script> 


今度は、JavaScriptからC#での関数の呼び出しです！
●　HTMLにボタン追加します
CallSilverlightがJavaScriptの関数で、この関数内でC#の関数を実行します

<div>  
<div style="width: 250px; background: lightblue; font-weight: bold;height:30px"> 
 HTML Part 
 </div>  
<div> 
 <input type="button" value="Calling Silverlight Method From Javascript" onclick="CallSilverlight();" />
 </div>  
</div>

●　ロード時の処理を追加します
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="80%"> 
 <param name="source" value="ClientBin/Silverlight2JSViseVersa.xap" /> 
 <param name="onError" value="onSilverlightError" /> 
 <param name="background" value="white" /> 
 <param name="minRuntimeVersion" value="4.0.50826.0" /> 
 <param name="autoUpgrade" value="true" /> 
  <param name="onLoad" value="pluginLoaded" /> 
  <a href=http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0 style="text-decoration: none">  
<img src=http://go.microsoft.com/fwlink/?LinkId=161376 alt="Get Microsoft Silverlight" style="border-style: none" /> 
 </a> 
 </object> 

●JavaScript関数を作成します。
HML内に記載します。
ScriptableClassがApp.csで登録した名前です。
ShowAlertPopupが一番最初に記載したC#での関数です。

<script type="text/javascript"> 
  var slCtl = null;
 function pluginLoaded(sender, args) {
 slCtl = sender.getHost(); 
 }  
function CallSilverlight() {
 slCtl.Content.ScriptableClass.ShowAlertPopup ("Testing for Calling Silverlight Method\n From Javascript"); 
 } 
</script>

参考用URLを以下に記載します。
http://msdn.microsoft.com/ja-jp/library/cc903928(v=vs.95).aspx
http://msdn.microsoft.com/ja-jp/library/cc838145(v=vs.95).aspx
http://msdn.microsoft.com/ja-jp/library/cc645076(v=vs.95).aspx
http://msdn.microsoft.com/ja-jp/library/cc645085(v=vs.95).aspx
http://gihyo.jp/dev/serial/01/silverlight/0002
http://techblog.yahoo.co.jp/tips/silverlight/
http://www.codeproject.com/Articles/293515/Calling-Silverlight-Method-from-Javascript-and-Jav
http://www.atmarkit.co.jp/fdotnet/dotnettips/902slobjcallfromjs/slobjcallfromjs.html