一起谈.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之间双向传递数据的功能。

目录
相关文章
|
4月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
50 5
|
22天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
31 3
|
22天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
28 2
|
3月前
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式,包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式,并提供了相应的代码示例。
81 11
Twaver-HTML5基础学习(29)界面交互
|
2月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
27 0
|
3月前
|
前端开发 JavaScript
用最少的代码实现一个HTML可交互表格
该HTML页面展示了一个可交互的表格,用户可以通过点击表格行来高亮显示所选行。使用了基本的`&lt;table&gt;`结构,并通过CSS设置了表格样式及行悬停效果。JavaScript函数`toggleSelect`实现了行选中的切换功能。
|
4月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
61 2
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
35 1
|
4月前
|
数据库 C# 开发者
WPF开发者必读:揭秘ADO.NET与Entity Framework数据库交互秘籍,轻松实现企业级应用!
【8月更文挑战第31天】在现代软件开发中,WPF 与数据库的交互对于构建企业级应用至关重要。本文介绍了如何利用 ADO.NET 和 Entity Framework 在 WPF 应用中访问和操作数据库。ADO.NET 是 .NET Framework 中用于访问各类数据库(如 SQL Server、MySQL 等)的类库;Entity Framework 则是一种 ORM 框架,支持面向对象的数据操作。文章通过示例展示了如何在 WPF 应用中集成这两种技术,提高开发效率。
63 0
|
4月前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互