Silverlight与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效果图如下：

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=23, CityAttractions=new List<string>(){"故宫","鸟巢","天安门"}},
new CityData(){CityName="济南",CityLatitude=45, CityAttractions=new List<string>(){"趵突泉","大明湖","千佛山"}},
new CityData(){CityName="深圳",CityLatitude=90,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, 45));//巴黎 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(500);
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(1000); });
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; }
}
}

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



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



3).对于MainPage.xaml.cs



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