Thursday, May 8, 2008

Silverlight - Javascript Communication - Part 2

Please have a look at my previous post which handles the communication in a easy way.Better use that technique whenever required.But Of course as per your requirements it may vary.

As I told in the earlier post we need to have understanding about Scriptable attribute,ScriptObject etc.I have listed some links which I feel explains the concept well.

  1. ScriptableType attribute: This tells that the type is accessible from script.Usually we decorate the Page class with this attribute.(See what MSDN tells)
  2. ScriptableMember attribute : Tells that this member is accessible from script.(See what msdn tells)
Well in the C# we had told that these are the types and members which are accessible in script.But how the browser ,HTML ,Javascript or DOM knows that.For that we just have to register the object with HTML DOM.

This uses the RegisterScriptableObject () method of HtmlPage class.(See what msdn says)

HtmlPage.RegisterScriptableObject("mainpage", this);//mainpage is the name in which DOM should access the object

Now we completed works in C#.Lets put that all together
public partial class Page : UserControl {
public Page(){
HtmlPage.RegisterScriptableObject("mainpage", this);
public void SetData(double val){
sldr.Value = val;//sldr is an object of Slider

At the javascript side we just need to get the object of plug in to invoke the method which is scriptable.

var Host = document.getElementById("Xaml1");//Xaml1 is id of Silverlight Control

Once we get the plug in just call


Putting altogether

<head runat="server">
<title>Test Page For SilverlightApplication1title>
<script language="javascript">
   1:     function setvalue() { 
   2:         var v=document.getElementById("txt");
   3:         var val=parseFloat(v.value);
   4:         var Host = document.getElementById("Xaml1");
   5:         Host.content.mainpage.SetData(val);
   6:     }
<body style="height:300;margin:0;">
<form id="form1" runat="server" style="height:300;">
<asp:ScriptManager ID="ScriptManager1" runat="server">asp:ScriptManager>
<div style="height:300;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="300" Height="300" />
<br />

<a href="#">HTML Areaa><br />
<input type="text" id="txt" /> <button onclick="setvalue()">Update Sliderbutton>

Sample available here.

No comments: