一步一步學Silverlight 2系列(22):在Silverlight中如何用JavaScript調用.NET代碼

來源:互聯網
上載者:User
概述

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與瀏覽器之間互動有著很好的支援,後面將繼續介紹其它內容。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.