一步一步学Silverlight 2系列（20）：如何在Silverlight中与HTML DOM交互（下）

======================================================
注：本文源代码点此下载
======================================================

一步一步学silverlight 2系列(20):如何在silverlight中与html dom交互(下)

概述

silverlight 2 beta 1版本发布了,无论从runtime还是tools都给我们带来了很多的惊喜,如支持框架语言visual basic, visual c#, ironruby, ironpython,对json、web service、wcf以及sockets的支持等一系列新的特性。《一步一步学silverlight 2系列》文章将从silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入silverlight 2开发。

silverlight中内置了对于html、客户端脚本等的支持,本文为如何在silverlight 2中与html dom交互第二部分。在第一部分中主要介绍了如何访问和修改已有的html dom,我们还可以完全创建一个新的dom元素或者移除一个已有的dom元素,除此之外,我们还可以为dom元素添加事件处理。

创建dom元素

首先我们来看如何创建一个新的dom元素,最终的效果如下,当我们在文本框中输入文字后,单击创建,将在上面的区域中创建一个li元素。

先来定义一下html页面,甚至silverlight插件的高度。

div id="parentdiv">

ul id="list">

ul>

div>

divstyle="height:200px;">

asp:silverlight id="xaml1" runat="server"

source="~/clientbin/terrylee.silverlightaccessdom2.xap"

version="2.0" width="100%" height="200px" />

div>

并且为上面的div定义一个简单的样式,以示与silverlight区分

#parentdiv

{

background:#fcdfb3;

border:solid 1px #ff9900;

width:500px;

height:100px;

margin-bottom:20px;

}

在silverlight中进行界面布局,xaml如下:

canvas background="#cdfcae">

textblock text="silverlight accessing the html dom" foreground="red"

canvas.top="10" canvas.left="30" fontsize="18">

textblock>

watermarkedtextbox x:name="input" watermark="请在这里输入"

height="40" width="300"

canvas.left="30" canvas.top="50">

watermarkedtextbox>

button x:name="createbutton" background="red"

height="40" width="100" content="创 建"

canvas.top="50" canvas.left="350"

click="createbutton_click">

button>

canvas>

编写创建按钮的代码,首先获取到要往里面添加元素的父元素,即我们定义的ul:

htmlelement parent = htmlpage.document.getelementbyid("list");

创建一个新的元素li,并设置属性

htmlelement child = htmlpage.document.createelement("li");

child.setattribute("innertext", this.input.text);

添加新元素到parent中

parent.appendchild(child);

完整的代码如下:

private void createbutton_click(object sender, routedeventargs e)

{

htmlelement parent = htmlpage.document.getelementbyid("list");

htmlelement child = htmlpage.document.createelement("li");

child.setattribute("innertext", this.input.text);

parent.appendchild(child);

}

运行后创建第一个元素

再次创建一个

移除dom元素

既然可以创建元素,对应的也可以删除元素,我们在页面上放上几个

元素,然后输入id进行删除。代码如下:

private void deletebutton_click(object sender, routedeventargs e)

{

htmlelement parent = htmlpage.document.getelementbyid("list");

htmlelement child = htmlpage.document.getelementbyid(this.input.text);

parent.removechild(child);

}

运行后界面上有三个

删除其中一个

为dom注册事件

除了添加和移除dom元素外,我们还可以为dom元素附加事件,在下面的例子中我们将通过silverlight动态创建一个dom元素,并未它注册单击事件,单击时修改silverlight中的矩形背景色。先准备相关的html。

div id="parent">

div>

divstyle="height:200px;">

asp:silverlight id="xaml1" runat="server"

source="~/clientbin/terrylee.silverlightaccessingdom3.xap"

version="2.0" width="100%" height="200px" />

div>

并且定义两个样式,其中newstyle我们将在silverlight中为新添加的a元素使用。

#parent

{

background:#fcdfb3;

border:solid 1px #ff9900;

width:500px;

height:100px;

margin-bottom:20px;

}

.newstyle

{

background:#0099ff;

border:solid 1px #0000ff;

}

做一个简单的界面,放置一个按钮和矩形:

canvas background="#cdfcae">

textblock text="silverlight accessing the html dom" foreground="red"

canvas.top="10" canvas.left="30" fontsize="18">

textblock>

rectangle x:name="result" height="40" width="300" fill="red"

canvas.left="30" canvas.top="50"

radiusx="5" radiusy="5">

rectangle>

button x:name="addbutton" background="red"

height="40" width="100" content="添 加"

canvas.top="50" canvas.left="350"

click="addbutton_click">

button>

canvas>

添加dom元素,创建一个a元素,并为它设置属性,其中用cssclass来定义它的样式:

htmlelement parent = htmlpage.document.getelementbyid("parent");

htmlelement button = htmlpage.document.createelement("a");

button.setattribute("innertext", "改变silverlight中的颜色");

button.setattribute("href","#");

button.cssclass = "newstyle";

parent.appendchild(button);

为a元素附加onclick事件,htmlelement提供了attachevent方法用来附加事件,使用泛型的eventhandler,在a元素单单击时我们改变silverlight中的矩形填充色和边框。

button.attachevent("onclick", new eventhandlerhtmleventargs>(button_click));

void button_click(object sender, htmleventargs e)

{

result.stroke = new solidcolorbrush(colors.black);

result.fill = new solidcolorbrush(colors.green);

result.strokethickness = 2;

}

完整的代码如下:

private void addbutton_click(object sender, routedeventargs e)

{

htmlelement parent = htmlpage.document.getelementbyid("parent");

htmlelement button = htmlpage.document.createelement("a");

button.setattribute("innertext", "改变silverlight中的颜色");

button.setattribute("href","#");

button.cssclass = "newstyle";

parent.appendchild(button);

button.attachevent("onclick", new eventhandlerhtmleventargs>(button_click));

}

void button_click(object sender, htmleventargs e)

{

result.stroke = new solidcolorbrush(colors.black);

result.fill = new solidcolorbrush(colors.green);

result.strokethickness = 2;

}

运行一下看看效果如何,起始界面

添加新元素a

单击改变矩形的背景颜色

htmlelement也提供了detachevent方法,可以取消注册事件。

结束语

本文简单介绍了如何在silverlight中添加和移除dom元素,以及为dom元素添加、取消事件处理程序。

下一篇:一步一步学silverlight 2系列（21）：如何在silverlight中调用javascript

作者:terrylee

出处:http://terrylee.cnblogs.com

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

标签: silverlight

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2008-03-11 19:00 terrylee 阅读(14256) 评论(40)编辑 收藏

发表评论

1934645

回复 引用 查看

#1楼 2008-03-11 19:41 clark zheng

好快呀,佩服勤奋的人!

回复 引用 查看

#2楼 2008-03-11 19:45 q.lee.lulu

好快啊..佩服!!

回复 引用 查看

#3楼[楼主] 2008-03-11 19:46 terrylee

@clark zheng

@q.lee.lulu

谢谢两位的支持,呵呵:)

回复 引用 查看

#4楼 2008-03-11 19:48 阿布

我在想要是silverlight支持自定义右键菜单就好了。terrylee英语好帮提到开发组。呵呵

回复 引用 查看

#5楼[楼主] 2008-03-11 19:50 terrylee

@阿布

支持自定义右键菜单啊,估计2.0是不会提供了,呵呵:)

回复 引用

#6楼 2008-03-11 21:03 kains[未注册用户]

估计可以用flex中屏蔽右键的方式搞定 :)

回复 引用

#7楼 2008-03-11 21:10 kains[未注册用户]

不知道1000行的表格在客户端滚动效率怎样,比较关心这个。其他的东西反倒是其次的。因为1.0的客户端性能比较差所有没有选择sl。

回复 引用 查看

#8楼[楼主] 2008-03-11 22:04 terrylee

@kains

:)

回复 引用 查看

#9楼 2008-03-11 22:19 菜菜灰

如果不在sliverlight里建button.attachevent("onclick", new eventhandler(button_click)); 事件,在客户端怎么去操作silverlight里面的元素。

回复 引用 查看

#10楼[楼主] 2008-03-11 22:33 terrylee

@菜菜灰

明天即将发布这部分内容,敬请期待^_^

回复 引用 查看

#11楼 2008-03-11 22:58 阿布

这里也是个不错的关于silverlight学习的blog,不过讲的要比较深一些的内容

http://www.wilcob.com/wilco/view.aspx

回复 引用 查看

#12楼[楼主] 2008-03-11 23:28 terrylee

@阿布

谢谢推荐,有空看看,呵呵:)

回复 引用 查看

#13楼 2008-03-12 01:42 aspnetx

现在忙得只有时间看了,难得抽出点时间赶紧来顶一下.佩服terrylee的勤奋.

回复 引用 查看

#14楼[楼主] 2008-03-12 08:30 terrylee

@aspnetx

多谢支持:)

回复 引用 查看

#15楼 2008-03-12 09:28 一瞬间

--引用--------------------------------------------------

菜菜灰: 如果不在sliverlight里建button.attachevent("onclick", new eventhandler(button_click)); 事件,在客户端怎么去操作silverlight里面的元素。

--------------------------------------------------------

你可以使用silverlight2.0之前的javascript的方法来操作silverlight里面的元素,用sender.gethost().content.findname("yourname")就可以获取到silverlight里面的元素,通过在createsilverlight()函数中的onload事件中绑定对应的事件。

回复 引用 查看

#16楼[楼主] 2008-03-12 09:38 terrylee

@一瞬间

现在貌似不用这么麻烦了,直接可以在javascript中调用silverlight中的.net代码:)

回复 引用

#17楼 2008-03-12 17:11 的[未注册用户]

似的发射方式

回复 引用

#18楼 2008-03-12 17:13 shiyong[未注册用户]

我也是 silverlight 爱好者,推荐一个网站,很不错的 ,叫 一元居

网址是 www.1yuanju.cn ,里面有很多的 silverlight 教程!

大家也可以到那里 交流一下!!

回复 引用 查看

#19楼[楼主] 2008-03-12 18:18 terrylee

@的

?

这是什么意思呢?:)

回复 引用 查看

#20楼 2008-10-10 18:46 threeg

div的innertext 的属性设置 ,,我怎么没有反映?取这个属性 不行!??

回复 引用

#21楼 2008-11-09 01:31 冻结[未注册用户]

@threeg

system.windows.browser.htmlelement element = system.windows.browser.htmlpage.document.getelementbyid("div1");

string s= element.getattribute("innertext");

这样去取,

回复 引用 查看

#22楼 2008-11-11 09:45 threeg

@冻结

我是这样取得。。好像在firefox里面不行!!!哈哈!innertext换成 innerhtml可以!!很奇怪!

回复 引用 查看

#23楼[楼主] 2008-11-12 11:15 terrylee

@threeg

各种浏览器之间的差异……

回复 引用 查看

#24楼 2009-02-04 22:44 emanlee

源代码 (silverlight 2.0 正式版)

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.htmlanddom_ii_1.rar

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.htmlanddom_ii_2.rar

http://files.cnblogs.com/emanlee/terrylee.silverlightdemo.htmlanddom_ii_3.rar

回复 引用

#25楼 2009-05-05 16:09 lovesilverlight[未注册用户]

请教一下:

在添加事件时:使用了

button.attachevent("onclick", new eventhandler(button_click));

为什么要使用new eventhandler(button_click)这个委托

而不直接使用

button.attachevent("onclick", new eventhandler(button_click));

这两个委托在这里的差别是什么呢?

使用第2个委托也能正常运行代码,为什么要使用第一个委托呢?

回复 引用 查看

#26楼 2009-05-06 11:10 冰碟

李大哥,请教个问题:

我新建的元素,比如:

htmlelement parent = htmlpage.document.getelementbyid("list");

htmlelement child = htmlpage.document.createelement("li");

child.setattribute("innertext", this.txtinput.text);

parent.appendchild(child);

怎么删除呢?

用下面的代码是不行的,好像是找不到id

htmlelement parent = htmlpage.document.getelementbyid("list");

htmlelement child = htmlpage.document.getelementbyid(this.txtinput1.text);

parent.removechild(child);

问题也就是,我怎么得到我刚刚添加的元素的id?

回复 引用 查看

#27楼 2009-05-06 11:28 冰碟

还有一个问题,为什么我创建一个元素a就添加不到div(parent)里面,创建一个button就可以?

回复 引用 查看

#28楼 2009-11-12 18:38 殷良胜

引用冰碟:李大哥,请教个问题:

我新建的元素,比如:

htmlelement parent = htmlpage.document.getelementbyid("list");

htmlelement child = htmlpage.document.createelement("li");

child.setattribute("innertext", this.txtinput.text);

parent.appendchild(child);

怎么删除呢?

用下面的代码是不行的,好像是找不到id

htmlelement parent = htmlpage.document.getelementbyid("list");

htmlelement child = htmlpage.document.getelementbyid(this.txtinput1.text);

parent.removechild(child);

问题也就是,我怎么得到我刚刚添加的元素的id?

htmlelement elep = htmlpage.document.getelementbyid("list");

htmlelement elec = htmlpage.document.getelementsbytagname(this.textbox2.text)[0] as htmlelement;

elep.removechild(elec);

因为在创建li元素时未指定id,所以删除时可以借助htmlpage.document.getelementsbytagname获取该元素的集合,然后你也可以动态的指定需要删除哪个元素,我这里写的是每次都删除第一个,你可以根据情况再定。

回复 引用 查看

#29楼 2009-11-12 18:42 殷良胜

引用冰碟:还有一个问题,为什么我创建一个元素a就添加不到div(parent)里面,创建一个button就可以?

//这是一个id为parentdiv的div元素 获取之 可以将a添加到这个div里面

htmlelement elep = htmlpage.document.getelementbyid("parentdiv");

htmlelement a = htmlpage.document.createelement("a");

a.setattribute("innertext", "改变颜色");

a.setattribute("href", "#");

a.cssclass = "newsstyle";

elep.appendchild(a);

你李大哥的这个demo是没有多大问题的 呵呵

回复 引用 查看

#30楼 2010-04-27 19:52 mjsky

谢谢楼主

回复 引用 查看

#31楼 2010-08-05 14:27 pengxiaojun

@threeg

在ff中用 textcontent属性

element.setattribute("txtcontent","text content")

回复 引用 查看

#32楼 2010-10-13 15:16 小猫呢0.0

我这innertext和innerhtml都不可以,没有反映。。

回复 引用 查看

#33楼 2010-10-14 15:36 heiyumars

没问题,一切正常。

就在删除的时候耽误了。

document.getelementsbytagname("li")返回的是当前页面中

元素组成的数组。

3q lz :)!

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新it新闻:

·ios 5.1 beta3文件预示未来 siri有可能支持 ipad和 ipod touch

·android平台12月广告浏览份额51.6% 超越ios

·测试版ios源代码显示ipad 3或将支持siri

·斯蒂芬·霍金的新电脑

·京东商城2.95亿竞得北京商业地一块

» 更多新闻...

最新知识库文章:

·javascript 面向对象编程

·持续集成之“everything is code”

·持续集成之“软件自我识别”

·持续集成之戏说check-in dance

·什么是闭包。
       我的理解

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/