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

最新推荐文章于 2024-10-30 19:10:39 发布

szhourj

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量489

点赞数

分类专栏： ASP.NET 文章标签： silverlight javascript application server button border

ASP.NET 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

----------http://dotnet.aspx.cc/article/fb7d9cbd-e11a-40b1-9220-ade9cbbebc67/read.aspx

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

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

Page.xaml：

< UserControl x:Class ="SilverlightApplication1.Page"
    xmlns ="http://schemas.microsoft.com/client/2007"
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    Width ="400" Height ="300" >
     < 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 ="36" ></ TextBlock >
             < Button Click ="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：

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 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 里面的方法。 " ;
        }
    }
}

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());
}

// 定义Silverlight插件对象
var SilverlightPlugin = null ;;
function pluginLoaded(sender)
{
   SilverlightPlugin = sender.get_element();
}
// ]]>
</ script >
</ 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" />
</ 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 ="400px" Height ="300px" />
</ div >
</ form >
</ body >
</ html >

运行结果：