程式 . 生活 . D小調

如果你跟我一樣，常常會遇到一些天馬行空的客戶提出詭異的需求..

那這篇文章可能對你會很有用...

今天要說的是如何在Javascript 來call  Silverlight 裡面的function ..

這樣可以玩的東西其實很多..甚至可以從網頁的地方把一些值傳進Silverlight中..

不過要注意事項還蠻多的...



首先先說明一下範例...

在畫面中放入一個叫做 lblShow 的label物件寫一些預設值

之後我們來看一下 C# 的 Code :


 //記得要先引入
using System.Windows.Browser;

namespace JavascriptCallSilverlight
{
    public partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        //加入 [ScriptableMember] ，並且請注意此function 必須要是public ，我之前在這邊卡很久
        [ScriptableMember]
        public void SetContentFromJavascript(string context)
        {
            lblShow.Content = context;
        }
    }
}



之後，請注意我註解中寫道的幾點，您需要被呼叫的function 上面要加一標籤[ScriptableMember]，並且此function 必須要是public，之前我沒注意到，一值叫不到..

之後我們要到App.xmal.cs 中...

將Application_Startup　進行一些小修改...

  private void Application_Startup(object sender, StartupEventArgs e)
    {
            var mainPage = new MainPage();

            this.RootVisual = mainPage;

            HtmlPage.RegisterScriptableObject("SLApp", mainPage);
    }


請加上　HtmlPage.RegisterScriptableObject("SLApp", mainPage);

這樣Silverlight 都準備好了，現在就看在Javascript那邊如何呼叫Silverlight ..

在html中..

您先得加入下面這段Javascript Code..


  <script>


        //宣告一變數指向Silverlight Control 實體
        var silverlightControl = null;

        //當 Silverlight control 確定載入完成時呼叫的function
        function pluginLoaded(sender, args) {
            //指向Silverlight Control 實體
            silverlightControl = sender.getHost();
        }

        function CallSilverlightFunction() {
            silverlightControl.Content.SLApp.SetContentFromJavascript("您好，我是來自Javascript的值");
         }

    </script>


之後我們修改原本 vs.net 自動生成插入Silverlight 的html 嵌入碼..


  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="400px" height="300px">
            <param name="source" value="ClientBin/JavascriptCallSilverlight.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <!-- 下面那一行，此為Silverlight control 完成時會呼叫 Javascript 的 pluginLoaded function  -->
            <param name="onLoad" value="pluginLoaded" />
            <param name="minRuntimeVersion" value="4.0.50401.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156>v=4.0.50401.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>



再來我們新增一個html 的按鈕來側側看..


是否可以成功呼叫Silverlight 裡面的SetContentFromJavascript 並且把lblShow的值給改變...


HTML Code :


   <input id="btnCallSilverlight" type="button" value="按我可以呼叫Silverlight 的function"
            onclick="CallSilverlightFunction()" />



成功範例:



檔案下載:


讚一下: