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

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

创建用户界面:

界面如图:

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

<%@ 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，我们要记得引入命名空间:

using System.Windows.Browser; //引入此空间以便使用 HtmlDocument, HtmlPage等类

下面是代码内容

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环境中调试通过。本文参照了部分网络资料，希望能够抛砖引玉，大家共同学习。
(转载本文请注明出处)

posted @ 2009-08-14 20:49 wsdj 阅读(804) 评论(0) 编辑收藏举报

刷新页面返回顶部

万事大吉的IT学习笔记

------------------- 一花一世界，一叶一如来。

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

公告