您的位置:知识库 » .NET技术

一步一步学Silverlight :在Silverlight中如何用JavaScript调用.NET代码

作者: TerryLee  来源: 博客园  发布时间: 2008-10-09 11:17  阅读: 7449 次  推荐: 1   原文链接   [收藏]  
[1] 一步一步学Silverlight :在Silverlight中如何用JavaScript调用.NET代码
[2] 一步一步学Silverlight :在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中,如图所示:

TerryLee_Silverlight2_0103 

首先我们编写在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()" />

运行后结果:

TerryLee_Silverlight2_0103 

输入两个数后显示出结果:

 TerryLee_Silverlight2_0104

[第1页][第2页]
1
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻