在Silverlight应用程序中前段JavaScript与后台C#之间的交互

1. JavaScript代码中调用C#函数，即前台与后台交互

(1) 引入System.Windows.Browser类库，代码如下

using System.Windows.Browser;

(2) 先在C#某个函数中利用HtmlPage中的RegisterScriptableObject函数注册一个JavaScript的可执行的对象，代码如下

HtmlPage.RegisterScriptableObject("TestScriptObject", this);

(3) 利用ScriptableMember在后台代码中(此处在C#中)声明一个前台JavaScript函数能调用的函数，代码如下

[ScriptableMember]

public void show(string e)

{

//传入参数可以是普通数据类型，如string等，也可以是JavaScript对象ScriptObject

MessageBox.Show("前台代码调用后台代码成功");

}

(4) 在前台JavaScript中调用后台C#函数

<script type="text/javascript">

function Bt_click() {

var silClient = document.getElementById("silverClient"); //silverClient是在<object>中

var content = silClient.Content.TestScriptObject; //这是上面C#注册的进行前台与后台交互的对象

if (content == undefined)

return;

content.show("开始"); //调用前台与后台交互的show()接口

}

</script>

<form id="form1" runat="server" style="height:100%">

<div id="silverlightControlHost">

<input id="Button1" type="button" value="button" onclick="Bt_click();"/>

<object id="silverClient" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/test.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="5.0.61118.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

</form>

C#中的大概代码如下所示：

using System.Windows.Browser;

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("TestScriptObject", this); //注册对象

}

[ScriptableMember]

public void show(string e)

{

//传入参数可以是普通数据类型，如string等，也可以是JavaScript对象ScriptObject

MessageBox.Show("前台代码调用后台代码成功");

}

}

2. 从C#中调用JavaScript函数，即后台与前台交互

(1) 引入System.Windows.Browser类库

using System.Windows.Browser;

(2) 在前台网页中定义一个JavaScript函数，JavaScript代码如下

<script type="text/javascript">

function onSilverlightLoad() {

alert("后台调用前台函数：");

}

</script>

(3) 在后台的C#代码中调用JavaScript函数，C#代码如下

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

HtmlPage.Window.Invoke("onSilverlightLoad");

}

注意：若JavaScript函数中有参数，如下

(1) 在前台网页中定义一个JavaScript函数，JavaScript代码如下

<script type="text/javascript">

function onSilverlightLoad(parameter) {

alert("后台调用前台函数："+parameter);

}

</script>

(2) 在后台的C#代码中调用JavaScript函数，C#代码如下

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

HtmlPage.Window.Invoke("onSilverlightLoad","from C# call javascript funcion");

}

调用输出：后台调用前台函数：from C# call javascript funcion