在JavaScript中调用托管代码-技术开发专区

在JavaScript中调用托管代码

作者：silverlight.cn 编辑：覃里 2007-09-05 17:59

【IT168技术文档】介绍
本篇QuickStart将演示在基于Silverlight的应用程序中怎么样来直接使用JavaScript来访问托管代码中的事件, 属性, 和方法等.这个特性使得客户端的scripts访问.NET Framework的托管代码的扩展库特性成为可能,而不需要回传到服务器.

运行查看想要在基于Silverlight的应用程序中做到以上的功能,你需要准备以下步骤:

Handling XAML文件中的根 CanvasLoaded 事件.

注册然后以可脚本化的对象方式来访问类.

将类中可以用脚本方式来访问的成员标上[Scriptable] 标记.

从JavaScript中Handling 托管代码事件 .

从JavaScript中调用托管代码类的方法.

从JavaScript中访问托管代码类的属性 .

要求 (available from the Silverlight download site):

Microsoft Silverlight 1.1 Alpha.

Microsoft Visual Studio Code Name "Orcas" Beta 1.

Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.

A Silverlight project. For instructions, see How to: Create a Silverlight Project.

从Silverlight Canvas中来handle XAML 事件
处理XAML 的Canvas 中的Loaded 事件,以此来建立Web page和托管代码类之间的联系. 在 XAML文件的Loaded 属性里, 请给该方法指定好名称以便于进行事件处理. 在接下来的示例中, Loaded 属性被赋值为OnLoaded, 这和第二步中处理XAML事件的方法是相关联的.

cs

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Samples.Silverlight.CS.BasicCanvas;assembly=HtmlDOM1.dll"
x:Name="rootCanvas"
Height="500"
Width="500"
Loaded="OnLoaded"
Background="Red"
>
</Canvas>

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="OnLoaded"
x:Class="HtmlDOM1.BasicCanvas;assembly=ClientBin/HtmlDOM1.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>

在托管代码这边添加一个方法,它和第一步中定义的 XAML文件中的命名一样. 这个方法可以处理几乎所有初始化的任务, 创建和注册各种对象,关联事件等等. 在本篇中的代码示例中, Onloaded 方法处理XAML Canvas的 Loaded 事件 .

进行注册然后以可脚本化的对象方式来访问类
在处理初始化任务的方法中,比如像在QuickStart example的类中的Onloaded方法 ,使用RegisterScriptableObject() 方法来注册使这个类使其成为可脚本化的对象 .

cs

//Register the scriptable endpoints 
WebApplication.Current.RegisterScriptableObject("basic", this);

'Register the scriptable endpoints 
WebApplication.Current.RegisterScriptableObject("basic", Me)

在JavaScript里,得到 Silverlight control的托管代码的宿主的引用.

cs

var control = document.getElementById("agControl1");

var control = document.getElementById("SilverlightControl");

创建你在第一步中注册的类的引用,使用你在第一步中添加到注册方法中的名称参数. 在这个代码示例中,这个托管类在第一步中被注册为basic .接下来的JavaScript 代码演示如何使用第二步中创建的control reference来访问已经注册的类中的可脚本化的成员. 这段代码创建了一个 JavaScript 方法来处理类中的自定义事件.

注意
注意代码中的Content accessor(内容访问器),它表示了你得到了XAML文件的可编程的访问.

cs

control.Content.basic.AgeUpdatedEvent = firedFromScriptableEvent;

control.Content.basic.AgeUpdatedEvent = firedFromScriptableEvent;

将类中可以得到访问的成员标记上 [Scriptable] tag
添加[Scriptable] metadata tag 到托管类中的成员上,以申明此类在JavaScript中是可以调用的.

cs

[Scriptable]
public class ScriptingCanvas : Canvas

<Scriptable()> _
Partial Public Class ScriptingCanvas
Inherits Canvas

添加 [Scriptable] tags到类的任何成员,包括类属性,方法,事件等等你希望可以用JavaScript来调用的.下面的示例的类中的一个自定义事件和一个属性都被标记好了.

cs


[Scriptable]
public class CustomEventArgs : EventArgs
{
private int age;
private string name;
public CustomEventArgs(string iname, int iage)
{
age = iage;
name = iname;
}
[Scriptable]
public string Name
{
get { return name; }
set { name = value; }
}
[Scriptable]
public int Age
{
get { return age; }
set { age = value; }
}
}

<Scriptable()> _
Public Class CustomEventArgs
Inherits EventArgs
Private _age As Integer
Private _name As String
Public Sub New(ByVal iname As String, ByVal iage As Integer)
_age = iage
_name = iname
End Sub
<Scriptable()> _
Public Property Name() As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property
<Scriptable()> _
Public Property Age() As Integer
Get
Return _age
End Get
Set(ByVal value As Integer)
_age = value
End Set
End Property
End Class

从JavaScript来处理托管类的事件
在类中申明一个事件处理程序,这样以便于在JavaScript中调用.

注意
托管代码中的事代理可以使用基类EventArgs 类型, 如果他要返回一定的数据到JavaScript, 也可以使用自定义的从 EventArgs派生的类型.

添加[Scriptable] tag 到事件申明上.

注意
如果想要在JavaScript中进行调用,那么独立的属性和自定义的事件都需要标记上 [Scriptable] tag. 可以参照上一部分,关于如何使类成员变成JavaScript中可访问的对象.

cs

[Scriptable]
public event EventHandler<CustomEventArgs> AgeUpdatedEvent;

<Scriptable()> _
Public Event AgeUpdatedEvent As EventHandler(Of CustomEventArgs)

在 Web page中创建一个本地的JavaScript 方法来处理托管代码事件, 给其传入一个与引发这个事件相关的对象的参数 (注册为可脚本化的对象),另外一个参数包含event arguments.

cs

function firedFromScriptableEvent(sender, args)

function firedFromScriptableEvent(sender, args)

在JavaScript中,调用开始注册创建的可脚本化的对象事件.将事件赋值为上一步创建好的JavaScript方法.

cs

control.Content.basic.AgeUpdatedEvent = firedFromScriptableEvent;

control.Content.basic.AgeUpdatedEvent = firedFromScriptableEvent;

从JavaScript中调用托管代码中的类方法
给你开始注册的可脚本化的对象创建一个引用.

注意
在当前版本的 Silverlight中, 当你调用可脚本化的方法,输入参数和返回值都必须是strings 或primitive 类型.

在对象上调用[Scriptable] 标记的方法. 一般的, 你将把输出值赋给页面上某些UI element .接下来的示例代码就是将类方法返回的string值赋给了页面上的某个control.

cs

output.value = control.Content.basic.ReturnAString(input.value, parseInt(inputAge.value));

output.value = control.Content.basic.ReturnAString(input.value, parseInt(inputAge.value));

使用JavaScript来得到或者设置托管类属性值
在托管代码中将要进行访问的属性标上 [Scriptable] 标记. 接下来的代码示例演示了一个[Scriptable] 属性.

cs

private int makeMeYounger = 0;
[Scriptable]
public int MakeMeYoungerProperty
{
get { return (makeMeYounger - 20); }
set { makeMeYounger = value; }
}

Private makeMeYounger As Integer = 0
<Scriptable()> _
Public Property MakeMeYoungerProperty() As Integer
Get
Return makeMeYounger - 20
End Get
Set(ByVal value As Integer)
makeMeYounger = value
End Set
End Property

给你开始在托管代码中注册的可脚本化的Silverlight对象在JavaScript中创建一个引用.

直接设置或者是得到[Scriptable] 属性的值, 接下来的示例演示,当user单击一个按钮. JavaScript 代码创建一个Silverlight object的引用 , 设置属性值,得到属性值 (该值已经由刚才的过程而改变了), 然后显示出来.

注意
再一次, 注意 Content accessor 的调用来得到可脚本化的对象的引用.

cs

function CallMakeMeYounger()
{
var control = document.getElementById("agControl1");
var ageInput = parseInt("40");
control.Content.basic.MakeMeYoungerProperty = ageInput;
var retvalA = "I just set the MakeMeYounger managed code property using JavaScript to: " + ageInput.toString();
alert(retvalA);
var retvalB = "I just updated the MakeMeYounger property value in managed code to: " + control.Content.basic.MakeMeYoungerProperty;
alert(retvalB);
}

function CallMakeMeYounger()
{
var control = document.getElementById("SilverlightControl");
var ageInput = parseInt("40");
control.Content.basic.MakeMeYoungerProperty = ageInput;
var retvalA = "I just set the MakeMeYounger managed code property using JavaScript to: " + ageInput.toString();
alert(retvalA);
var retvalB = "I just updated the MakeMeYounger property value in managed code to: " + control.Content.basic.MakeMeYoungerProperty;
alert(retvalB);
}

原文地址

关注我们