一步一步学Silverlight 2系列（22）：在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中，如图所示：
3A"D+s;a"pfE%`0ITPUB个人空间+D^6kR/d

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

<StackPanelBackground="#CDFCAE"Orientation="Horizontal">ITPUB个人空间 q6g
o&i	RL
<BorderCornerRadius="10"Width="100"Height="40"Margin="50 10 0 0">
R5[;H7bN
gl.U0<TextBlockText="结果显示："FontSize="20"Foreground="Red"></TextBlock>
8wr'd$gO~#sC$@0</Border>
]7bo,T	g#J0<BorderCornerRadius="10"Background="Green"Width="300"Height="40">ITPUB个人空间,i;|
m)j8H6~ w
<TextBlockx:Name="result"FontSize="20"Foreground="White"
FR]0B(N[3_w;K0Margin="20 5 0 0"></TextBlock>ITPUB个人空间mm#M%k*B*as
</Border>ITPUB个人空间
[*i6Px#t @
d
</StackPanel>

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

private voidUserControl_Loaded(objectsender,RoutedEventArgse)
a+mz{8{8v X"k!mv0{ITPUB个人空间"AL-BS
R
HtmlPage.RegisterScriptableObject("Calculator",this);
c"{KsbD0W-aP0}

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

[ScriptableMember]
/d-D%Aq"b3[^7I0public voidAdd(intx,inty)
4v5fdk|sUL t9R2T0{
:@9dIkLzE4cin0intz = x + y;
	CLp5{2}7m@0this.result.Text =String.Format("{0} + {1} = {2}", x, y, z);ITPUB个人空间+p9NJmO/Z
}

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

<divclass="main">ITPUB个人空间(ov]%f[(gw#ye
<inputid="txt1"type="text" />ITPUB个人空间/e[Sa2e{
<inputid="txt2"type="text" />ITPUB个人空间+P[6f4`$w-?4b_
<inputid="Button1"type="button"value="确 定"/>ITPUB个人空间b	u
a6Cs:Gk/g
</div>

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

<script.type="text/javascript">ITPUB个人空间8i0fr h)P	K
functioncallSilverlight()
0Z6X sS.PE3L0{
zG7|/oPO2er-F"C0varslPlugin = $get('Xaml1');
9U!rJ'c,m+|i${(K0ITPUB个人空间F4\"~+k	t9f
slPlugin.content.Calculator.Add($get('txt1').value,$get('txt2').value);ITPUB个人空间8SW.Jdm,G0O+x
}ITPUB个人空间jf*G
nZ{3D
</script>

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

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

运行后结果：

使用RegisterCreateableType

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

[ScriptableType]ITPUB个人空间kpvjS
fy
P
public classCalculator
5V
pk0i/uJ
^0{ITPUB个人空间A
T
B'{+x]U[
[ScriptableMember]ITPUB个人空间/n@`U(M/vr-gsO
public intAdd(intx,inty)ITPUB个人空间G#tRC	VN7n}N}
{
5d;rP?Qa4U[1e m)G2jX0returnx + y;
3vY
D'}F]4y:[Lf2j0}ITPUB个人空间z5]
u(}o(u
}

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

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

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

<script.type="text/javascript">ITPUB个人空间C/pm
IJp
functioncallSilverlight()ITPUB个人空间!E^;{)|i-}b
{ITPUB个人空间"z)`v;p1C
varslPlugin = $get('Xaml1');ITPUB个人空间,r#{XgxP
varcal = slPlugin.content.services.createObject("calculator");ITPUB个人空间
\8M(H%W @,|{IB
ITPUB个人空间%^e-L6]	VH5c
alert(cal.Add($get('txt1').value,$get('txt2').value));ITPUB个人空间T6[RCa
}
zdxL
z"XU0</script>

运行结果如下，没有问题：

结束语

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