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页面中)

 <%@ Page Language="C#" AutoEventWireup="true" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head runat="server">

     <title>SilverlightDOM</title>

     <style type="text/css">

     html, body {

         height: 100%;

         overflow: auto;

     }

     body {

         padding: 0;

         margin: 0;

     }

     #silverlightControlHost {

         height: 90%;

         text-align:center;

     }

     </style>

     <script type="text/javascript" src="Silverlight.js"></script>

     <!--中文支持http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=zh-cn-->

     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" ></script>

     <script type="text/javascript">

         function onSilverlightError(sender, args) {

             var appSource = "";

             if (sender != null && sender != 0) {

               appSource = sender.getHost().Source;

             }

             var errorType = args.ErrorType;

             var iErrorCode = args.ErrorCode;

             if (errorType == "ImageError" || errorType == "MediaError") {

               return;

             }

             var errMsg = "Silverlight 应用程序中未处理的错误 " +  appSource + "\n" ;

             errMsg += "代码: "+ iErrorCode + "    \n";

             errMsg += "类别: " + errorType + "       \n";

             errMsg += "消息: " + args.ErrorMessage + "     \n";

             if (errorType == "ParserError") {

                 errMsg += "文件: " + args.xamlFile + "     \n";

                 errMsg += "行: " + args.lineNumber + "     \n";

                 errMsg += "位置: " + args.charPosition + "     \n";

             }

             else if (errorType == "RuntimeError") {

                 if (args.lineNumber != 0) {

                     errMsg += "行: " + args.lineNumber + "     \n";

                     errMsg += "位置: " +  args.charPosition + "     \n";

                 }

                 errMsg += "方法名称: " + args.methodName + "     \n";

             }

             引发新错误(errMsg);

         }

     </script>

     <script type="text/javascript" language="javascript">

         //其实这里浏览器桥(JS操作SL数据),涉及两部分:

         //1.服务端注册Silverlight对象的Name和开放的脚本接口

         //2.客户端Silverlight对象指定的服务端桥接对象调用服务端开放脚本接口

         //其根本对Silverlight数据操作仍是Silverlight的操作,只是提供了接口操作者转接到HTML中

         function sliverlightServerData(country) {

             //获取页面的Silverlight对象

             var slPlugin = document.getElementById("sliverlightObject");

             //使用Silverlight对象指定的服务端Name,通过Name调用开放的接口

             slPlugin.Content.SilverlightName.GetCitiesByCountry(country);

         }

     </script>

     <script type="text/javascript" language="javascript">

         //Silverlight操作JavaScript数据

         //JS获取Bing Maps API

         var map = null;

         //获取BingMap地图

         function getBingMap() {

             map = new VEMap('divMap');

             map.LoadMap();

         }

         //移动地图

         //传入地区名称,定位地图位置

         function moveMap(where) {

             try {

                 map.Find(null, where);

             }

             catch (e) {

                 alert(e.Message);

             }

         }

     </script>

 </head>

 <body onload="getBingMap()">

     <form id="form1"   runat="server">

     <div style=" height:400px; margin:10px 5px 0px 10px">

         <!--左侧Div-->

         <div id="silverlightControlHost" style="float:left; height:92%; width:25%;  border:1px solid purple">

             <object id="sliverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

               <param name="source" value="ClientBin/SilverlightDOM.xap"/>

               <param name="onError" value="onSilverlightError" />

               <param name="background" value="white" />

               <param name="minRuntimeVersion" value="4.0.60310.0" />

               <param name="autoUpgrade" value="true" />

               <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" style="text-decoration:none">

                    <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>

               </a>

             </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

             <!--按钮触发操作JavaScript操作Silverlight数据-->

             <div style="width:100%;height:8%;background-color:Orange; border:1px solid blue; text-align:left; vertical-align:middle">

                 <input type="button" value="英国" onclick="sliverlightServerData(this.value)" />

                 <input type="button" value="德国" onclick="sliverlightServerData(this.value)" />

                 <input type="button" value="法国" onclick="sliverlightServerData(this.value)" />

                 <input type="button" value="中国" onclick="sliverlightServerData(this.value)" />

             </div>

         </div>

         <!--右侧Bing Maps展示,注意上面Bing Maps地址脚本的引入-->

         <div id="divMap" style=" float:left; position:relative; width:74%; height:100%; margin:0px auto 0px auto; z-index:2; border:1px solid purple" ></div>

     </div>

     </form>

 </body>

 </html>

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

 <UserControl x:Class="SilverlightDOM.MainPage"

     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

     mc:Ignorable="d"

     d:DesignHeight="300" d:DesignWidth="500" Loaded="UserControl_Loaded">

     <!--定义样式-->

     <UserControl.Resources>

         <Style x:Name="borderStyle" TargetType="Border">

             <Setter Property="BorderBrush" Value="Green"/>

             <Setter Property="BorderThickness" Value="2"/>

         </Style>

     </UserControl.Resources>

     <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">

         <!--Grid行定义-->

         <Grid.RowDefinitions>

             <RowDefinition Height="25"></RowDefinition>

             <RowDefinition Height="50"></RowDefinition>

             <RowDefinition Height="50"></RowDefinition>

             <RowDefinition Height="50"></RowDefinition>

             <RowDefinition Height="50"></RowDefinition>

             <RowDefinition Height="*"></RowDefinition>

         </Grid.RowDefinitions>

         <TextBlock Grid.Row="0" FontSize="15" Foreground="Purple">点击选择按钮定位地图位置：</TextBlock>

         <Border Grid.Row="1" Grid.RowSpan="2" Style="{StaticResource borderStyle}">

             <StackPanel Orientation="Vertical">

                 <TextBlock FontSize="15" Foreground="Purple">UserControlLoad加载数据：</TextBlock>

                 <!--ItemsControl数据源绑定显示-->

                 <ItemsControl x:Name="itemCities">

                     <ItemsControl.ItemTemplate>

                         <DataTemplate>

                             <!--绑定数据-->

                             <StackPanel Orientation="Horizontal" Height="25">

                                 <CheckBox Checked="CheckBox_Checked" Content="{Binding CityName}"></CheckBox>

                                 <TextBlock><Run>（</Run><Run>纬度：</Run></TextBlock>

                                 <TextBlock Foreground="Purple" Text="{Binding CityLatitude}"/>

                                 <TextBlock>）</TextBlock>

                             </StackPanel>

                         </DataTemplate>

                     </ItemsControl.ItemTemplate>

                 </ItemsControl>

             </StackPanel>

         </Border>

         <Border Grid.Row="3" Grid.RowSpan="2"  Style="{StaticResource borderStyle}"  BorderThickness="2,0,2,2">

             <StackPanel Orientation="Vertical">

                 <TextBlock FontSize="15" Foreground="Purple">浏览器桥开放JavaScript接口数据:</TextBlock>

                 <!--ItemsControl数据源绑定显示-->

                 <ItemsControl x:Name="itemHtmlOper">

                     <ItemsControl.ItemTemplate>

                         <DataTemplate>

                             <StackPanel Orientation="Horizontal" Height="25"  >

                                 <RadioButton GroupName="GroupCities" Checked="RadioButton_Checked" Content="{Binding CityName}"/>

                                 <TextBlock>（纬度：</TextBlock>

                                 <TextBlock   Text="{Binding CityLatitude}" />

                                 <TextBlock>）</TextBlock>

                             </StackPanel>

                         </DataTemplate>

                     </ItemsControl.ItemTemplate>

                 </ItemsControl>

             </StackPanel>

         </Border>

         <Border Grid.Row="5" Style="{StaticResource borderStyle}" BorderThickness="2,0,2,2">

             <StackPanel Orientation="Vertical">

                 <TextBlock FontSize="15" Foreground="Purple">ListBox数据绑定测试:</TextBlock>

                 <!--ListBox数据源绑定显示-->

                 <ListBox Name="listCities" >

                     <ListBox.ItemTemplate>

                         <DataTemplate>

                             <StackPanel Orientation="Horizontal"  >

                                 <CheckBox IsChecked="True" Content="{Binding CityName}">

                                     <CheckBox.RenderTransform><!--CheckBox缩放居中-->

                                         <ScaleTransform  ScaleX="1.2" ScaleY="1.2" CenterX="1" CenterY="1"/>

                                     </CheckBox.RenderTransform>

                                 </CheckBox>

                                 <TextBlock FontSize="13" Text="  旅游景点:"/>

                                 <ComboBox Width="100" ItemsSource="{Binding CityAttractions}"/>

                             </StackPanel>

                         </DataTemplate>

                     </ListBox.ItemTemplate>

                 </ListBox>

             </StackPanel>

         </Border>

     </Grid>

 </UserControl>

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

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Net;

 using System.Windows;

 using System.Windows.Controls;

 using System.Windows.Documents;

 using System.Windows.Input;

 using System.Windows.Media;

 using System.Windows.Media.Animation;

 using System.Windows.Shapes;

 using System.Windows.Browser;

 using System.Windows.Media.Imaging;

 namespace SilverlightDOM

 {

     public partial class MainPage : UserControl

     {

         public MainPage()

         {

             InitializeComponent();

         }

         private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

         {

             //ThreadTest();//线程分配测试

             string strCountry = "中国";

             this.itemCities.ItemsSource = GetQueryData(strCountry);//绑定数据

             this.listCities.ItemsSource = GetQueryData(strCountry);//绑定数据

         }

         /// <summary>

         /// 注册Silvelight为脚本调用对象

         /// JavaScript调用Silverlight对象

         /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         private void UserControl_Loaded(object sender, RoutedEventArgs e)

         {

             //HtmlDomOper();//HTML DOM操作

             //浏览器桥,进行HTML与Silverlight交互,以及浏览器端开放的接口GetCitiesByCountry

             //页面加载完成,将Silverlight注册成宿主HTML页上可进行脚本处理对象

             //使用下面的方式注册脚本对象,第一个参数指定名称

             HtmlPage.RegisterScriptableObject("SilverlightName", this);

         }

         /// <summary>

         /// 初始化数据

         /// </summary>

         /// <returns></returns>

         private List<CityData> InitData()

         {

             List<CityData> listCityData = new List<CityData>() {

             new CityData(){CityName="北京",CityLatitude=, CityAttractions=new List<string>(){"故宫","鸟巢","天安门"}},

             new CityData(){CityName="济南",CityLatitude=, CityAttractions=new List<string>(){"趵突泉","大明湖","千佛山"}},

             new CityData(){CityName="深圳",CityLatitude=,CityAttractions=new List<string>(){"欢乐谷","世界之窗","海上田园"}}

             };

             return listCityData;

         }

         /// <summary>

         /// 查询城市信息

         /// </summary>

         /// <param name="queryCondition">所在国家</param>

         /// <returns>该国家城市信息集合</returns>

         private List<CityData> GetQueryData(string queryCondition)

         {

             List<CityData> queryList = new List<CityData>();

             switch (queryCondition)

             {

                 case "中国": queryList = InitData(); break;

                 case "法国":

                     queryList.Add(new CityData("巴黎", 12.6, ));//巴黎 Paris

                     queryList.Add(new CityData("卢尔德", 35.5, 66.6));//卢尔德 lourdes

                     queryList.Add(new CityData("图卢兹", 55.3, 66.5));//图卢兹 Toulouse

                     break;

                 case "英国":

                     queryList.Add(new CityData("伦敦",33.3,45.5));

                     queryList.Add(new CityData("爱丁堡",77.8,88.9));

                     break;

                 case "德国":

                     CityData[] cityArray = new CityData[] {

                     new  CityData("柏林",33.3,66.6),

                     new CityData("汉堡",99.8,88.9),

                     new  CityData("慕尼黑",56.6,67.8)

                     };

                     queryList = cityArray.ToList();

                     break;

                 default: queryList = null; break;

             }

             return queryList;

         }

         /// <summary>

         /// 对于HTML与Silverlight进行交互

         /// 使用ScriptableMember表示对外部调用者公开的方法

         /// </summary>

         /// <param name="country"></param>

         [ScriptableMember]

         public void GetCitiesByCountry(string country)

         {

             List<CityData> listCities = GetQueryData(country);

             itemHtmlOper.ItemsSource = listCities;

         }

         /// <summary>

         /// 模版数据绑定,CheckBox按钮选中事件

         /// Silverlight操作JavaScript数据

         /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         private void CheckBox_Checked(object sender, RoutedEventArgs e)

         {

             string strCityName = string.Empty;

             CheckBox chkBox = sender as CheckBox;

             if (chkBox.IsChecked == true)

             {

                 strCityName = chkBox.Content.ToString();

                 //Silverlight获取JS函数,使用HtmlPage.Window.GetProperty("函数名"),转化为ScriptObject对象

                 //使用转化的ScriptObjcet对象的InvokeSelf(线程处理),调用自己脚本函数传递参数(可选)

                 ScriptObject scriptObject = HtmlPage.Window.GetProperty("moveMap") as ScriptObject;

                 scriptObject.InvokeSelf(strCityName);

             }

         }

         /// <summary>

         /// 模版数据绑定,RadioButton按钮选中事件

         /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         private void RadioButton_Checked(object sender, RoutedEventArgs e)

         {

             string strCityName = string.Empty;

             RadioButton rbButton = sender as RadioButton;

             strCityName = rbButton.Content.ToString();

             ScriptObject scriptObject = HtmlPage.Window.GetProperty("moveMap") as ScriptObject;

             scriptObject.InvokeSelf(strCityName);

         }

         /// <summary>

         /// 对HTML DOM操作支持

         /// </summary>

         private void HtmlDomOper()

         {

             //System.Windows.Browser.HtmlPage.Window;

             //System.Windows.Browser.HtmlPage.Document;

             //System.Windows.Browser.HtmlPage.Plugin;

             //System.Windows.Browser.BrowserInformation;

             //System.Windows.Browser.HtmlDocument;

             //System.Windows.Browser.HtmlElement;

             //System.Windows.Browser.HtmlEventArgs;            

             System.Windows.Browser.HtmlPage.Window.Alert("Web Alert 信息提示！");

             System.Windows.Browser.HtmlPage.Window.Eval("alert('Web Eval JS脚本信息提示！');");//Eval接受脚本函数语法

             bool confirm = HtmlPage.Window.Confirm("Web Confirm 确认删除吗？");

             if (confirm) { HtmlPage.Window.Alert("你点击了确认！"); } else { HtmlPage.Window.Eval("alert('你点击了取消！');"); }

             string promptInfo = HtmlPage.Window.Prompt("Web Prompt信息提示填入!");

             string parentID = HtmlPage.Plugin.Parent.Id;

             HtmlElement htmlElement = HtmlPage.Document.GetElementById(parentID);//button1

             string style = htmlElement.GetAttribute("style");

             HtmlPage.Window.Alert(parentID + "|" + style);

         }

         /// <summary>

         /// 线程分配测试

         /// </summary>

         private void ThreadTest()

         {

             MessageBox.Show("主线程1！");

             Deployment.Current.Dispatcher.BeginInvoke(delegate

             {

                 MessageBox.Show("开辟线程1,线程Sleep 500！"); System.Threading.Thread.Sleep();

                 Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("线程嵌套1！"); });

                 Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("线程嵌套2！"); });

             });

             MessageBox.Show("主线程2！");

             Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("开辟线程2,线程Sleep 1000！"); System.Threading.Thread.Sleep(); });

             MessageBox.Show("主线程3！");

             Deployment.Current.Dispatcher.BeginInvoke(delegate { MessageBox.Show("开辟线程3！"); });

         }

     }

     /// <summary>

     /// 数据结构

     /// </summary>

     public class CityData

     {

         public CityData() { }

         public CityData(string cityName,double cityLatitude,double cityLongitude)

         {

             CityName = cityName;

             CityLatitude = cityLatitude;

             CityLongitude = cityLongitude;

         }

         public string CityName { get; set; }

         public double CityLatitude { get; set; }

         public double CityLongitude { get; set; }

         public List<string> CityAttractions { get; set; }

     }

 }

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

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

3).对于MainPage.xaml.cs

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

最新文章

  1. 浅谈js的事件冒泡机制
  2. CAS单点登录系统整合——注册的问题
  3. nginx 命令
  4. ubuntu卸载java
  5. TStringList中AddObject使用
  6. log4j+logback+slf4j+commons-logging的关系与调试(转)
  7. winform学习2-datagridview数据绑定
  8. POJ 2983 Is the Information Reliable? 信息可靠吗 （差分约束，spfa）
  9. CentOS 6.0 缺少 mcrypt 扩展 解决办法
  10. Unity Shader Prpperties
  11. ecshop改造读写分离配置与改造
  12. Unity中OnGUI绘制贪吃蛇
  13. ocos 信号量
  14. Java中的日期操作
  15. Maven-FAQ
  16. 【前端】向blog或网站中添加语法高亮显示代码方法总结
  17. springboot之Filter指定过滤URL的常见问题
  18. UOJ273 [清华集训2016] 你的生命已如风中残烛 【数学】
  19. Tomcat 加载 jsp 异常：ServletException: java.lang.LinkageError
  20. 《蹭课神器》Beta版使用说明

热门文章

  1. [Java.web]JSTL 使用
  2. 【转】httpservlet 文章
  3. instr 函数从后往前计数 instr(spell,&#39; &#39;,-1)
  4. Navicat 入门使用方法
  5. ES6系列_11之Set和WeakSet数据结构
  6. Windows Git 服务器 客户端 Delphi Git配置
  7. 2013年最后的收成：avalon1.0正式发布
  8. springboot+shiro+jwt
  9. 【poj2411】Mondriaan&#39;s Dream 状态压缩dp
  10. 21.Merge Two Sorted Lists (List)