SilverLight学习笔记--Silverligh之在Javascript中调用.NET(包括简单参数和复杂参数的操作)
要在Javascript中调用.NET代码，我们需要先引入命名空间：
using
System.Windows.Browser;
//
引入此空间
然后，在此命名空间下，我们可用到HtmlPage对象，它有重要两个方法：
1
、RegisterScriptableObject方法，它用来注册可被脚本使用的对象实例.
2 、RegisterCreateableType方法，它用于注册可被脚本使用的类型．
2 、RegisterCreateableType方法，它用于注册可被脚本使用的类型．
此外，还有两个将要用到的暴露类型和成员的设置
1
、[ScriptableType]:它允许Silverlight把类型暴露给脚本，
2 、[ScriptableMember],它会把成员方法或属性暴露给脚本．
2 、[ScriptableMember],它会把成员方法或属性暴露给脚本．
下面，我们开始学习如何使用上述方法和类来从javascript访问.NET代码。
首先，我们新建Silverlight应用程序，如图:
在SLJsCallNetFunctionTestPage.aspx中创建用户界面如图:
SLJsCallNetFunctionTestPage.aspx界面代码如下:
Code
一、简单参数的操作
在SL中定义一个类MyJSNetFunction,在此类中我们定义一段做加法运算的代码，此运算需要传入两个简单Int参数，返回值也为Int类型。其代码如下:
using
System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 此入此命名空间
namespace SLJsCallNetFunction
{
[ScriptableType]
public class MyJSNetFunction
{
[ScriptableMember]
public int SLAdd( int x, int y)
{
return (x + y);
}
}
}
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 此入此命名空间
namespace SLJsCallNetFunction
{
[ScriptableType]
public class MyJSNetFunction
{
[ScriptableMember]
public int SLAdd( int x, int y)
{
return (x + y);
}
}
}
在SL后台代码注册上面定义的.NET Function,Page.xaml.cs代码如下:
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
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 SLJsCallNetFunction
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded); // 添加Loaded事件
}
private void Page_Loaded( object sender, RoutedEventArgs e)
{
MyJSNetFunction netInstance = new MyJSNetFunction();
HtmlPage.RegisterScriptableObject( " MyJsObject " ,netInstance); // 注册
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Net;
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 SLJsCallNetFunction
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded); // 添加Loaded事件
}
private void Page_Loaded( object sender, RoutedEventArgs e)
{
MyJSNetFunction netInstance = new MyJSNetFunction();
HtmlPage.RegisterScriptableObject( " MyJsObject " ,netInstance); // 注册
}
}
}
在SLJsCallNetFunctionTestPage.aspx中编写Javascript程序段，引用上面注册的.NET代码段,Javascript代码如下:
<
script type
=
"
text/javascript
"
>
function OnClickCaculate()
{
// 取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
var control = $ get ( " Xaml1 " );
var content = control.content;
var netObject = content.MyJsObject;
// 分别取得两个TextBox输入框的数值
var txtBxNumberOne = document.getElementById( " txtBxNumOne " );
var NumberOne = txtBxNumberOne.value;
var txtBxNumberTwo = document.getElementById( " txtBxNumTwo " );
var NumberTwo = txtBxNumberTwo.value;
// 调用.NET Function代码进行运算并返回运算结果
var result = netObject.SLAdd(NumberOne, NumberTwo);
alert(result);
}
</ script >
function OnClickCaculate()
{
// 取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
var control = $ get ( " Xaml1 " );
var content = control.content;
var netObject = content.MyJsObject;
// 分别取得两个TextBox输入框的数值
var txtBxNumberOne = document.getElementById( " txtBxNumOne " );
var NumberOne = txtBxNumberOne.value;
var txtBxNumberTwo = document.getElementById( " txtBxNumTwo " );
var NumberTwo = txtBxNumberTwo.value;
// 调用.NET Function代码进行运算并返回运算结果
var result = netObject.SLAdd(NumberOne, NumberTwo);
alert(result);
}
</ script >
SLJsCallNetFunctionTestPage.aspx.cs ASP.NET页面代码如下:
Code
二、复杂参数的操作
还是用到我们在"SilverLight学习笔记--Silverligh之在SL中调用Javascript (四种方法+简单与复杂参数的传递) "一文中定义的两个类
即：PlusNumbers类与PlusResults.cs类
PlusNumbers类定义如下:
Code
PlusResults类定义如下:
Code
修改MyJSNetFunction.cs代码内容如下(我们把它的SLAdd函数的传参改为传入上述定义的PlusNumber类实例，返回类型则为PlusResult类):
using
System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 此入此命名空间
namespace SLJsCallNetFunction
{
[ScriptableType]
public class MyJSNetFunction
{
// 此处定义的代码段传入和返回的都是复杂的参数（即：我们自定义的两个类）
// 编写一个SLAdd方法，该方法将在JavaScript中被调用，必须为public，用ScriptableMember特性暴露给脚本。
[ScriptableMember]
public PlusResults SLAdd(PlusNumbers OpNumbers)
{
PlusResults plReturn = new PlusResults();
plReturn.RetValue = OpNumbers.X + OpNumbers.Y;
return plReturn;
}
}
}
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 此入此命名空间
namespace SLJsCallNetFunction
{
[ScriptableType]
public class MyJSNetFunction
{
// 此处定义的代码段传入和返回的都是复杂的参数（即：我们自定义的两个类）
// 编写一个SLAdd方法，该方法将在JavaScript中被调用，必须为public，用ScriptableMember特性暴露给脚本。
[ScriptableMember]
public PlusResults SLAdd(PlusNumbers OpNumbers)
{
PlusResults plReturn = new PlusResults();
plReturn.RetValue = OpNumbers.X + OpNumbers.Y;
return plReturn;
}
}
}
修改Page.xaml.cs代码内容如下:
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
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 SLJsCallNetFunction
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded); // 添加Loaded事件
}
private void Page_Loaded( object sender, RoutedEventArgs e)
{
MyJSNetFunction netInstance = new MyJSNetFunction();
HtmlPage.RegisterScriptableObject( " MyJsObject " , netInstance); // 加载时注册一个脚本可调用的当前页面实例：
// HtmlPage.RegisterCreateableType("OpNumbers", typeof(PlusNumbers)); // 把在SL中定义的一个类映射为将在Javascript代码中使用的类型
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Net;
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 SLJsCallNetFunction
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded); // 添加Loaded事件
}
private void Page_Loaded( object sender, RoutedEventArgs e)
{
MyJSNetFunction netInstance = new MyJSNetFunction();
HtmlPage.RegisterScriptableObject( " MyJsObject " , netInstance); // 加载时注册一个脚本可调用的当前页面实例：
// HtmlPage.RegisterCreateableType("OpNumbers", typeof(PlusNumbers)); // 把在SL中定义的一个类映射为将在Javascript代码中使用的类型
}
}
}
修改Javascript代码如下:
<
script type
=
"
text/javascript
"
>
function OnClickCaculate()
{
// 取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
var myXaml = $ get ( " Xaml1 " );
var content = myXaml.content;
var netObject = content.MyJsObject;
// 分别取得两个TextBox输入框的数值
var txtBxNumberOne = document.getElementById( " txtBxNumOne " );
var NumberOne = txtBxNumberOne.value;
var txtBxNumberTwo = document.getElementById( " txtBxNumTwo " );
var NumberTwo = txtBxNumberTwo.value;
// 传参处理
var args = netObject.createManagedObject( " PlusNumbers " );
args.X = NumberOne;
args.Y = NumberTwo
// 调用.NET Function代码进行运算并返回运算结果
var result = netObject.SLAdd(args);
alert(result.RetValue);
}
</ script >
function OnClickCaculate()
{
// 取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
var myXaml = $ get ( " Xaml1 " );
var content = myXaml.content;
var netObject = content.MyJsObject;
// 分别取得两个TextBox输入框的数值
var txtBxNumberOne = document.getElementById( " txtBxNumOne " );
var NumberOne = txtBxNumberOne.value;
var txtBxNumberTwo = document.getElementById( " txtBxNumTwo " );
var NumberTwo = txtBxNumberTwo.value;
// 传参处理
var args = netObject.createManagedObject( " PlusNumbers " );
args.X = NumberOne;
args.Y = NumberTwo
// 调用.NET Function代码进行运算并返回运算结果
var result = netObject.SLAdd(args);
alert(result.RetValue);
}
</ script >
SLJsCallNetFunctionTestPage.aspx页面代码内容如下:
Code
运行效果如下:
本文程序在Silverlight2.0和VS2008环境中调试通过。本文参照了部分网络资料，希望能够抛砖引玉，大家共同学习。
(转载本文请注明出处)