Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章將從Silverlight 2基礎知識、數據與通信、自定義控件、動畫、圖形圖像等幾個方面帶您快速進入Silverlight 2開發。Silverlight中內置了對于HTML、客戶端腳本等的支持。本文將介紹在Silverlight中如何用JavaScript調用.NET代碼。

概述

Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章將從Silverlight 2基礎知識、數據與通信、自定義控件、動畫、圖形圖像等幾個方面帶您快速進入Silverlight 2開發。

Silverlight中內置了對于HTML、客戶端腳本等的支持。上一篇介紹在Silverlight中調用JavaScript，本文我將介紹在Silverlight中如何用JavaScript調用.NET代碼。

使用RegisterScriptableObject

在Silverlight 2中提供了如下兩個類型：

ScriptableMemberAttribute：允許我們在Silverlight把成員暴露給Script。

ScriptableTypeAttribute：允許我們在Silverlight把類型暴露給Script。

同時HtmlPage提供了RegisterCreateableType和RegisterScriptableObject方法，用來注冊可被腳本使用的類型或者對象實例。有了上面這些，就可以做到在JavaScript中調用Silverlight。

看一個簡單的示例，在這個示例中，我們期望通過JavaScript傳遞兩個參數給Silverlight中的方法，由該方法計算出結果后顯示在Silverlight中，如圖所示：

 

首先我們編寫在Silverlight中的界面布局：

<StackPanel Background="#CDFCAE" Orientation="Horizontal">
    <Border CornerRadius="10" Width="100" Height="40" Margin="50 10 0 0">
        <TextBlock Text="結果顯示：" FontSize="20" Foreground="Red"></TextBlock>
    </Border>
    <Border CornerRadius="10" Background="Green" Width="300" Height="40">
        <TextBlock x:Name="result" FontSize="20" Foreground="White"
                   Margin="20 5 0 0"></TextBlock>
    </Border>
</StackPanel> 

并在加載時注冊一個腳本可調用的當前頁面實例：

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    HtmlPage.RegisterScriptableObject("Calculator", this);
}

編寫一個Add方法，該方法將在JavaScript中被調用，必須為public，用ScriptableMember特性暴露給腳本。

[ScriptableMember]
public void Add(int x, int y)
{
    int z = x + y;
    this.result.Text = String.Format("{0} + {1} = {2}", x, y, z);
}

現在編寫測試頁中的內容，提供輸入的input控件：

<div class="main">
    <input id="txt1" type="text" />
    <input id="txt2" type="text" />
    <input id="Button1" type="button" value="確 定"/>
</div>

編寫JavaScript調用Silverlight中的方法，獲取Silverlight插件，Calculator就是我們剛才所注冊的實例：

<script type="text/javascript">
    function callSilverlight()
    {
        var slPlugin = $get('Xaml1');
        
        slPlugin.content.Calculator.Add($get('txt1').value,$get('txt2').value);
    }
</script>

在按鈕單擊事件中調用該方法

<input id="Button1" type="button" value="確 定" onclick="callSilverlight()" />

運行后結果：

 

輸入兩個數后顯示出結果：

 

使用RegisterCreateableType

現在我們再看一下如何使用RegisterCreateableType。對上面的示例做一些簡單的改動，在Silverlight項目中添加一個Calculator類，需要給它加上ScriptableType特性：

[ScriptableType]
public class Calculator
{
    [ScriptableMember]
    public int Add(int x, int y)
    {
        return x + y;
    }
}

在頁面加載時修改為如下代碼，指定一個別名和要注冊的類型：

HtmlPage.RegisterCreateableType("calculator", typeof(Calculator));

這樣在JavaScript中就可以這樣進行調用了，先創建一個之前注冊為ScriptableType的實例，再調用它的相關方法：

<script type="text/javascript">
    function callSilverlight()
    {
        var slPlugin = $get('Xaml1');
        var cal = slPlugin.content.services.createObject("calculator");
        
        alert(cal.Add($get('txt1').value,$get('txt2').value));
    }
</script>

運行結果如下，沒有問題：

 

結束語

本文介紹了如何在JavaScript中調用Silverlight，通過前面幾篇文章的介紹，如對DOM的操作、在Silverlight中調用JavaScript、在JavaScript中調用Silverlight等，可以看到，Silverlight與瀏覽器之間交互有著很好的支持，后面將繼續介紹其它內容。