从 JavaScript 调用silverlight方法

先决条件

Silverlight 版本 4.用于 Visual Studio 2010 的 Silverlight 4 Tools.Microsoft Visual Studio 2010.

创建 Silverlight 项目和测试页

略

注册用于客户端脚本访问的托管代码

1、

public Page()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Page", this);
this.timer = new DispatcherTimer();
this.timer.Tick += new EventHandler(Timer_Tick);
this.timer.Interval = TimeSpan.FromMilliseconds(400);
}

2、在 script 元素中，创建 Silverlight 应用程序完成加载后将调用的 pluginLoaded 函数。

<script type="text/javascript" language="javascript">var slcontrol = null;function pluginLoaded(sender, args) {if (sender != null && sender != 0) {slcontrol = sender.getHost();}}function StartPare( a, b)      {if (slcontrol) {slcontrol.Content.Page.StartPara(a,b);}}function ReturnPare() {if (slcontrol) {var j = slcontrol.Content.Page.StopPara();alert(j.toString());}}</script>

3、Silverlight 控件标记与下面的代码类似：

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="300"><param name="source" value="ClientBin/JavaScriptToSilverlight.xap"/><param name="onError" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="4.0.50401.0" /><param name="autoUpgrade" value="true" /><param name="onload" value="pluginLoaded" /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/></a></object>

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}.codearea pre.alt{ background-color:#f7f7ff !important}.codearea .lnum{color:#4f81bd;line-height:18px}使用 JavaScript 获取和设置托管代码属性值该按钮的 HTML 标记.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}.codearea pre.alt{ background-color:#f7f7ff !important}.codearea .lnum{color:#4f81bd;line-height:18px}显示行号 复制代码 ？

<input type="button" value="StartPare" onclick="StartPare(2,3);" />

 <input type="button" value="ReturnPare" onclick="ReturnPare();" />

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:14px}.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:14px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}.number_show{ padding-left:52px !important; list-style:decimal outside !important}.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}.number_hide{ padding-left:0px !important; list-style-type:none !important}.number_hide li{ list-style-type:none !important; border-left:0px}ol.mainarea li{ display:list-item !important; font-size:14px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}ol.mainarea li pre.alt{ background-color:#f7f7ff !important}function CopyCode(key){var codeElement=null;var trElements=document.all.tags("ol");var i;for(i=0;i

silverlight页面的代码.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:14px}.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:14px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}.number_show{ padding-left:52px !important; list-style:decimal outside !important}.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}.number_hide{ padding-left:0px !important; list-style-type:none !important}.number_hide li{ list-style-type:none !important; border-left:0px}ol.mainarea li{ display:list-item !important; font-size:14px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}ol.mainarea li pre.alt{ background-color:#f7f7ff !important}function CopyCode(key){var codeElement=null;var trElements=document.all.tags("ol");var i;for(i=0;i

int j = 0;[ScriptableMember]public void StartPara(int a, int b){j = a + b;}[ScriptableMember]public int StopPara(){return j;}

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}.codearea pre.alt{ background-color:#f7f7ff !important}.codearea .lnum{color:#4f81bd;line-height:18px}