Silverlight 2学习教程（五）：JavaScript与Silverlight托管代码相互调用

要实现JavaScript调用Silverlight程序里面的托管代码，需要先在应用程序的启动（Application_Startup）事件里注册要进行访问的对象，而要从Silverlight的托管代码里访问HTML页面对象或者页面中的JavaScript，使用HtmlPage的Document/HtmlElement和HtmlWindow即可。

下面，我们就以例子来说明两者相互访问的方法，代码里面有很详细的注释，这里不再累述。

Page.xaml：

<UserControlx:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400"Height="300">
<Gridx:Name="LayoutRoot"Background="White">
<CanvasCanvas.Top="20">
<TextBlockCanvas.Top="10"Canvas.Left="20">请输入您的姓名：</TextBlock>
<TextBoxx:Name="UserInput"Width="200"Height="30"Canvas.Top="40"Canvas.Left="20"></TextBox>
<TextBlockx:Name="Msg"Canvas.Top="90"Canvas.Left="20"Foreground="Navy"FontSize="36"></TextBlock>
<ButtonClick="Button_Click"Content="单击我"FontSize="24"Width="160"Height="60"x:Name="BtnTest"Canvas.Top="160"Canvas.Left="20"></Button>
</Canvas>
</Grid>
</UserControl>

Page.xaml.cs：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
usingSystem.Windows.Browser;

namespaceSilverlightApplication1
{
publicpartialclassPage:UserControl
{
publicPage()
{
InitializeComponent();
}


privatevoidButton_Click(objectsender,RoutedEventArgse)
{
stringUserInputContent=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()]
publicstringInterInvole()
{
stringusername=HtmlPage.Document.GetElementById("UserName").GetAttribute("value");
this.UserInput.Text=username;
this.Msg.Text="您输入了："+username;
return"你从js脚本中调用了Silverlight里面的方法。";
}
}
}

App.xaml.cs：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
usingSystem.Windows.Browser;

namespaceSilverlightApplication1
{
publicpartialclassApp:Application
{

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

InitializeComponent();
}

privatevoidApplication_Startup(objectsender,StartupEventArgse)
{
//Loadthemaincontrol
Pagep=newPage();
HtmlPage.RegisterScriptableObject("SilverlightApplicationExample",p);

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

privatevoidApplication_Exit(objectsender,EventArgse)
{

}
privatevoidApplication_UnhandledException(objectsender,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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Silverlight2托管代码与Javascript交互的例子</title>
<scripttype="text/javascript">
//<!{CDATA[
//定义全局变量：
vartestVar="孟宪会";

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

functionSetUserName()
{
alert(SilverlightPlugin.Content.SilverlightApplicationExample.InterInvole());
}

//定义Silverlight插件对象
varSilverlightPlugin=null;;
functionpluginLoaded(sender)
{
SilverlightPlugin=sender.get_element();
}
//]]>
</script>
</head>
<bodystyle="height:100%;margin:0;">
<formid="form1"runat="server">
<divstyle="border:2pxsolid#EEE;margin:20px;padding:20px">
请输入你的名字：<inputid="UserName"type="text"value=""/>
<inputtype="button"onclick="SetUserName()"value="将名字传递到Silverlight"/>
</div>
<br/>
<divstyle="border:2pxsolid#EEE;margin:20px;">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<asp:SilverlightID="Xaml1"runat="server"OnPluginLoaded="pluginLoaded"Source="~/ClientBin/SilverlightApplication1.xap"Version="2.0"Width="400px"Height="300px"/>
</div>
</form>
</body>
</html>

运行结果：