一步一步學Silverlight :如何在Silverlight中調用JavaScript

作者: TerryLee  來源: 博客園  發布時間: 2008-10-09 11:13  閱讀: 7758 次  推薦: 0   原文鏈接   [收藏]  
 

概述

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、客戶端腳本等的支持。很多情況下,我們編寫的Web應用程序中用了一些JavaScript或者AJAX框架,我們希望能夠在Silverlight調用某些腳本方法,或者說在Silverlight中觸發某個腳本的執行,這時就需要用到在Silverlight中調用JavaScript,本文將簡單介紹這一內容。

使用GetProperty獲取腳本對象

先來看一個簡單的例子,在Silverlight測試頁面中放入一個div用作顯示信息:

<div id="result"></div>

編寫一段簡單的JavaScript代碼:

<script type="text/javascript">
    function Hello(message)
    {
        var resultSpan = $get("result");
        resultSpan.innerText = "Hello " + message;
    }
</script>

 

再編寫一個簡單的輸入信息界面:

<StackPanel Background="#CDFCAE" Orientation="Vertical">
    <StackPanel Height="40">
        <TextBlock Text="Calling Browser Script from Silverlight"
                   Foreground="Red"></TextBlock>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBox x:Name="input" Width="340" Height="40" Margin="20 0 20 0"></TextBox>
        <Button x:Name="submit" Width="120" Height="40" Background="Red"
            Content="調 用" FontSize="20" Foreground="Red" Click="submit_Click"></Button>
    </StackPanel>
</StackPanel>

實現對腳本的調用:

private void submit_Click(object sender, RoutedEventArgs e)
{
    ScriptObject hello = HtmlPage.Window.GetProperty("Hello") as ScriptObject;
    hello.InvokeSelf(this.input.Text);
}

ScriptObject提供了任何客戶端腳本的封裝,不僅僅是JavaScript,使用其他的AJAX框架也可以,如jQuery等。然后調用InvokeSelf()方法,傳入參數,這里ScriptObject總共提供了兩個方法,Invoke和InvokeSelf,如果我們只調用腳本對象的自身,就可以使用InvokeSelf,如果腳本對象中還有其它的函數等,可以使用Invoke傳入名稱進行調用,兩個方法的定義如下:

[SecuritySafeCritical]
public virtual object Invoke(string name, params object[] args);

[SecuritySafeCritical]
public virtual object InvokeSelf(params object[] args);

運行上面的示例:

 TerryLee_Silverlight2_0097

輸入TerryLee后點擊調用,可以看到確實調用了客戶端腳本:

TerryLee_Silverlight2_0098

0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()