一步一步学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个人空间I&QTqh9L^#HJ
cYIP[:T&p0
首先我们编写在Silverlight中的界面布局:
<StackPanelBackground="#CDFCAE"Orientation="Horizontal">
dna,} e NRj0<BorderCornerRadius="10"Width="100"Height="40"Margin="50 10 0 0">
0OSS6\Q0<TextBlockText="结果显示:"FontSize="20"Foreground="Red"></TextBlock>ITPUB个人空间 K2a3?M\7Q dx
</Border>
,`#z.b;C^(l0<BorderCornerRadius="10"Background="Green"Width="300"Height="40">
-i*h#c,^pOP0<TextBlockx:Name="result"FontSize="20"Foreground="White"ITPUB个人空间1bv3VEd2E
Margin="20 5 0 0"></TextBlock>ITPUB个人空间s)HOuV1hEh
</Border>ITPUB个人空间"L@+`k iB@
</StackPanel>
并在加载时注册一个脚本可调用的当前页面实例:
private voidUserControl_Loaded(objectsender,RoutedEventArgse)
3m!@[s x H QN0{ITPUB个人空间/~'J:H*kZ"P}$i
HtmlPage.RegisterScriptableObject("Calculator",this);ITPUB个人空间/E_9oHaw
}
编写一个Add方法,该方法将在JavaScript中被调用,必须为public,用ScriptableMember特性暴露给脚本。
[ScriptableMember]
FG ?4Xg0public voidAdd(intx,inty)ITPUB个人空间:eh/S%F[.}@
{
Qp&Yr%bW[m!F0intz = x + y;ITPUB个人空间3XM|%}R
this.result.Text =String.Format("{0} + {1} = {2}", x, y, z);
J'T~7]n:Y/O6u0}
现在编写测试页中的内容,提供输入的input控件:
<divclass="main">
.?t3J4_V)s*Y5cP?0<inputid="txt1"type="text" />ITPUB个人空间4Cv'If-{4@2g1r6nh
<inputid="txt2"type="text" />
6g-D6Af7wj0<inputid="Button1"type="button"value="确 定"/>
:D:|C,c1^({1J0</div>
编写JavaScript调用Silverlight中的方法,获取Silverlight插件,Calculator就是我们刚才所注册的实例:
<script.type="text/javascript">ITPUB个人空间7l.q z8V qk5b
functioncallSilverlight()
:l)@t/S5z-qs#xr#OVZ0{ITPUB个人空间f*e$Bz:H fY-M~
varslPlugin = $get('Xaml1');ITPUB个人空间9gxB Ip.e$^
Z(gr5p0NM8HaT0slPlugin.content.Calculator.Add($get('txt1').value,$get('txt2').value);ITPUB个人空间z9V ^n"i1J
}
bUp&V