SilverLight学习笔记--Silverlight中操作DOM元素
在这里我们将实验一下在Silverlight中如何操作HTML的DOM元素。
首先创建Silverlight应用程序。
创建用户界面:
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元素（包括：添加和删除）
<%@ 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.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环境中调试通过。本文参照了部分网络资料，希望能够抛砖引玉，大家共同学习。
(转载本文请注明出处)
SilverLight学习笔记--Silverlight中操作DOM元素相关推荐
- SilverLight学习笔记--Silverlight之数据绑定初探
数据绑定(Data Binding)是用户界面UI和业务对象或其它数据提供者(data provider)的连接.用户界面对象称为目标,数据提供者成为数据源. 数据绑定帮助隔离应用程序的用户界面层 ...
- SilverLight学习笔记--Silverlight中WebRequest通讯
本文我们学习如何使用WebRequest类实现客户端和服务器端的通讯. 本例处理过程:在客户端,我们在文本框中输入任意文本,然后用POST方法向服务器端传递信息,服务器端收到从客户端传来的信 ...
- SilverLight学习笔记--Silverlight中WebService通讯
本文我们学习如何在Silverlight中使用WebService进行通讯. 新建项目Silverlight应用程序,命名为:SLWebService. 在服务器端我们需要做两项目工作: 1.在Web ...
- SilverLight学习笔记--如何在xaml文件中操作用户在后台代码定义的类(2)--示例篇：创建一个登录控件(原创)(转载本文请注明出处)...
本文将示例如何运用前篇所写知识来建立一个用户自定义的登录控件.此控件界面非常简单,主要涉及的知识点是: 如何创建用户控件(包括对此控件的自定义事件和属性的编写,此处我们将创建一个名为LoginBo ...
- SilverLight学习笔记--建立Silverlight自定义控件(5)--绑定动画效果
有了上述的基础,我们进一步完善我们的自定义控件,在此我们将创建Storyboard和前面的添加事件处理方法为我们的自定义控件加上动画效果. 1.首先,在MyDesignButton项目中进一步完善 ...
- SilverLight学习笔记--实际应用(一)(4):手把手建立一个Silverlight应用程序之同步数据校验1...
现在我们的程序有了添加和删除以及修改功能,下面我们看一看如何让程序具备数据校验功能.我们将用两种方式实现数据的校验,一种是在客户端进行同步校验.另一种是在服务器端进行异步校验. 本篇我们先实现如何 ...
- SilverLight学习笔记--关于Silverlight资源文件(如:图片)的放置位置及其引用
Silverlight中有许多资源文件,例如:图片,音频.视频,甚至XML和XAML等非执行数据文件,在Silverlight中根据资源所处位置的不同而有所区别. 资源文件可分布在我们Silve ...
- 强大的DataGrid组件[4]_实现CURD[上]——Silverlight学习笔记[12]
在本教程中,主要为大家讲述如何使用DataGrid来对后台数据库进行CURD操作.由于CURD操作是与数据库交互中最为常用的,因此掌握其使用方法就显得尤为必要.本教程将使用Linq to SQL Cl ...
- SilverLight学习笔记--进一步学习Isolated Storage独立存储一（理论篇）
在"silverlight如何在客户端读取文件"以及"silverlight如何在客户端写入文件"两篇文章中我们初步接触了Isolated Storage概念. ...
最新文章
- 汇编语言--可屏蔽中断
- 雷达篇（九）雷达中的“快采样”和“慢采样”
- RHEL/Fedora/CentOs的系统服务优化
- scipy.interpolate: 插值和平滑处理
- 图论--欧拉回路（模板）
- 怎么把github上的东西传到码云_Git同步更新操作GitHub和码云仓库上面的代码
- 三层交换的测试1：级联的傻HUB
- linux中下载迅雷链接
- 图像处理之全景拼接---基于sift的全景图像拼接
- Idea 破解版下载指南
- 交通银行PHP代码,交通银行国际汇款代码 交通银行swift代码查询
- MCS-51单片机的内部结构
- 微信为什么不能下载apk以及微信下载APK的解决办法
- python实验报告_实验一Python程序实验报告
- hdu 5211 Mutiple
- Excel饼图中既显示百分比
- python_绘制玫瑰图_南丁格尔图
- 重磅消息！微信电脑版本，终于支持刷朋友圈啦！附内测下载地址！
- python基础（一）
- opencv处理图像开始注意的几点