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>
<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>
<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");
}
}
/// 标识:【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
}
{
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')");