一起谈.NET技术,Silverlight与HTML双向交互

简介:   Silverlight具备很好的用户体验,但有时需要在页面的布局上进行特殊处理,比如作为webpart集成到Sharepoint中等等。  HTML和Silverlight之间的双向交互可以更灵活的使用Silverlight进行开发,上午摸索了一下,记录在此。

  Silverlight具备很好的用户体验,但有时需要在页面的布局上进行特殊处理,比如作为webpart集成到Sharepoint中等等。

  HTML和Silverlight之间的双向交互可以更灵活的使用Silverlight进行开发,上午摸索了一下,记录在此。

  一,向Silverlight传递数据,实现个性化加载

  Silverlight在HTML中的引用是:

< object data = " data:application/x-silverlight-2, " type = " application/x-silverlight-2 " width = " 100% " height = " 100% " >
          
< param name = " source " value = " ClientBin/VideoCenter.xap " />
          
< param name = " onError " value = " onSilverlightError " />
          
< param name = " background " value = " white " />
          
< param name = " minRuntimeVersion " value = " 4.0.50401.0 " />
          
< param name = " autoUpgrade " value = " true " />
                    
< a href = " http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0 " style = " text-decoration:none " >
              
< img src = " http://go.microsoft.com/fwlink/?LinkId=161376 " alt = " Get Microsoft Silverlight " style = " border-style:none " />
          
</ a >
</ object >

  这种引用插件的方式提供了一系列的参数来实现个性加载,上面的代码中我们加了一行参数

< param name = " initParams " value = " CategoryId=1 " />

  我们可以在Silverlight中处理这些参数,打开Silverlight应用程序的App代码文件,加上接收参数的代码

private void Application_Startup( object sender, StartupEventArgs e)
        {
            
if (e.InitParams.Count ! = 0 )
            {
                foreach(var item in e.InitParams)
                {
                    this.Resources.Add(item.Key, item.Value);
                }
            }
            this.RootVisual
= new MainPage();
        }

  我们看到对e.InitParams的处理,即可得到了HTML中传进来的参数,实现个性化加载:

if (App.Current.Resources[ " CategoryId " ]! = null )
            {
                
int cateId = int .Parse(App.Current.Resources[ " CategoryId " ].ToString());
                CategoryItem c
= new CategoryItem();
                c.CategoryID
= cateId;
                this.gridOfList.Children.Add(c);
            }

  二,Silverlight调用HTML中的脚本资源,实现自身的样式等修改

        首先我们可以在加载Silverlight组件的页面上编写一段Javascript脚本

function InvokePlayer(videoId) {
            document.getElementById(
" divCategory " ).style.display = " none " ;
            var player
= document.getElementById( " divPlayer " );
            player.style.width
= " 100% " ;
            player.style.height
= " 600px " ;
}

  怎么在Silverlight中调用这个脚本呢?我们可以在某个事件中调用Silverlight提供的类方法

System.Windows.Browser.HtmlPage.Window.Invoke( " InvokePlayer " , videoId);

  当然类似的方法还有几个:

(HtmlPage.Window.GetProperty( " InvokePlayer " ) as ScriptObject)InvokeSelf( " Good Function! " );HtmlPage.Window.Eval( " document.getElementById('result') " ) as HtmlElement…

  即可实现调用脚本。经过以上的两个方法即可实现HTML和Silverlight之间双向传递数据的功能。

目录
相关文章
|
12月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
264 6
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式,包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式,并提供了相应的代码示例。
254 10
Twaver-HTML5基础学习(29)界面交互
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
174 3
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
200 2
|
前端开发 JavaScript
用最少的代码实现一个HTML可交互表格
该HTML页面展示了一个可交互的表格,用户可以通过点击表格行来高亮显示所选行。使用了基本的`&lt;table&gt;`结构,并通过CSS设置了表格样式及行悬停效果。JavaScript函数`toggleSelect`实现了行选中的切换功能。
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
215 0
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
340 2
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
138 1
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。

热门文章

最新文章

下一篇
oss云网关配置