(22): How does Silverlight 2 use JavaScript to call. Net code in Silverlight?

Summary The release of Silverlight 2 beta 1 brings us a lot of surprises from runtime and tools, such as supporting the framework languages Visual Basic, Visual C #, ironruby, ironpython, A series of new features such as JSON, Web Service, WCF, and sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images. Silverlight provides built-in support for HTML and client scripts. The previous article introduced how to call Javascript in Silverlight. This article describes how to use JavaScript to call. Net code in Silverlight. Registerscriptableobject provides the following two types in Silverlight 2: scriptablememberattribute: allows us to expose members to scripts in Silverlight. Scriptabletypeattribute: allows us to expose the type to the script in Silverlight. Htmlpage also provides registercreateabletype and registerscriptableobject methods to register types or object instances that can be used by scripts. With the above, you can call Silverlight in JavaScript. Let's look at a simple example. In this example, we expect to pass two parameters to the method in Silverlight through javascript. The result calculated by this method is displayed in Silverlight ,: first, we compile the interface layout in Silverlight:

<Stackpanel background = "# cdfcae" orientation = "horizontal"> <border cornerradius = "10" width = "100" Height = "40" margin = "50 10 0 0"> <textblock text = "result display: "fontsize =" 20 "foreground =" red "> </textblock> </Border> <border cornerradius =" 10 "background =" green "width =" 300 "Height =" 40 "> <textblock X: name = "result" fontsize = "20" foreground = "white" margin = "20 5 0 0"> </textblock> </Border> </stackpanel>

Register an instance of the current page called by the script during loading:

private void UserControl_Loaded(object sender, RoutedEventArgs e){    HtmlPage.RegisterScriptableObject("Calculator", this);}

Compile an add method, which will be called in JavaScript and must be public. Use the scriptablemember feature to expose it to the script.

[ScriptableMember]public void Add(int x, int y){    int z = x + y;    this.result.Text = String.Format("{0} + {1} = {2}", x, y, z);}

Now write the content on the test page and provide the input control:

<Div class = "Main"> <input id = "txt1" type = "text"/> <input id = "txt2" type = "text"/> <input id = "button1" type = "button" value = "Confirm"/> </div>

Compile JavaScript to call the method in Silverlight and obtain the Silverlight plug-in. calculator is the instance we just registered:

<script type="text/javascript">    function callSilverlight()    {        var slPlugin = $get('Xaml1');                slPlugin.content.Calculator.Add($get('txt1').value,$get('txt2').value);    }</script>

Click the button to call this method in the event.

<Input id = "button1" type = "button" value = "Confirm" onclick = "callsilverlight ()"/>

Result After running: enter two numbers and the result is displayed: Use registercreateabletype. Now let's take a look at how to use registercreateabletype. Make some simple changes to the above example. Add a calculator class to the Silverlight project and add the scriptabletype feature to it:

[ScriptableType]public class Calculator{    [ScriptableMember]    public int Add(int x, int y)    {        return x + y;    }}

When loading the page, modify it to the following code to specify an individual name and the type to be registered:

HtmlPage.RegisterCreateableType("calculator", typeof(Calculator));

In this way, you can call it like this in Javascript. First, create an instance registered as scriptabletype and then call its related methods:

<script type="text/javascript">    function callSilverlight()    {        var slPlugin = $get('Xaml1');        var cal = slPlugin.content.services.createObject("calculator");                alert(cal.Add($get('txt1').value,$get('txt2').value));    }</script>

The running result is as follows: Conclusion: This article describes how to call Silverlight in JavaScript, for example, Dom operations, JavaScript calls in Silverlight, and Silverlight calls in Javascript, we can see that the interaction between Silverlight and the browser is well supported, and other content will be introduced later.

This article is from the "terrylee technology column" blog, please be sure to keep this source http://terrylee.blog.51cto.com/342737/67266

This article is from 51cto. com technical blog