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 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
182 5
|
11月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
2790 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
12月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
432 5
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
146 1
【JavaScript】网页交互的灵魂舞者
|
12月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
323 4
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
304 4
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
130 2
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`<transition>`和`<transition-group>`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
299 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
163 0
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
160 0