概述
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中,如图所示:
)ow4E%H;w^KD0
:Q ?-d!RJ:u0
首先我们编写在Silverlight中的界面布局:
<StackPanelBackground="#CDFCAE"Orientation="Horizontal">ITPUB个人空间Kaq4ZhW9k
<BorderCornerRadius="10"Width="100"Height="40"Margin="50 10 0 0">
)Z2UY xSmA8V)N3k9c0<TextBlockText="结果显示:"FontSize="20"Foreground="Red"></TextBlock>ITPUB个人空间BK#u7JU dT
</Border>ITPUB个人空间4O"i7I9E1N3o3K"p
<BorderCornerRadius="10"Background="Green"Width="300"Height="40">ITPUB个人空间H%X|%Jw!n
<TextBlockx:Name="result"FontSize="20"Foreground="White"
1E
_O;vY8Cts'I0Margin="20 5 0 0"></TextBlock>
x;W.vd.i'kPi
\0</Border>ITPUB个人空间DTg/_)T
</StackPanel>
并在加载时注册一个脚本可调用的当前页面实例:
private voidUserControl_Loaded(objectsender,RoutedEventArgse)
O%W2A3J|av*_tj0{
#^h;?4h9a0HtmlPage.RegisterScriptableObject("Calculator",this);
-W,Zl
gl
c0}
编写一个Add方法,该方法将在JavaScript中被调用,必须为public,用ScriptableMember特性暴露给脚本。
[ScriptableMember]ITPUB个人空间)~"W$l(s-{dJs
public voidAdd(intx,inty)ITPUB个人空间}6h
p1pi6Ic"dy
{ITPUB个人空间S|7pN-E%U'z4E
intz = x + y;ITPUB个人空间7} L3}xDD.}b
this.result.Text =String.Format("{0} + {1} = {2}", x, y, z);
$JGb&n@?!g&_*B*C0}现在编写测试页中的内容,提供输入的input控件:
<divclass="main">
p9XGg+qTA0<inputid="txt1"type="text" />ITPUB个人空间l2AKQw7J){t
<inputid="txt2"type="text" />
{Is3MPt ~0<inputid="Button1"type="button"value="确 定"/>ITPUB个人空间,z] P8Fa
</div>
编写JavaScript调用Silverlight中的方法,获取Silverlight插件,Calculator就是我们刚才所注册的实例:
<script.type="text/javascript">
p kh(s!F0functioncallSilverlight()ITPUB个人空间6i%j1B [~9C q
{ITPUB个人空间a
MaZ%f+yo+@
varslPlugin = $get('Xaml1');ITPUB个人空间e4S-p_f
/\2p.{I8L5B7t0slPlugin.content.Calculator.Add($get('txt1').value,$get('txt2').value);
6_`
r;AK'pT0}ITPUB个人空间-va7yM7g
B9gl
</script>
在按钮单击事件中调用该方法
<inputid="Button1"type="button"value="确 定"onclick="callSilverlight()" />
运行后结果:

输入两个数后显示出结果:
ITPUB个人空间r0V2iK0wl
ITPUB个人空间'om pe*g@*D+X使用RegisterCreateableType
现在我们再看一下如何使用RegisterCreateableType。对上面的示例做一些简单的改动,在Silverlight项目中添加一个Calculator类,需要给它加上ScriptableType特性:
[ScriptableType]
vYVA:C_8c,z7n {)T0public classCalculator
#^(y_W4L`d0{
%u/gp&B!u0[ScriptableMember]
f%P \ leO5p0public intAdd(intx,inty)ITPUB个人空间IXz H3s
{
)swvDG3t%j0returnx + y;
IiP*WU8J8S8Wa0}ITPUB个人空间qLK9|/y^]
R k6W
}
在页面加载时修改为如下代码,指定一个别名和要注册的类型:
HtmlPage.RegisterCreateableType("calculator",typeof(Calculator));这样在JavaScript中就可以这样进行调用了,先创建一个之前注册为ScriptableType的实例,再调用它的相关方法:
<script.type="text/javascript">ITPUB个人空间emG"y#\R8_
Ew
functioncallSilverlight()ITPUB个人空间rW/R}0E~b
{ITPUB个人空间xOH'`rD#hg
varslPlugin = $get('Xaml1');ITPUB个人空间$zs*E!UgQ%O
varcal = slPlugin.content.services.createObject("calculator");ITPUB个人空间.VXb5_D)X5H!?X3T
ITPUB个人空间&Qv)}x?1NfS
alert(cal.Add($get('txt1').value,$get('txt2').value));
rL-^,C3b.\_0}ITPUB个人空间wyam:TOoX9vE:|s
</script>
运行结果如下,没有问题:
h$@.}!f:r%J0\`0结束语
本文介绍了如何在JavaScript中调用Silverlight,通过前面几篇文章的介绍,如对DOM的操作、在Silverlight中调用
JavaScript、在JavaScript中调用Silverlight等,可以看到,Silverlight与浏览器之间交互有着很好的支持,后面
将继续介绍其它内容。
ITPUB个人空间Dg+hXQ"~My2w