Silverlight操纵html元素

http://www.aspstat.com/109

适用范围:silverlight1.1 语言:C#

想象javascript那样访问html元素吗?我们都知道可以通过javascript来访问html元素,这个技术就是我们大家现在所知道的DOM(Document Object Model)--由W3C标准制订.

其实在silverlight里也可以用C#代码来很方便的访问html元素.

首先你要做的是引用如下名称空间:

C#代码

using System.Windows.Browser;

首先看看一个静态(static)对象HtmlPage,其提供了关于浏览器的信息的属性.通过HtmPage对象提供的方法你可以以程序的方式方便的跳转到其他Web页:

HtmlPage对象

BrowserInformation属性:BrowserVersion浏览器信息; Platform 操作系统.;UserAgent 如MSIE 或Firefox还有版本号;

Navigate方法:跳转到其他页或网站,如:HtmlPage.Navigate(http://www.aspstat.com);

通过HtmlPage还可以访问DOM的核心document object(HtmlDocument类型),然后你就可以通过HtmlDocument来访问页面HTML元素.

如:HtmlDocument  doc = HtmlPage.Document.

修改页面属性:

如,修改页面标题:

doc.SetProperty( "title" , "坏坏的网志");

或者修改背景颜色:

doc.SetProperty("bgcolor" ,"red");

访问HTML元素

现在,让我们通过GetAttribute/SetAttribute,GetStyleAttribute/SetStyleAttribute方法来访问/修改指定的HTML元素.

HTML Element:<span id="msg">hello</span>

Silverlight in C#:

C#代码

HtmlElement elem = doc.GetElementByID("msg");
// 修改内容
elem.SetAttribute("innerHTML", "New text");
// 修改背景颜色
elem.SetStyleAttribute("background", "green");
// 修改文字颜色
elem.SetStyleAttribute("color", "white");

HTML Element: <input id="tbName" type="text"/>

Silverlight in C#:

C#代码

HtmlElement elem = doc.GetElementByID("tbName");
// 读值
string s = elem.GetAttribute("value");
// 修改值
elem.SetAttribute("value", "Your name");

HTML Element:<img id="imgMe" src="me.jpg" />

Silverlight in C#;

C#代码

HtmlElement elem = doc.GetElementByID("imgMe");
//修改图片
elem.SetAttribute("src","You.jpg");

HTML Element:

<select id="cities"><option>北京</option><option>上海</opiton><option>深圳</option></select>

Silverlight in C#:

C#代码

HtmlElement elem  = doc.GetElementByID("cities");
//获取select选中内容的index
string s = elem.GetAttribute("selectedIndex");

事件绑定

把事件注册到受管代码(C#)下处理,用来代替以前的通过javascript来处理.(PS:Flash下好象也可以,嚯嚯,还是比较喜欢C#的语法和VS开发IDE)

例如,用C#来处理一个按钮事件:

C#代码

HtmlElement elem = doc.GetElementByID("btbGo");
elem.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(this.btnGo_onClick));
   .....
//e.SourceElement引用时间触发对象
void btnGo_onClick(object sender, HtmlEventArgs e)
{
   .....
}

OK,完毕.silverlight让client的富煤体和client编程变的so easy.嘎嘎,加油.