----------http://dotnet.aspx.cc/article/4c011275-509f-4cce-8274-258477ce5f77/read.aspx
在上一篇文章中,讲述了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 ="JavaScript JSON 对象测试" 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, RoutedEventArgs e) { string UserInputContent = this .UserInput.Text; if (UserInputContent.Equals(String.Empty)) { UserInputContent = " Hello Silverlight World! " ; } else { UserInputContent = " 你好, " + UserInputContent; } HtmlWindow win = HtmlPage.Window; this .Msg.Text = UserInputContent; win.Alert( " Silverlight 里面弹出的对话框。 " + UserInputContent); // 执行页面中的js函数: win.Eval( " getArrayTest() " ); Object[] args = { " 将此参数传递给 js 函数 " }; win.Invoke( " getArrayTest " , args); // 如果页面中的值 HtmlDocument doc = 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, RoutedEventArgs e) { ScriptObject so = HtmlPage.Window.Invoke( " ReturnObject " , null ) as ScriptObject; Staple s = so.ConvertTo < Staple > (); this .Msg2.Text = " 大家好,我在 JavaScript JSON 对象中的名称是: " + s.UserName; } // 接受Html页面传递的 JSON 字符串 [ScriptableMember()] public void ReveiveJSON( string jsonString) { // 注意引用:System.Runtime.Serialization.Json DataContractJsonSerializer json = new DataContractJsonSerializer( typeof (Staple)); System.IO.MemoryStream ms = new System.IO.MemoryStream(System.Text.Encoding.Unicode.GetBytes(jsonString)); Staple staple = 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 Double UserId { 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, StartupEventArgs e) { // Load the main control Page p = new Page(); HtmlPage.RegisterScriptableObject( " SilverlightApplicationExample " , p); // 请注意这里的定义方法,如果这里的p写成 new Page(),则Javascript基本不能给 UserInput 赋值! this .RootVisual = p; } private void Application_Exit( object sender, EventArgs e) { } private void Application_UnhandledException( object sender, ApplicationUnhandledExceptionEventArgs e) { } } } SilverlightApplication1TestPage.aspx:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
%>
<% @ Register Assembly = " System.Web.Silverlight " Namespace = " System.Web.UI.SilverlightControls " TagPrefix = " asp " %> <! 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 > Silverlight 2托管代码与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: 2px solid #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: 2px solid #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 对象测试”按钮,运行结果如下:
|
关键字:Silverlight 2学习教程 |