Silverlight里访问html元素!~

适用范围: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>

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"/>

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" />

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>

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.嘎嘎,加油;欢迎大家多多交流学习哈,偶的BLOG:http://www.aspstat.com/