开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Silverlight与JavaScript的交互操作

简介:
+关注继续查看

ilverlight与JavaScript的交互操作

Silverlight和JavaScript交互介绍以及简单Demo演示,主要包括JavaScript操作Silverlight数据、Silverlight操作JavaScript数据以及数据模版绑定数据。

1.Silverlight和JavaScript概念 
可能有的朋友对于这两技术都很熟悉,有的可能不是很熟悉,为了下面好理解简单介绍一下。 
(1).JavaScript 
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它是一种动态、弱类型、基于原型的语言,内置支持类,做Web开发应该是常用的技术。 
(2).Silverlight 
Silverlight是一个跨浏览器的、跨平台的插件,是基于NET FrameWork的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模型,并可以很方便地集成到现有的网络应用程序中。Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传递,一种富客户端技术。

2.简单理解SL与JS交互 
Silverlight与JavaScript交互操作可分为两种:JavaScript操作Silverlight和Silverlight操作JavaScript,可能理解不是很到位,欢迎补充。 
(1).对于JavaScript操作Silverlight的理解 
使用浏览器桥对象可以分两步来处理: 
A.在服务端页面加载完毕将Silverlight注册成宿主HTML页可进行脚本调用对象。 
(需指定调用Silverlight插件的ScriptKey以及指定服务端公开接口,供JavaScript对象调用) 
B.在客户端找到调用的Silverlight对象,调用服务端相关对象和接口操作数据。 
(还是Silverght机制编写逻辑,只是开放服务端接口,供JavaScript调用执行不同数据操作)

(2).对于Silverlight操作JavaScript的理解 
A.在客户端定义JavaScript的相关JS函数方法操作。 
B.在服务端通过Silverlight封装的对象获取客户端的JS函数,执行不同的脚本操作。 
(使用 HtmlPage.Window.GetProperty获取客户端的JS函数,执行InvokeSelf传递参数操作JS函数)

3.示例Demo演示
这里不介绍如何创建一个Silverlight程序,感兴趣的话可以查查相关资料,使用VS2010新建项目选择Silverlight应用程序就可以。 
(1).Demo效果图展示
简单介绍一下这个Demo,Demo效果图如下: 

这里的使用Div布局将页面切成2大块,左边的数据操作,右边的BingMap的展示(是用来展示SL操作JS的实现动态切换)。
左侧是Silverlight效果,整体使用Grid分配布局,使用三个Border布局进行不同的数据展示,数据采用数据模版绑定,左侧下面是一个按钮操作Div(是用来展示JS操作SL的数据实现动态加载)
(2).Demo代码
1).Silverlihgt项目Web项目中宿主ASPX页面HTML代码:(也可放在宿主HTML页面中)

 View Code

2).Silverlight项目MainPage.xaml页面代码:

 View Code

3).Silverlight项目MainPage.xaml.cs代码:

 View Code

(3).Demo代码简说
1).对于宿主页面注意:BingMaps脚本地址引入及其布局调整

 2).对于MainPage.XAML页面布局

3).对于MainPage.xaml.cs

比较简单容易理解,对于Silverlight和JavaScript交互有更好理解的欢迎交流。

 本文转自SanMaoSpace博客园博客,原文链接:http://www.cnblogs.com/SanMaoSpace/p/3280688.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
0 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
0 0
JS中实现或退出全屏
JS中实现或退出全屏
0 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
0 0
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
0 0
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript面向对象的程序设计
立即下载
JavaScript异步编程
立即下载
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载