.NEt专家博客!

一步一步学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码

上一篇 / 下一篇  2008-04-11 21:00:48

概述

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中,如图所示:ITPUB个人空间\.|v p3F$Ok&D
ITPUB个人空间 ?R Z A"?1VV`0qH

首先我们编写在Silverlight中的界面布局:

<StackPanelBackground="#CDFCAE"Orientation="Horizontal">ITPUB个人空间clrxw
<
BorderCornerRadius="10"Width="100"Height="40"Margin="50 10 0 0">ITPUB个人空间Hq"k{yu'GI
<
TextBlockText="结果显示:"FontSize="20"Foreground="Red"></TextBlock>
v"}8I$Qn wR0</
Border>
F:oS.Hd9Zz}Ql8~0<
BorderCornerRadius="10"Background="Green"Width="300"Height="40">ITPUB个人空间&| w^9`1ma-j-w
<
TextBlockx:Name="result"FontSize="20"Foreground="White"ITPUB个人空间%K}[/X[}2B4N1b
Margin="20 5 0 0"></TextBlock>ITPUB个人空间za}Is4}{K
</
Border>
9~!rzn ]C0</
StackPanel>

并在加载时注册一个脚本可调用的当前页面实例:

private voidUserControl_Loaded(objectsender,RoutedEventArgse)
R.b%ya0K XD k0{
[\!@Z kc0HtmlPage.RegisterScriptableObject("Calculator",this);ITPUB个人空间n%S]j"W5hm
}

编写一个Add方法,该方法将在JavaScript中被调用,必须为public,用ScriptableMember特性暴露给脚本。

[ScriptableMember]ITPUB个人空间7is%Zx@:sB:T6n
public voidAdd(intx,inty)ITPUB个人空间q;C1rf#~ FcT
{
6H/q L*g)rX s5S0intz = x + y;ITPUB个人空间3t+D#]3wWV{1m@
this.result.Text =String.Format("{0} + {1} = {2}", x, y, z);ITPUB个人空间&pW\:})AQ*FL
}

现在编写测试页中的内容,提供输入的input控件:

<divclass="main">ITPUB个人空间ny@-N1RD
yd&o
<
inputid="txt1"type="text" />ITPUB个人空间'WM$di?{*Q\
<
inputid="txt2"type="text" />ITPUB个人空间o'Flv%q5H0b fCL1r
<
inputid="Button1"type="button"value="确 定"/>ITPUB个人空间Z P*DEMDg
</
div>

编写JavaScript调用Silverlight中的方法,获取Silverlight插件,Calculator就是我们刚才所注册的实例:

<script.type="text/javascript">ITPUB个人空间
XyL6Fu9g(J&X
function
callSilverlight()ITPUB个人空间(Baj wi*t6o6s-c
{
FKn*I)e{_ ~0varslPlugin = $get('Xaml1');
Tul`$yCg1S0
y%kZ+U/G^Z*B-k0slPlugin.content.Calculator.Add($get('txt1').value,$get('txt2').value);
w1F7V2vq@0}ITPUB个人空间v [YKF;\
</script>

在按钮单击事件中调用该方法

<inputid="Button1"type="button"value="确 定"onclick="callSilverlight()" />

运行后结果:

输入两个数后显示出结果:
K]4j|TO S0ITPUB个人空间(Y.x!oH,g)}\Z

使用RegisterCreateableType

现在我们再看一下如何使用RegisterCreateableType。对上面的示例做一些简单的改动,在Silverlight项目中添加一个Calculator类,需要给它加上ScriptableType特性:

[ScriptableType]ITPUB个人空间Zx#A6n!Z(L8o
public classCalculatorITPUB个人空间#X'h2NTQ"e$Me
{
b5y0m?N0[ScriptableMember]ITPUB个人空间[Ef9?q+|d
public intAdd(intx,inty)ITPUB个人空间NM W l&mwG6S7L(K?
{
X"L3M)PH HN0returnx + y;ITPUB个人空间mg4qxz#Z W o
}
&l'Kx&g'\0}

在页面加载时修改为如下代码,指定一个别名和要注册的类型:

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

这样在JavaScript中就可以这样进行调用了,先创建一个之前注册为ScriptableType的实例,再调用它的相关方法:

<script.type="text/javascript">
?5_D5f}Cz5czJ0function
callSilverlight()ITPUB个人空间TMK:cw:x#G
{
V o?){?mi8lc s;H0varslPlugin = $get('Xaml1');ITPUB个人空间 wqy|qP4o
varcal = slPlugin.content.services.createObject("calculator");
}G"l6xx0ITPUB个人空间 |:M9c6J Q G ^4Av.O n
alert(cal.Add($get('txt1').value,$get('txt2').value));
IA/CP(u&`b5aJ0}ITPUB个人空间D `+|!b$~~je2\8p
</script>

运行结果如下,没有问题:


"Z1d1B.u]VtSa7~0

结束语

本文介绍了如何在JavaScript中调用Silverlight,通过前面几篇文章的介绍,如对DOM的操作、在Silverlight中调用 JavaScript、在JavaScript中调用Silverlight等,可以看到,Silverlight与浏览器之间交互有着很好的支持,后面 将继续介绍其它内容。

作者:TerryLee
X!l`pd \E0出处:http://terrylee.cnblogs.com
ITPUB个人空间3c)zMdh+\h P+m b W

TAG:

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar