Silverlight与JS交互转载

第一篇：Silverlight中C#获取与修改HTML DOM元素信息
Silverlight中C#获取与修改HTML DOM元素信息
——Silverlight与JavaScript交互第一篇
==================================

在Silverlight 1.1中主要使用C#或者VB进行开发，用C#来处理Silverlight中的所有事物逻辑，而不再是1.0中的JavaScript。也因而使得Silverlight和JavaScript的交互则开始变得复杂起来，无论是要用JavaScript调用C#中的方法，还是要用C#调用JavaScript中的方法。

用C#和JavaScript交互首先要解决C#读取HTML DOM元素的问题。

在Silverlight中，要用C#来读取HTML DOM中的元素非常简单，在System.Windows.Browser命名空间下，有一个HtmlDocument、HtmlPage、HtmlElement等类，可以用来读取HTML DOM元素。其读取方法和JavaScript如出一辙。

引用内容：
//初始化一个document
HtmlDocument document = HtmlPage.Document;
//获取一个DOM节点
dom = document.GetElementByID("yourDomId");
//string

获取到HTML DOM元素结点之后，我们就可以获取DOM元素的值了，例如innerHTML或者innerText或者Value等值了。例如：

引用内容：
string s = dom.GetAttribute("value");

另外，我们也可以通过C#提供的一些方法来动态改变HTML DOM元素的样式或者值。例如：

引用内容：
dom.SetAttribute("innerText", "This is Text");
dom.SetStyleAttribute("left", 40 + "px");
dom.SetStyleAttribute("top", 35 + "px");

OK！第一篇就到这里，后面还有两篇，一篇讲怎么通过JavaScript调用Silverlight（C#）里的方法，一篇讲怎么通过Silverlight（C#）来调用JavaScript里的方法

第二篇：用JavaScript调用Silverlight（C#）中的方法

用JavaScript调用Silverlight（C#）中的方法
——Silverlight与JavaScript交互第二篇
======================================

Silverlight是基于浏览器的应用，因此在Silverlight与用户的交互过程中，经常需要涉及Silverlight与JavaScript的交互，用JavaScript调用Silverlight中的方法也就比较正常。在Silverlight中，提供了这样的解决方式：使用[Scriptable]标签则可以允许JavaScript访问该标签下的类、属性和方法。

用调JavaScript用Silverlight（C#）中的方法的实现步骤如下：

在Page类（自动生成的部分）的上面加上[Scriptable]标签，表示允许JavaScript访问这个类。代码如下：

引用内容：
[Scriptable]
public partial class Page : Canvas

其次，我们要为这个Page类实例注册一个名字，可以为该Page类写一个构造函数，然后在构造函数中为其注册。代码如下：

引用内容：
[Scriptable]
public partial class Page : Canvas
{
    public Page()
    {
        //注册的名字叫做testcallcs
        //在JavaScript代码里面我们会用到这个名字
        WebApplication.Current.RegisterScriptableObject("testcallcs", this);
    }
}

然后我们再在该类中写一个方法，以供JavaScript调用。这个方法也要用[Scriptable]标签标记，如下：

引用内容：
[Scriptable]
public string TestJS()
{
return "This is From C#";
}

特别需要注意的是：目前Silverlight和JavaScript之间只能传递字符串。因此在处理的过程中要注意类型转换。

我们再看看，在JavaScript中怎么调用这个方法。

引用内容：
<script language="javascript" type="text/javascript">
//首先找到你的HTML页面中的Silverlight控件
var ctrl=document.getElementById("SilverlightControl");

//再找到你刚才注册的Page类实例
var manage = ctrl.Content.testcallcs;

//OK，你可以调用刚才写的方法了
alert(manage.TestJS());
</script>

第三篇：用Silverlight（C#）调用JavaScript中的方法

用Silverlight（C#）调用JavaScript中的方法
——Silverlight与JavaScript交互第三篇
==================================

前面一篇讲了用JavaScript调用Silverlight（C#）方法的方式，这一篇讲讲怎样用Silverlight来调用JavaScript方法。

[Scriptable]标记真是非常的好，可以允许JavaScript访问Silverlight中的方法，还可以允许Silverlight来调用JavaScript方法。

和JavaScript调用C#方法一样，首先要为Page类注册一个实例名称，如下：

引用内容：
[Scriptable]
public partial class Page : Canvas
{
    public Page()
    {
        WebApplication.Current.RegisterScriptableObject("OoboyNet", this);
    }
    ....
}

假设我们在XAML中有这样一个矩形或者文本框或者按钮等等（看你自己的选择咯！），并假设它的x:Name为btnRect，那么我们首先在Page_Loaded方法中为其注册一个事件：

引用内容：
btnRect.MouseLeftButtonDown += new MouseEventHandler(btnRect_MouseLeftButtonDown);

然后我们再在C#中声明一个EventHandler，也用[Scriptable]标记一下，如下：

引用内容：
[Scriptable]
public event EventHandler CallJS;

我们再来写刚才为按钮btnRect注册的事件控制函数，代码如下：

引用内容：
void btnRect_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    if (CallJS != null)
    {
        CallJS(this, EventArgs.Empty);
    }
}

好C#中的工作做完了，下面就要写JavaScript了。在JavaScript中，首先要在createSivlerlight方法的events中注册一个onLoad事件，代码如下：

引用内容：
events: {
onLoad : OnLoaded
}

我们再为这个事件写一个控制函数，代码如下：

引用内容：
function OnLoaded(sender, args){
    //我们刚才在C#里注册的实例OoboyNet
    //C#里注册的事件CallJS，现在把这个事件的控制函数指定为JS方法
    sender.Content.OoboyNet.CallJS = JSFunction;
}

好吧，剩下的就是最后指定的那个JS方法了：

引用内容：
function JSFunction(sender, args){
alert("This is from JavaScript");
}

OK，Silverlight与JavaScript、HTML DOM的交互三篇到这里就结束了。