(19): How does Silverlight 2 interact with html dom in Silverlight (on)

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 has built-in support for HTML and client scripts. This article describes how to interact with html dom in Silverlight 2, and access and modify DOM elements. First, let's look at a simple example of how to access the HTML Dom. The final result is as follows. We will place two divs on the interface, namely div1 and div2. The following green area is the Silverlight section, enter the div id in the first text box and click show. The text information on the corresponding div is displayed below. First, modify the test page because the height occupied by the default Silverlight plug-in is 100% and the value is PX.

<div  style="height:200px">    <asp:Silverlight ID="Xaml1" runat="server"     Source="~/ClientBin/TerryLee.SilverlightAccessingHtmlDom1.xap"     Version="2.0" Width="100%" Height="200px" /></div>

Place two divs at the same time:

<Div id = "div1"> here is the first Div, And the ID is div1 </div> <Div id = "div2"> here is the second Div, ID is div2 </div>

For the sake of clarity, define simple styles for them:

#div1{    background:#FCE2BC;    border:solid 1px #FF9900;    width:500px;    height:50px;    margin-bottom:20px;}#div2{    background:#BCC8FC;    border:solid 1px #4769F9;    width:500px;    height:50px;    margin-bottom:20px;    }

Implement the interface layout of Silverlight. Use canvas to define its background as light green. The XAML is as follows:

<Canvas background = "# d5fcdf"> <textblock text = "Silverlight accessing the HTML dom" foreground = "red" canvas. top = "10" canvas. left = "30" fontsize = "18"> </textblock> <watermarkedtextbox X: name = "input" watermark = "enter" Height = "40" width = "300" canvas here. left = "30" canvas. top = "50"> </watermarkedtextbox> <watermarkedtextbox X: Name = "result" watermark = "The result is displayed here" Height = "40" width = "300" canvas. left = "30" canvas. top = "100"> </watermarkedtextbox> <button X: name = "displaybutton" background = "red" Height = "40" width = "100" content = "display" canvas. top = "50" canvas. left = "350" Click = "displaybutton_click"> </button> </canvas>

Access HTML Dom. Silverlight 2 in the namespace system. windows. browser has many built-in support for HTML Dom access and operations. One of our most common objects is htmlelement. You can obtain the document model of the current page through the htmlpage static class, finally, call the getelementsbytagname or getelementbyid method.

HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);

In this way, we get a DOM element, and then use its getattribute to get the relevant attributes:

this.result.Text = element.GetAttribute("innerText");

The complete code is as follows:

private void displayButton_Click(object sender, RoutedEventArgs e){    HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);    this.result.Text = element.GetAttribute("innerText");}

After running, enter div1 In the first text box: Click Show to display div1 text in the second text box: using the preceding example, we have learned how to access the HTML Dom. Now let's take a look at the operations on the HTML Dom, such as how we change the content of the Dom, use the above example and make a slight modification. Enter the dom id in the first text box and the content to be modified in the second text box. In fact, this is very simple. You only need to make minor changes to the Code and use the setattribute method. The first parameter specifies the attribute name and the second parameter specifies the attribute value. For example:

private void displayButton_Click(object sender, RoutedEventArgs e){    HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);    element.SetAttribute("innerText",this.result.Text);}

After running, enter div2 and some content, and click OK:

In addition to the getattribute and setattribute methods mentioned above, htmlelement also provides a set of getstyleattribute and setstyleattribute methods for obtaining and setting Dom styles, such:

private void displayButton_Click(object sender, RoutedEventArgs e){    HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);    element.SetStyleAttribute("width",this.result.Text);    element.SetStyleAttribute("height", this.result.Text);}

After running, enter div1 and 100, and the effect is as follows: Conclusion This article describes how to access DOM in Silverlight and modify Dom attributes. Next I will introduce how to change the DOM structure, such as adding and removing DOM elements and registering events for DOM elements.

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

This article is from 51cto. com technical blog