Accessing ScriptableType objects of Silverlight from JavaScript

 This post describes, how to access the custom objects defined in Silverlight via Javascript. It also shows how to access the content of Silverlight TextBox from Javascript.

 Creating a ScriptableType object in Silverlight Application

The ScriptableType attribute and ScriptableMember attribute defined in the System.Windows.Browser interface is used to make an object available to the client side.

Thus, we will declare a Person class with two properties, FName and LName and implement the INotifyPropertyChanged Interface so that the changes made to these properties can be reflected to all the objects that are accessing it.

Use the below code to define the Person Class.

Imports System.Windows.Browser

<ScriptableType()> _

Public Class Person

    Implements System.ComponentModel.INotifyPropertyChanged

    Public Sub New()

    End Sub

    Private Sub PropertyChangedCaller(ByVal PropertyName As String)

        RaiseEvent PropertyChanged(Me, New ComponentModel.PropertyChangedEventArgs(PropertyName))

    End Sub

    Private _FName As String

    <ScriptableMember()> _

    Public Property FName() As String

        Get

            Return _FName

        End Get

        Set(ByVal value As String)

            _FName = value

            PropertyChangedCaller(“FName”)

        End Set

    End Property

    Private _LName As String

    <ScriptableMember()> _

    Public Property LName() As String

        Get

            Return _LName

        End Get

        Set(ByVal value As String)

            _LName = value

            PropertyChangedCaller(“LName”)

        End Set

    End Property

 

    Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged

End Class

 

Creating Person Object in XAML and Binding the values to Silverlight TextBox controls

We will now create the object of Person class under the UserControl.Resources, declared above and then bind it to the TextBoxes. Use the following code for the same:

<UserControl.Resources>

<local:Person x:Name=”PersonObject” FName=”FirstName” LName=”LastName” />

</UserControl.Resources>

 

Use the code below to create the grid with text boxes and labels and bind them to above created resources:

<Grid x:Name=”LayoutRoot” Background=”White” DataContext=”{StaticResource PersonObject}”>

<Grid.ColumnDefinitions>

<ColumnDefinition/><ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

     <RowDefinition/><RowDefinition/><RowDefinition/>

</Grid.RowDefinitions>

<TextBlock Grid.Column=”0″ Grid.Row=”0″ Text=”First Name:”/>

<TextBlock Grid.Column=”0″ Grid.Row=”1″ Text=”Last Name:”/>

<TextBox Grid.Row=”0″ Grid.Column=”1″ Text=”{Binding FName, Mode=TwoWay}” />

<TextBox Grid.Row=”1″ Grid.Column=”1″ Text=”{Binding LName, Mode=TwoWay}” />

<TextBlock Text=”{Binding FName}” Grid.Row=”2″ Grid.Column=”0″/>

<TextBlock Text=”{Binding LName}” Grid.Row=”2″ Grid.Column=”1″/>

</Grid>

Registering the Person Object

To make the PersonObject available to clientside, we need to register the object, using the Browser.HtmlPage.RegisterScriptableObject. We may do this in the Page_Loaded event of the Silverlight application:

Private Sub Page_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

‘Access the PersonObject defined under the UserControl.Resources

Dim personObject As Person = Me.Resources(“PersonObject”)

        Browser.HtmlPage.RegisterScriptableObject(“PersonObject”, personObject)

End Sub

 

Accessing the PersonObject from JavaScript

The PersonObject created above is now ready to be accessed from the JavaScript. Create a variable referencing the SilverlightPlugin in the ASPX Page. Next, access the Content of the SilverlightPlugin using the Content property. Finally, access the PersonObject from the Content of the SilverlightPlugin

            var silverlightplugin = $get(“Xaml1″);

            var content = silverlightplugin.content;

            var personObject = content.PersonObject;

 

Using the personObject, we may access it public properties. Thus,

alert(“Name = ” + personObject.FName + ” ” + personObject.LName);

 

will show the current content from the TextBoxes in the Silverlight TextBoxes as displayed below: