Silverlight 2学习教程（六）： Silverlight托管代码调用Javascript中的JSON对象

在上一篇Blog文章中，讲述了JavaScript与Silverlight托管代码相互调用的一些方法。实际上，HtmlWindow的GetProperty方法和Invoke/InvokeSelf方法的返回值是Object类型的，代表 DOM对象或者JavaScript对象（HtmlDocument、HtmlElement、HtmlObject、ScriptObject）的返回值自动作为最接近的类型进行返回，但是，程序开发人员仍然需要明确地将该对象转换成相应的类型。所有的数字，由于跨浏览器的原因，都作为Double类型返回，如果需要Int32类型，则执行Convert.ToInt32()方法即可。

在现代的Web应用中，JSON的使用越来越频繁。Silverlight 2中要调用JavaScript中的JSON对象，首先在托管代码中声明一个类，类的属性与JSON对象的属性一致（不必完全一致），然后在托管代码中将ScriptObject对象转换成声明的这个类型即可。

下面是一个完整的例子：

Page.xaml：

< UserControl x:Class ="SilverlightApplication1.Page"
xmlns ="http://schemas.microsoft.com/client/2007"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
Width ="600" Height ="480" >
< Grid x:Name ="LayoutRoot" Background ="White" >
< Canvas Canvas.Top ="20" >
< TextBlock Canvas.Top ="10" Canvas.Left ="20" > 请输入您的姓名： </ TextBlock >
< TextBox x:Name ="UserInput" Width ="200" Height ="30" Canvas.Top ="40" Canvas.Left ="20" ></ TextBox >
< TextBlock x:Name ="Msg" Canvas.Top ="90" Canvas.Left ="20" Foreground ="Navy" FontSize ="18" Width ="500" ></ TextBlock >
< Button Click ="Button_Click" Content ="单击我" FontSize ="24" Width ="160" Height ="60" x:Name ="BtnTest" Canvas.Top ="160" Canvas.Left ="20" ></ Button >
< Button Click ="JSONButton_Click" Content ="JavaScriptJSON对象测试" FontSize ="24" Width ="300" Height ="50" Canvas.Top ="240" Canvas.Left ="20" ></ Button >
< TextBlock x:Name ="Msg2" Canvas.Top ="300" Canvas.Left ="20" Foreground ="Navy" FontSize ="18" Width ="500" ></ TextBlock >
< TextBlock x:Name ="Msg3" Canvas.Top ="320" Canvas.Left ="20" Foreground ="Navy" FontSize ="18" Width ="500" ></ TextBlock >
</ Canvas >
</ Grid >
</ UserControl >

Page.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
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.Runtime.Serialization.Json;

namespace SilverlightApplication1
{
public partial class Page:UserControl
{
public Page()
{
InitializeComponent();
}


private void Button_Click( object sender,RoutedEventArgse)
{
string UserInputContent = this .UserInput.Text;
if (UserInputContent.Equals(String.Empty))
{
UserInputContent = " HelloSilverlightWorld! " ;
}
else
{
UserInputContent = " 你好， " + UserInputContent;
}
HtmlWindowwin = HtmlPage.Window;
this .Msg.Text = UserInputContent;
win.Alert( " Silverlight里面弹出的对话框。 " + UserInputContent);
// 执行页面中的js函数：
win.Eval( " getArrayTest() " );
Object[]args = { " 将此参数传递给js函数 " };
win.Invoke( " getArrayTest " ,args);

// 如果页面中的值
HtmlDocumentdoc = HtmlPage.Document;
doc.GetElementById( " UserName " ).SetAttribute( " value " , this .UserInput.Text);
}

[ScriptableMember()]
public string InterInvole()
{
string username = HtmlPage.Document.GetElementById( " UserName " ).GetAttribute( " value " );
this .UserInput.Text = username;
this .Msg.Text = " 您输入了： " + username;
return " 你从js脚本中调用了Silverlight里面的方法。 " ;
}

private void JSONButton_Click( object sender,RoutedEventArgse)
{
ScriptObjectso = HtmlPage.Window.Invoke( " ReturnObject " , null ) as ScriptObject;
Staples = so.ConvertTo < Staple > ();
this .Msg2.Text = " 大家好，我在JavaScriptJSON对象中的名称是： " + s.UserName;
}

// 接受Html页面传递的JSON字符串
[ScriptableMember()]
public void ReveiveJSON( string jsonString)
{
// 注意引用：System.Runtime.Serialization.Json

DataContractJsonSerializerjson = new DataContractJsonSerializer( typeof (Staple));
System.IO.MemoryStreamms = new System.IO.MemoryStream(System.Text.Encoding.Unicode.GetBytes(jsonString));
Staplestaple = new Staple();
staple = (Staple)json.ReadObject(ms);
Msg3.Text = " UserId= " + staple.UserId.ToString() + " ，UserName= " + staple.UserName;
}
}

public class Staple
{
public string UserName{ set ; get ;}
public DoubleUserId{ set ; get ;}
}
}

App.xaml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
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;

namespace SilverlightApplication1
{
public partial class App:Application
{

public App()
{
this .Startup += this .Application_Startup;
this .Exit += this .Application_Exit;
this .UnhandledException += this .Application_UnhandledException;

InitializeComponent();
}

private void Application_Startup( object sender,StartupEventArgse)
{
// Loadthemaincontrol
Pagep = new Page();
HtmlPage.RegisterScriptableObject( " SilverlightApplicationExample " ,p);

// 请注意这里的定义方法，如果这里的p写成newPage()，则Javascript基本不能给UserInput赋值！
this .RootVisual = p;
}

private void Application_Exit( object sender,EventArgse)
{

}
private void Application_UnhandledException( object sender,ApplicationUnhandledExceptionEventArgse)
{

}
}
}

SilverlightApplication1TestPage.aspx：

<% @PageLanguage = " C# " AutoEventWireup = " true " %>

<% @RegisterAssembly = " System.Web.Silverlight " Namespace = " System.Web.UI.SilverlightControls " TagPrefix = " asp " %>
<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Silverlight2托管代码与Javascript交互的例子 </ title >
< script type ="text/javascript" >
// <!{CDATA[
// 定义全局变量：
var testVar = " 孟宪会 " ;

// 定义全局函数：
function getArrayTest()
{
if (arguments.length > 0 )
{
alert( " js对话框：您传递了参数。 " + arguments[ 0 ]);
return arguments[ 0 ];
}
else
{
alert( " js对话框：无参数调用。 " );
return " js函数返回值 " ;
}
}

function SetUserName()
{
alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole());
}


var Staple = {
UserId: 100 ,
UserName: ' 孟宪会 ' ,
SayHello: function (){alert( this .UserName)}
};

function ReturnObject()
{
return Staple;
}

function SendJSONToSilverlight()
{
SilverlightPlugin.Content.SilverlightApplicationExample.ReveiveJSON(JSON.stringify(Staple));
}

// 定义Silverlight插件对象
var SilverlightPlugin = null ;;
function pluginLoaded(sender)
{
SilverlightPlugin = sender.get_element();
}
// ]]>
</ script >
< script src ="json2.js" type ="text/javascript" ></ script >
<!-- http://www.JSON.org/json2.js -->
</ head >
< body style ="height:100%;margin:0;" >
< form id ="form1" runat ="server" >
< div style ="border:2pxsolid#EEE;margin:20px;padding:20px" >
请输入你的名字： < input id ="UserName" type ="text" value ="" />
< input type ="button" onclick ="SetUserName()" value ="将名字传递到Silverlight" /> < input type ="button" onclick ="SendJSONToSilverlight()" value ="将JSON传递到Silverlight" />
</ div >
< br />
< div style ="border:2pxsolid#EEE;margin:20px;" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
</ asp:ScriptManager >
< asp:Silverlight ID ="Xaml1" runat ="server" OnPluginLoaded ="pluginLoaded" Source ="~/ClientBin/SilverlightApplication1.xap" Version ="2.0" Width ="600px" Height ="480px" />
</ div >
</ form >
</ body >
</ html >

单击“JavaScript JSON 对象测试”按钮，运行结果如下：