学习SilverLight：（1）SilverLight3.0和JavaScript交互

正在学习SilverLight，记录学习过程

SilverLigth如何和Javascript交互：下面是例子，参看孟子的例子，源地址： http://blog.csdn.net/net_lover/archive/2008/04/10/2272115.aspx

添加新SilverLight页面：Page.xaml,添加

Code
<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

在page.xaml.cs里面添加事件，以及使用 ScriptableTypeAttribute 同时标记所有成员。在您使用 RegisterScriptableObject 方法时，无需使用 ScriptableMemberAttribute 将单独的方法标记为可脚本化，并注册脚本，以便在客户端Javascript调用。

Code
public Page()
        {
            InitializeComponent();
            //此处注册
            HtmlPage.RegisterScriptableObject("aa", this);
        }
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 里面的方法。";

在SiverlightTest.aspx中添加代码：

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

         function SetUserName() {
            if(SilverlightPlugin ==null)
            {
                alert("null");
            }
            else
//如果使用ajax等控件，调用应该改为：
document.getElementByID("db").get_element().Content.aa.InterInvole();
                document.getElementById("db").Content.aa.InterInvole();
         }       
 </script>

//在HTML中插入下面代码
<div id="silverlightControlHost">
      <div style="border: 2px solid #EEE; margin: 20px;padding:20px">
  请输入你的名字：<input id="UserName" type="text" value="" />
  <input type="button" onclick="SetUserName()" value="将名字传递到 Silverlight" />
 </div>
          <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" name="db">
              <param name="source" value="ClientBin/Silverlight.xap"/>
              <param name="onload" value="onLoad" />
                            
              <param name="onerror" value="onSilverlightError" />
              <param name="background" value="white" />
              <param name="minRuntimeVersion" value="3.0.40624.0" />
              <param name="autoUpgrade" value="true" />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none;">
                   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="获取 Microsoft Silverlight" style="border-style: none"/>
              </a>
          </object><iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'></iframe></div

此时，点击SilverLight里面的Button，可以将值传递到SiverlightTest.aspx页面的Input里面，而点击SiverlightTest.aspx里面的button，会将Input里面的值传递到Sliverlight里面，实现两者交互。

举一反三，要实现其他复杂的功能，也变得不难了

还有介绍交互的例子： http://www.cnblogs.com/daizhj/archive/2008/06/10/1216489.html

转载于:https://www.cnblogs.com/wasp520/archive/2009/09/26/1574703.html