silverlight與javascript的互動

在silverlight的開發中，可以做到silverlight中寫到的方法與javascript中定義的方法互動使用，而且silverligt本身方法的執行效率就較高，後台與前端的互動顯得更加容易，如何互動，請看下面的具體實現，涉及test1.xaml和test1.html，這兩者都是在建立silverlight應用程式時自動產生的：

一、javascrpt中調用silverlight後台方法

調用的關鍵在於如何讓後台方法（silverlight中定義的方法）暴露給用戶端，便於javascript調用，暴露之後，用戶端訪問silverlight對象，進而找到暴露的後台方法

1、構建瀏覽器橋

• 引用 using System.Windows.Browser，主要用到HtmlPage對象，代表當前頁面。
• 在test1.xaml的load事件裡將silverlight註冊成宿主Html頁上的一個可進行指令碼處理的對象

          void MainPage_Loaded(object sender, RoutedEventArgs e)        {            HtmlPage.RegisterScriptableObject("myscript",this);        }

註：html頁面上啟動並執行代碼會用myscript這個名稱訪問silverlight對象，this為整個html對象

• 將已寫好的silverlight方法向外部調用者公開，只需添加[ScriptableMember]屬性即可

          [ScriptableMember]        public void UpdateCities(string country)        {            List<CityData> cities = GetCities(country);            itemsCon.ItemsSource = cities;        }

2、Html中調用silverlight對象中寫的方法

• 在test.html中我們很容易找到<object>標記，這個標記即為silverlight對象，其中包括source、background、onError等參數，將該對象標以id="silverlightobj"，這樣javascript中就可以根據ID訪問該對象

<object id="silverlightobj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">  <param name="source" value="ClientBin/SbSCh9_1.xap"/>  <param name="onError" value="onSilverlightError" />  <param name="background" value="white" />  <param name="minRuntimeVersion" value="5.0.61118.0" />  <param name="autoUpgrade" value="true" />  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">   <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="擷取 Microsoft Silverlight" style="border-style:none"/>  </a>    </object>

註：type屬性指定要載入的對象的MIME類型，對於silverlight應用程式，要使用的是application/x-silverlight-2這個MIME類型

• 調用後台方法

    <script type="text/javascript">        function updatecity(country) {            var slplugin = document.getElementById("silverlightobj");            slplugin.content.myscript.UpdateCities(country);        }    </script>

這樣就完成了Html中調用silverlight方法

二、silverlight方法中調用用戶端的javascript方法

關鍵點在HtmlPage.Window.GetProperty("MoveMap") as ScriptObject，擷取頁面上的script對象

這種調用比較簡單，附上代碼：

ScriptObject movemap = HtmlPage.Window.GetProperty("MoveMap") as ScriptObject;movemap.InvokeSelf(strcity);

其中html頁面上的script：

    <script type="text/javascript">        var map = null;        function GetMap() {            map = new VEMap('mapdiv');            map.LoadMap();        }        function MoveMap(where) {            try {                map.Find(null,where);                 } catch (e) {            alert(e.Message);            }        }    </script>

註：GetProperty參數為script方法名

總結：在silverlight中可以用html按鈕直接調用C#方法，筆者試了下在asp.net測試類別似調用，最終失敗，在asp.net上最好還是直接用伺服器控制項與後台方法直接通訊