How to call javascript function on a Silverlight 3 object?

Question

I have the following Silverlight control defined:

<object id="objImageViewer" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="500px">
    <param name="source" value="../ClientBin/SomeImageViewer.xap"/>
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="3.0.40624.0" />
    <param name="autoUpgrade" value="true" />
    <param name="windowless" value="true" />
    <param name="initParams"
        value="
            Username=<%= ImageViewerUsername %>,
            Editable=<%= ImageViewerEditable ? "1" : "0" %>,
            Align=<%= ImageViewerAlign ? "1" : "0" %>
            " />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
    </a>
</object>

I have exposed the following method in my Silverlight control (Page.xaml.cs) to be accessible to Javascript:

[ScriptableMember]
public bool HasPendingUpdates()
{
    return btnSave.IsEnabled;
}

I then have a Javascript test function in my aspx page that is trying to do something with it:

var imageViewer = $("#objImageViewer")[0];
if (imageViewer.Content.Page.HasPendingUpdates())
{
    alert("Pending Changes Exist!");
}
else
{
    alert("NO Pending Changes Exist!");
}

Problem is that it fails after the Content object. I have tested the following:

var imageViewer = $("#objImageViewer")[0];

imageViewer // Valid
imageViewer.Content // Valid
imageViewer.Content.Page  // Invalid
imageViewer.Content.HasPendingUpdates()  // Invalid

So I am not sure what I am doing wrong. How do I get to the function within Content?

I am using IE8, Silverlight 3, ASP.NET. The silverlight control is created with the object tag as I don't think the control is an option in Silverlight 3+.

Any help would be much appreciated.

Answer 1

You need to register with Silverlight HTMLBridge an identifier to expose on the Content property and give it an object that has some scriptable entry points.

I tend to do this in the Page constructor:-

public Page()
{
     InitializeComponent();
     HtmlPage.RegisterScriptableObject("Page", this);
}

Now your code should work.

Answer 2

I have this Silverlight application structure:

public partial class App : Application
{
    private void Application_Startup(object sender, StartupEventArgs e)
    {
        Page uploadControl = new Page();
        // ...
        HtmlPage.RegisterScriptableObject("uploadControl", uploadControl);
    }
}

[ScriptableType]
public partial class Page : UserControl
{
    [ScriptableMember]
    public void StartUpload()
    {
        // ...
    }
} 

And, in Javascript:

function startUpload() {
    $find("<%= SilverlightUpload.ClientID %>")
        .get_element().content.uploadControl.StartUpload();
    return false;
}

So, I take a look on that HtmlPage.RegisterScriptableObject call and just expose types marked as [ScriptableType]