Today I wrote a very simple example how to call a C# method from JavaScript code. I was using this because I'd like to access the IsolatedStorage with a small wrapper that is working similar to the registry.
For this demo I will only use a very simple method like below:
string SayHello(string name){
<span class="kwrd">return</span> <span class="str">"Hello "</span> + name;
}
</pre>
Note: only simple types (strings, bool, etc.) can be exposed. If you want to use your own object you have to use the JSON serialization. (Thanks to Luis Abreu for this comment!)
The [Scriptable] Attribute
Ok, what do I need to get this accessible from JavaScript code? First, I put this method in the Page.xaml.cs as a public method. To indentify that this method is accessible I added the Scriptable] attribute to the class and the method itself. You may remeber this attribute from [ASP.NET AJAX [1] or Ajax.NET Professional [2] ([AjaxMethod]).
<pre class="csharpcode">[Scriptable]
<span class="kwrd">public</span> <span class="kwrd">class</span> Page: Canvas
{
<span class="kwrd">public</span> Page()
{
Loaded += <span class="kwrd">new</span> EventHandler(Page_Loaded);
}
<span class="kwrd">void</span> Page_Loaded(<span class="kwrd">object</span> sender, EventArgs e) { }
[Scriptable] <span class="kwrd">public</span> <span class="kwrd">string</span> SayHello(<span class="kwrd">string</span> name) { <span class="kwrd">return</span> <span class="str">"Hello "</span> + name; } }</pre>
To register all scriptable methods you have to call a register method, again it is very similar to Ajax.NET Professional. In Page_Loaded you add following line:
<pre class="csharpcode">WebApplication.Current.RegisterScriptableObject(<span class="str">"basic"</span>, <span class="kwrd">this</span>);</pre>
Now, we switch to the JavaScript code and have a look how you can access these methods. I have created the Silverlight control with the ID SilverlightControl:
<pre class="csharpcode">function createSilverlight()
{
Sys.Silverlight.createObjectEx({
source: <span class="str">"Page.xaml"</span>,
parentElement: document.getElementById(<span class="str">"SilverlightControlHost"</span>),
id: <span class="str">"SilverlightControl"</span>,
properties: {
background: <span class="str">"#000000"</span>,
width: <span class="str">"1"</span>,
height: <span class="str">"1"</span>,
version: <span class="str">"0.95"</span>,
enableHtmlAccess: <span class="kwrd">true</span>
},
events: {}
});
}
</pre>
This code creates the ActiveX control with the ID SilverlightControl. In JavaScript you can access this control with document.getElementById("SilverlightControl"). The object you get will have a property Content. Attached to this object the RegisterScriptableObject will add a new property basic (see the call above, the first argument is used for the name) where you then can access the methods.
<pre class="csharpcode">var control = document.getElementById(<span class="str">"SilverlightControl"</span>);
var res = control.Content.<strong><font color="#0000ff">basic</font></strong>.SayHello(<span class="str">"Michael Schwarz"</span>);</pre>
In variable res you will have now "Hello Michael Schwarz".