在silverlight的开发中,可以做到silverlight中写到的方法与javascript中定义的方法交互使用,而且silverligt本身方法的执行效率就较高,后台与前端的交互显得更加容易,如何交互,请看下面的具体实现,涉及test1.xaml和test1.html,这两者都是在创建silverlight应用程序时自动生成的:
一、javascrpt中调用silverlight后台方法
调用的关键在于如何让后台方法(silverlight中定义的方法)暴露给客户端,便于javascript调用,暴露之后,客户端访问silverlight对象,进而找到暴露的后台方法
1、构建浏览器桥
- 引用 using System.Windows.Browser,主要用到HtmlPage对象,代表当前页面。
- 在test1.xaml的load事件里将silverlight注册成宿主Html页上的一个可进行脚本处理的对象
void MainPage_Loaded(object sender, RoutedEventArgs e) { HtmlPage.RegisterScriptableObject("myscript",this); }
- 将已写好的silverlight方法向外部调用者公开,只需添加[ScriptableMember]属性即可
[ScriptableMember] public void UpdateCities(string country) { List<CityData> cities = GetCities(country); itemsCon.ItemsSource = cities; }
2、Html中调用silverlight对象中写的方法
- 在test.html中我们很容易找到<object>标记,这个标记即为silverlight对象,其中包括source、background、onError等参数,将该对象标以id="silverlightobj",这样javascript中就可以根据ID访问该对象
<object id="silverlightobj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SbSCh9_1.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
注:type属性指定要加载的对象的MIME类型,对于silverlight应用程序,要使用的是application/x-silverlight-2这个MIME类型
- 调用后台方法
<script type="text/javascript">
function updatecity(country) {
var slplugin = document.getElementById("silverlightobj");
slplugin.content.myscript.UpdateCities(country);
}
</script>
这样就完成了Html中调用silverlight方法
二、silverlight方法中调用客户端的javascript方法
关键点在HtmlPage.Window.GetProperty("MoveMap") as ScriptObject,获取页面上的script对象
这种调用比较简单,附上代码:
ScriptObject movemap = HtmlPage.Window.GetProperty("MoveMap") as ScriptObject;
movemap.InvokeSelf(strcity);
其中html页面上的script:
<script type="text/javascript">
var map = null;
function GetMap() {
map = new VEMap('mapdiv');
map.LoadMap();
}
function MoveMap(where) {
try {
map.Find(null,where);
} catch (e) {
alert(e.Message);
}
}
</script>
注:GetProperty参数为script方法名
总结:在silverlight中可以用html按钮直接调用C#方法,笔者试了下在asp.net测试类似调用,最终失败,在asp.net上最好还是直接用服务器控件与后台方法直接通信