Silverlight and JavaScript Interaction

1. Call JavaScript Functions in Silverlight

Using some Silverlight classes in the system. Windows. Brower namespace, you can call a JavaScript function written in a script. This gives your Silverlight code a regular way to interact with the page.

For example, you have the following JavaScript function in the HTML page.

 function createText(message,user) {            var el = document.getElementById("myElement");            el.innerHTML = user+" "+message;        }

To call this function, first use the htmlwindow. getproperty () method and pass the Javascript name in to obtain a scriptobjcet object. Then, call the invokeself () method of the scriptobjcet object. When the invokeself method is called, all parameters of the JavaScript function can be passed in.

 ScriptObject scriptObjcet=(ScriptObject)HtmlPage.Window.GetProperty("createText"); scriptObjcet.InvokeSelf("Jerry", "Hello Wolrd");

 

Effect

 

2. Call the Silverlight method in Javascript

To call the Silverlight method in Javascript, perform the following steps:

1. Create a public method in the Silverlight program to expose the functions you want to use on the web page.

2. Add a scriptablemember attribute to the method.

3. Add the scriptabletype attribute to the class containing this method.

4. Call htmlpage. registerscriptableobject () to expose this method to JavaScript.

 [ScriptableType()]    public partial class InvokeMethod : UserControl    {        public InvokeMethod()        {            InitializeComponent();            HtmlPage.RegisterScriptableObject("page", this);            

        }        [ScriptableMember]        public void ChangeText(string newText)        {            txbTest.Text="It's invoking by JavaScript "+newText;        }    }

When registering a scripted type, you must specify a name and pass a reference to an appropriate object. In the preceding example, the name of invokemethod is page when it is registered. this tells Silverlight to create another property called page in the Silverlight control of the web page. To call this method, JavaScript needs to find the Silverlight control, obtain its content, and then call its page. changetext () method.

 function updateSilverlightText() {            var ele = document.getElementById("myEle");            ele.content.page.ChangeText("This text has been changed");        }

By default, vs automatically adds a test page and gives a name to the DIV containing the <Object> element, but does not give the <Object> Object Name contained in it. You must add a name to obtain the <Object> object. In the preceding example, the <Object> Object Name Is myele.

Call JavaScript Functions

 <p onclick="updateSilverlightText()" >Click here to change the text in silverlight</p>

Effect

After calling

 

3. instantiate a Silverlight object in the browser

Like the above, you must create a scriptabletype class containing the scriptablemember method.

 [ScriptableType]    public class GetRandom    {        private Random rdm = new Random();        [ScriptableMember]        public int GetRandomNumber(int from,int end)        {           return  rdm.Next(from,end);        }    }

You also need to register this class. This time you need the htmlpage. registercreateabletype () method

HtmlPage.RegisterCreateableType("random", typeof(GetRandom));

To create an instance of the registration class, you need to find the Silverlight control and call its ELE. content. Services. Createobject () method. In this example, this method is called in JavaScript.

 function getRandom() {            var ele = document.getElementById("myEle");            var r = ele.content.services.createObject("random");            alert("Your number is " + r.GetRandomNumber(1, 56));        }

Call Javascript

<input type="button" onclick="getRandom()" value="Click here to get number"/>

Effect