• Calling Javascript functions from Silverlight 2


    When working with Silverlight 2, most will be working with managed code (c#, vb, etc.).  But likely people are working with Silverlight as an additive value to their web application, providing some enhanced user experience to an application.  there may be times where you will still need to call back into the hosting html context.  For then, you'll want to be familiar with two objects HtmlDocument and HtmlPage. 

    Both of these objects provide access to the page context hosting your silverlight control.  If you need to seek things in the HTML DOM, you could use the HtmlDocument class.  For example, let's say I need to change the innerHTML property of some <div> element:

    using System.Web.Browser;
    
    HtmlDocument doc = HtmlPage.Document;
    doc.GetElementById("mydiv").SetProperty("innerHTML", "<b>hello world</b>");

    Also, i might want to interact with existing client-side functions, perhaps from client-side frameworks or other library utilities you might have developed on your own.  If I have a function on my page called "foo()" I would invoke it like this:

    using System.Web.Browser;
    
    HtmlPage.Window.CreateInstance("foo");

    And if I had parameters in a function, like "foo2(theAlert)," I would invoke it like this:

    using System.Web.Browser;
    
    HtmlPage.Window.CreateInstance("foo2", new string[] { "tim heuer" });

    This may not be the norm with your Silverlight project, but I hope this helps clear some things up!  I am including the "using" statements in my c# samples so you know where in the namespace the class library exists.

    Sunday, March 09, 2008 10:08 AM

    PostTypeIcon

Comments.

  • Michael said:
    Gravatar
    # re: Calling Javascript functions from Silverlight 2


    Are there any security restrictions on this? If I want to embed a Silverlight file from another site, could it change the DOM on my page?

    3/10/2008 8:13 AM
  • Gravatar
    # re: Calling Javascript functions from Silverlight 2


    Michael, you can disable HTML access via a parameter on your silverlight host declaration (and the SL app author can check for that via HtmlPage.IsEnabled)

    3/10/2008 11:10 AM
  • Manuel said:
    Gravatar
    # CreateInstance vs Invoke


    I'm using the same concept to call a JS function from my Silverlight... but I do it using HtmlPage.Window.Invoke... is there any difference?

    3/10/2008 5:46 PM
  • Max C said:
    Gravatar
    # re: Calling Javascript functions from Silverlight 2


    Being able to access the DOM from compiled code on the client is really impressive, Silverlight is just amazing.

    3/11/2008 2:20 AM
  • Sal said:
    Gravatar
    # re: Calling Javascript functions from Silverlight 2


    How can you do the opposite? How can we call Managed Code functions from JavaScript? The old way that worked in Alpha 1.1 no longer works, and the example on MSDN says to use sender.get_content() and this doesn't work either. Any ideas?

    3/11/2008 1:56 PM
  • David said:
    Gravatar
    # re: Calling Javascript functions from Silverlight 2


    To call C# from JavaScript:

    1. In Application_Startup() in App.xaml.cs, create the Page object in a variable and before setting the RootVisual to this value, add: HtmlPage.RegisterScriptableObject("Page", page);

    2. In Page.xaml.cs, add the method to be called from JavaScript and decorate it with this attribute: [ScriptableMember]
    public void MyMethod() { ... }

    3. In your HTML page, make sure your ASP.NET Silverlight control has an ID:
    <asp:Silverlight ID="_silverlight" ...

    4. Call the C# method from JavaScript:
    silverlightControl = document.getElementById("_silverlight");
    silverlightControl.Content.Page.MyMethod();

    3/15/2008 11:50 AM
  • Dave said:
    Gravatar
    # re: Calling Javascript functions from Silverlight 2


    Don't know if this has changed recently, but I found the import was system.windows.browser, not system.web.browser.

    Cheers

    4/8/2008 8:16 AM

Your Reply.

  Comment Form  

Fields denoted with a "*" are required.

*Your name:
Subject:
Your blog:
Your email:  (will not be displayed)
*Your message:

 
Please add 3 and 8 and type the answer here: