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=" 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=" 98%" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            年龄:
                        </td>
                        <td>
                            <input id="age" style=" 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=" 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;  0; border: 0px'>
                    </iframe>
                </div>
            </td>
        </tr>
    </table>
</body>

(2)XAML页面

代码

(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')");