Silverlight 与 html 相互取得数据

一.【效果图】

功能描述：

1.当在左侧输入姓名年龄点击设置的时候 将值传递给右侧的xaml页面，也可以从XAML页面中获得数据

2.当在右侧输入姓名年龄点击设置的时候 将值传递给左侧的HTML页面, 也可以从Html页面中获得数据

二.【代码结构】

首先建立一个html界面,包括表单以及承载silverlight布局

 (1)html界面

代码

< head  runat ="server" >
     < title ></ title >

     < script  type ="text/javascript"  src ="Silverlight.js" ></ script >

     < script  type ="text/javascript" >
         function  onSilverlightError(sender, args) {
             var  appSource  =   "" ;
             if  (sender  !=   null   &  sender  !=   0 ) {
                appSource  =  sender.getHost().Source;
            }

             var  errorType  =  args.ErrorType;
             var  iErrorCode  =  args.ErrorCode;

             if  (errorType  ==   " ImageError "   ||  errorType  ==   " MediaError " ) {
                 return ;
            }

             var  errMsg  =   " Silverlight 应用程序中未处理的错误 "   +  appSource  +   " \n " ;

            errMsg  +=   " 代码:  "   +  iErrorCode  +   "     \n " ;
            errMsg  +=   " 类别:  "   +  errorType  +   "        \n " ;
            errMsg  +=   " 消息:  "   +  args.ErrorMessage  +   "      \n " ;

             if  (errorType  ==   " ParserError " ) {
                errMsg  +=   " 文件:  "   +  args.xamlFile  +   "      \n " ;
                errMsg  +=   " 行:  "   +  args.lineNumber  +   "      \n " ;
                errMsg  +=   " 位置:  "   +  args.charPosition  +   "      \n " ;
            }
             else   if  (errorType  ==   " RuntimeError " ) {
                 if  (args.lineNumber  !=   0 ) {
                    errMsg  +=   " 行:  "   +  args.lineNumber  +   "      \n " ;
                    errMsg  +=   " 位置:  "   +  args.charPosition  +   "      \n " ;
                }
                errMsg  +=   " 方法名称:  "   +  args.methodName  +   "      \n " ;
            }

             throw   new  Error(errMsg);
        }
     </ script >

</ head >
< body >

     < script  type ="text/javascript" >

         function  On_Set() {

             var  obj  =  document.getElementById( " obj_sl " ).content.UserScript;

            obj.Name  =  document.getElementById( " name " ).getAttribute( " value " )

            obj.Age  =  document.getElementById( " age " ).getAttribute( " value " )
        }

         function  On_Get() {

             var  obj  =  document.getElementById( " obj_sl " ).content.UserScript;

            document.getElementById( " name " ).setAttribute( " value " , obj.Name);

            document.getElementById( " age " ).setAttribute( " value " , obj.Age);

        }
     </ script >

     < table  border ="1"  width ="600"  height ="400"  align ="center" >
         < tr >
             < td  style ="width: 50%" >
                 < p  align ="center" >
                     < span  style ="font-size: x-large;" > HTML页面表单 </ span >
                 </ p >
                 < table  bgcolor ="silver"  align ="center" >
                     < tr >
                         < td >
                            姓名:
                         </ td >
                         < td >
                             < input  id ="name"  style ="width: 98%"   />
                         </ td >
                     </ tr >
                     < tr >
                         < td >
                            年龄:
                         </ td >
                         < td >
                             < input  id ="age"  style ="width: 98%"   />
                         </ td >
                     </ tr >
                     < tr >
                         < td >
                            操作:
                         </ td >
                         < td >
                             < input  id ="btn_Save"  type ="button"  value =">>【设置】"  onclick ="On_Set();"   />
                             < input  id ="btn_clear"  type ="button"  value ="<<【获得】"  onclick ="On_Get();" />
                         </ td >
                     </ tr >
                 </ table >
             </ td >
             < td  style ="width: 50%" >
                 < div  id ="silverlightControlHost"  align ="center" >
                     < object  id ="obj_sl"  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"
                        width ="100%"  height ="100%" >
                         < param  name ="source"  value ="ClientBin/BruceTSilverlightDemo.xap"   />
                         < param  name ="onerror"  value ="onSilverlightError"   />
                         < param  name ="background"  value ="white"   />
                         < param  name ="minRuntimeVersion"  value ="3.0.40818.0"   />
                         < param  name ="autoUpgrade"  value ="true"   />
                         < a  href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.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 >
             </ td >
         </ tr >
     </ table >
</ body >

 (2)XAML页面

代码

  < Grid  x:Name ="LayoutRoot" >
       
         < StackPanel  HorizontalAlignment ="Center"  VerticalAlignment ="Center"   >
             < TextBlock  Text ="XAML页面表单"  FontSize ="25"  Margin ="10" />
             < StackPanel  Orientation ="Horizontal"  Margin ="10" >
                 < TextBlock  Text ="名称:"  FontSize ="18" />
                 < TextBox  Name ="txt_name"  Width ="150"  Text =" {Binding Name,Mode=TwoWay} "   />
             </ StackPanel >
             < StackPanel  Orientation ="Horizontal"  Margin ="10" >
                 < TextBlock  Text ="年龄:"  FontSize ="18" />
                 < TextBox  Name ="txt_age"  Width ="150"  Text =" {Binding Age,Mode=TwoWay} " />
             </ StackPanel >
             < StackPanel  Orientation ="Horizontal"  Margin ="10" >
                 < Button  Content ="【设置】"  Name ="btn_set"  Click ="btn_set_Click"  Margin ="5"  FontSize ="18" />
                 < Button  Content ="【获得】"  Name ="btn_get"  Click ="btn_get_Click"  Margin ="5"  FontSize ="18" />
             </ StackPanel >
         </ StackPanel >
        
     </ Grid >

 (3) XAML后台代码

代码

  ///   <summary>
     ///  标识:【BruceT】
     ///  日期:【2010.11.13】
     ///   </summary>
     public   partial   class  MainPage : UserControl
    {
        System.Windows.Browser.HtmlElement _btn_name;
        System.Windows.Browser.HtmlElement _btn_age;

         public  MainPage()
        {
            InitializeComponent();

            UserScriptable user  =   new  UserScriptable { Name  =   "" , Age  =   ""  };
             base .DataContext  =  user; // 将user赋值给数据上下文。

            System.Windows.Browser.HtmlPage.RegisterScriptableObject( " UserScript " , user); // 将该对象设置成可脚本化

            _btn_name  =  System.Windows.Browser.HtmlPage.Document.GetElementById( " name " );
            _btn_age  =  System.Windows.Browser.HtmlPage.Document.GetElementById( " age " );

        }

         private   void  btn_set_Click( object  sender, RoutedEventArgs e)
        {
            _btn_name.SetAttribute( " value " , txt_name.Text);
            _btn_age.SetAttribute( " value " , txt_age.Text);
        }

         private   void  btn_get_Click( object  sender, RoutedEventArgs e)
        {
             if  (_btn_name.GetAttribute( " value " )  ==   null   ||  _btn_age.GetAttribute( " value " )  ==   null )  return ;

            txt_name.Text  =  _btn_name.GetAttribute( " value " );
            txt_age.Text  =  _btn_age.GetAttribute( " value " );
        }
    }

 (4) 实体类

代码

  public   class  UserScriptable : INotifyPropertyChanged
    {
         private   string  _name;
        [ScriptableMember]
         public   string  Name
        {
             get  {  return  _name; }
             set  { _name  =  value; NOtifyPropertyChanged( " Name " ); }
        }

         private   string  _age;
        [ScriptableMember]
         public   string  Age
        {
             get  {  return  _age; }
             set  { _age  =  value; NOtifyPropertyChanged( " Age " ); }
        }

         #region  INotifyPropertyChanged 成员

         public   event  PropertyChangedEventHandler PropertyChanged;

         public   void  NOtifyPropertyChanged( string  propertyname)
        {
             if  (PropertyChanged  !=   null )
            {
                PropertyChanged( this ,  new  PropertyChangedEventArgs(propertyname));
            }
        }
         #endregion
    }

 

总结,从xaml 赋值/获取值通过html ,相对来说比较简单.

从html 获取xaml 的值，我们需要获得xap 中的内容，那我们如果能让绑定的实体被js 所看到呢这涉及到silverlight 可脚本化的知识点.

常使用的内部对象

HtmlPage.RegisterScriptableObject("silverlightObject", this); //注册可脚本化实例

HtmlPage.Document.GetElementById("btnHello").SetStyleAttribute("display", "inline");//html标记样式属性

// 调用页面的 JavaScript 方法
HtmlPage.Window.Invoke("jsfun", "a");

 // 执行任意 JavaScript 语句
HtmlPage.Window.Eval("jsfun('a')");