SilverLight学习笔记--Silverlight中操作DOM元素

在这里我们将实验一下在Silverlight中如何操作HTML的DOM元素。
首先创建Silverlight应用程序。
 
创建用户界面:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->< UserControl x:Class = " SLDomCsCode.Page "
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "  
    xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "  
    Width = " 400 "  Height = " 400 " >
     < Grid x:Name = " LayoutRoot "  Background = " White " >
         < StackPanel Width = " 400 "  Height = " 350 " >
          < TextBlock Text = " 请输入文本内容: "  Margin = " 10 "   ></ TextBlock >
          < TextBox x:Name = " txtBxMyInput "  Width = " 300 "  Height = " 30 " ></ TextBox >
         < Button Width = " 200 "  Height = " 30 "  Content = " 修改DOM元素属性 "  Click = " Button_Click "  Margin = " 5 "  FontSize = " 16 "  Foreground = " green " ></ Button >
         < Button Width = " 200 "  Height = " 30 "  Content = " 获取DOM元素内容 "  Click = " Button_Click_2 "  Margin = " 5 "  FontSize = " 16 "  Foreground = " green " ></ Button >
             < TextBlock Text = " 获取的DOM元素内容如下: "  TextAlignment = " Center " ></ TextBlock >
             < TextBlock x:Name = " tbGetDomMsg "  TextAlignment = " Center " ></ TextBlock >
             < Button Width = " 200 "  Height = " 30 "  Content = " 创建并添加新的DOM元素 "  Click = " Button_Click_1 "  Margin = " 5 "  FontSize = " 16 "  Foreground = " green " ></ Button >
             < Button Width = " 200 "  Height = " 30 "  Content = " 删除DOM元素 "  Click = " Button_Click_3 "  Margin = " 5 "  FontSize = " 16 "  Foreground = " green " ></ Button >
         </ StackPanel >
     </ Grid >
</ UserControl >

界面如图:


SLDomCsCodeTestPage.aspx页面内容如下：
我们加入了一个Label标签和一个div,其中Label标签用于显示我们如何修改和读取DOM元素。div用于显示我们如何创建DOM元素（包括：添加和删除）

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><% @ Page Language = " C# "  AutoEventWireup = " true "   %>

<% @ Register Assembly = " System.Web.Silverlight "  Namespace = " System.Web.UI.SilverlightControls "
    TagPrefix = " asp "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "  style = " height:100%; " >
< head runat = " server " >
     < title > SLDomCsCode </ title >
</ head >
< body style = " height:100%;margin:0; " >
     < form id = " form1 "  runat = " server "  style = " height:100%; " >
         < asp:ScriptManager ID = " ScriptManager1 "  runat = " server " ></ asp:ScriptManager >
         < div  style = " height:50%; "   >
             < label id = " lblHtmlMsg "   > 此处为修改前的内容 </ label >
             < asp:Silverlight ID = " Xaml1 "  runat = " server "  Source = " ~/ClientBin/SLDomCsCode.xap "  MinimumVersion = " 2.0.31005.0 "  Width = " 100% "  Height = " 100% "   />
             < div id = " divOnHtml "   >     </ div >
         </ div >

     </ form >
</ body >
</ html >

 

Page.xaml.cs代码内容如下:
为了控制DOM，我们要记得引入命名空间:

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->using  System.Windows.Browser;  // 引入此空间以便使用 HtmlDocument, HtmlPage等类

下面是代码内容

<!-- <br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Browser;  // 引入此空间以便使用 HtmlDocument, HtmlPage等类

namespace  SLDomCsCode
{
     public   partial   class  Page : UserControl
    {

         // 初始化一个document
        HtmlDocument doc  =  HtmlPage.Document;

         public  Page()
        {
            InitializeComponent();
            HtmlElement txtMsg  =  doc.GetElementById( " lblHtmlMsg " );  // 取得HTML页面上id为lblHtmlMsg的DOM元素（在此处是一个lable元素）

        }

         private   void  Button_Click( object  sender, RoutedEventArgs e)
        {
             // 获取一个DOM节点
            HtmlElement txtMsg  =  doc.GetElementById( " lblHtmlMsg " );  // 取得HTML页面上id为lblHtmlMsg的DOM元素（在此处是一个lable元素）
            txtMsg.SetAttribute( " innerText " ,  this .txtBxMyInput.Text);
            txtMsg.SetStyleAttribute( " background-color " ,Colors.Blue.ToString());
        }

         private   void  Button_Click_1( object  sender, RoutedEventArgs e)
        {

            var Cars  =   new []
            {
                 new  {CarName = " Corolla " ,Doors = " 5 " ,Price = 220000 },
                  new  {CarName = " Ford " ,Doors = " 5 " ,Price = 42000 },
                   new  {CarName = " Benz " ,Doors = " 5 " ,Price = 140000 },
                  new  {CarName = " Holden " ,Doors = " 3 " ,Price = 12000 },
            };


            HtmlElement tb;  // 定义一个tb元素
            tb  =  doc.CreateElement( " table " );  // 代码创建一个表并把它指派给上面的定义的tb元素
            tb.SetAttribute( " id " , " newtb " );

            HtmlElement txtBxElement  =  HtmlPage.Document.GetElementById( " divOnHtml " );  // 取得HTML页面上id为divOnHtml的DOM元素（在此处是一个div）

             #region   创建表头
            HtmlElement Headrow  =  doc.CreateElement( " tr " );  // 定义一个tr(行)

            HtmlElement HeadcarNames  =  doc.CreateElement( " td " );   // 定义一个td(列)
            HeadcarNames.SetAttribute( " innerText " ,  " 品牌 " );       // 设置td列的内容   
            Headrow.AppendChild(HeadcarNames);  // 把td列加入tr行


            HtmlElement HeadcarDoors  =  doc.CreateElement( " td " );   // 定义一个td(列)
            HeadcarDoors.SetAttribute( " innerText " ,  " 几门 " );       // 设置td列的内容   
            Headrow.AppendChild(HeadcarDoors);  // 把td列加入tr行


            HtmlElement HeadcarPrice  =  doc.CreateElement( " td " );   // 定义一个td(列)
            HeadcarPrice.SetAttribute( " innerText " ,  " 价格 " );       // 设置td列的内容   
            Headrow.AppendChild(HeadcarPrice);  // 把td列加入tr行

            tb.AppendChild(Headrow);  // 把tr行加入tb表

             #endregion

             foreach  (var items  in  Cars)
            {
                HtmlElement row  =  doc.CreateElement( " tr " );  // 定义一个tr(行)

 

                 #region  创建表体

                HtmlElement carNames  =  doc.CreateElement( " td " );   // 定义一个td(列)
                carNames.SetAttribute( " innerText " , items.CarName.ToString());       // 设置td列的内容   
                row.AppendChild(carNames);  // 把td列加入tr行

                HtmlElement carDoors  =  doc.CreateElement( " td " );   // 定义一个td(列)
                carDoors.SetAttribute( " innerText " , items.Doors.ToString());       // 设置td列的内容   
                row.AppendChild(carDoors);  // 把td列加入tr行

                HtmlElement carPrice  =  doc.CreateElement( " td " );   // 定义一个td(列)
                carPrice.SetAttribute( " innerText " , items.Price.ToString());       // 设置td列的内容   
                row.AppendChild(carPrice);  // 把td列加入tr行
                 #endregion

                tb.AppendChild(row);  // 把tr行加入tb表
            }



             // txtBxElement.AppendChild(tb);
            txtBxElement.SetAttribute( " innerHTML " , tb.GetAttribute( " outerHTML " ));  // 把tb表加入div元素中
        }


         private   void  Button_Click_2( object  sender, RoutedEventArgs e)
        {
            HtmlElement tbGetDomMsg  =  doc.GetElementById( " lblHtmlMsg " );
             string  s  =  tbGetDomMsg.GetAttribute( " innerHTML " );

             this .tbGetDomMsg.Text  =  s;
        }

         private   void  Button_Click_3( object  sender, RoutedEventArgs e)
        {
            HtmlElement parent  =  HtmlPage.Document.GetElementById( " divOnHtml " );
            HtmlElement child  =  HtmlPage.Document.GetElementById( " newtb " );
            parent.RemoveChild(child);  
        }
    }
}

  运行效果图：


前往：Silverlight学习笔记清单
本文程序在Silverlight2.0和VS2008环境中调试通过。本文参照了部分网络资料，希望能够抛砖引玉，大家共同学习。