Silverlight Tip of the Day #15 – Communicating between JavaScript & Silverlight

Nguyễn Thị Như Quỳnh — Sat, 23 May 2009 00:21:56 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 5/23/2009 8:21:56 AM

Rất may mắn là sự giap tiếp giữa Silverlight và Javascript tương đối không phức tạp cho lắm. Ví dụ dưới đây sẽ minh chứng cho bạn biết phải làm như thế nào để sử dụng 2 cách gọi.

Gọi Silverlight Từ Java script:

Trong hàm khởi tạo của Silverlight app, thực hiện gọi đến RegisterScriptableObject (). Bản chất của phương thức gọi này là đăng kí một đối tượng quản lý cho kịch bản kết nối (scriptable access) bởi mã Javascript.. Tham số đầu tiên có thể tùy ý đặt từ khóa theo ý của bạn. Từ khóa này sẽ tham chiếu đến mã Javascript của bạn khi thực hiện phương thức gọi Silverlight.
Thêm fuction mà bạn muốn gọi trong code Silverlight của bạn. Bạn nên thêm nó với thuộc tính [ScriptableMember] ở đầu.
Trong Javascript, bạn có thể gọi trực tiếp đến function nằm trong code Silverlight của bạn . Điều này có thể thực hiện được bởi document object. Từ thí dụ của tôi sau đây: document.getElementById("silverlightControl").Content.Page.UpdateText("Hello from Javascript!"); nơi “silverlightControl” là ID của Silverlight control của tôi.

Gọi Javascript Từ Silverlight:

Javascript có thể được gọi trực tiếp trong function HtmlPage.Window.Invoke() .

Thí dụ cho cả hai cách trên:

Page.xaml:

namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            HtmlPage.RegisterScriptableObject("Page", this);            
            HtmlPage.Window.Invoke("TalkToJavaScript", "Hello from Silverlight");
        }
 
        [ScriptableMember]
        public void UpdateText(string result)
        {
            myTextbox.Text = result;
        }
    }
} 

Default.aspx:

<script type="text/javascript"> 
        function TalkToJavaScript( data)
        {
            alert("Message received from Silverlight: "+data);
            
            var control = document.getElementById("silverlightControl");            
            control.Content.Page.UpdateText("Hello from Javascript!");
        }    
</script>

Page.xaml:

<UserControl x:Class="SilverlightApplication7.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="myTextbox">Waiting for call...</TextBlock>
    </Grid>
</UserControl>

Thank you,
--Mike Snow