在 .NET 中设置页面元素的 javascript 事件 - IEBrowser [5]
上回重新讲解了 IEBrowser jQuery 方面的方法, 本次向大家介绍其新版本中为页面元素添加 .NET 事件的功能.
在 IEBrowser 的最新版本 2.5.0 中, 增加了 AttachEvent 系列的方法, 分别是 AttachEvent, AttachEventByID, AttachEventByJQuery, AttachEventByTagName, 他们可以为指定的 HtmlElement 对象, 指定 id 属性的元素, 符合指定 JQuery 对象要求的元素, 以及指定 tagName 属性的元素添加 .NET 事件.
本次的例子是实现一个简单的加法运算功能, 首先, 新建了一个名为 add.htm 的页面, 代码如下:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <input type="text" id="num1" /> + <input type="text" id="num2" />
8 <input type="button" value="=" /> <span id="result">?</span>
9 </body>
10 </html>
在页面中, 添加了两个 id 分别为 num1 和 num2 的文本框, 用户将在这两个文本框中输入两个加数, 另外有一个用于计算的 = 号按钮, 以及一个 id 为 result 并显示计算结果的 span 元素.
可以看到页面中没有书写任何的 js 脚本来完成加法的运算, 因为我们接下来要在 .NET 中使用 IEBrowser 来完成这个任务.
在页面编写完成后, 我们添加一个窗体 FormAdd, 下面是部分代码:
1 public partial class FormAdd : Form
2 {
3 private IEBrowser ie;
4
5 // ...
6
7 private void FormAdd_Load ( object sender, EventArgs e )
8 {
9 this.ie = new IEBrowser ( this.webBrowser );
10
11 this.ie.Navigate ( Path.Combine ( AppDomain.CurrentDomain.BaseDirectory, "add.htm" ) );
12
13 this.ie.IEFlow.Wait ( new UrlCondition ( "w", "add.htm", StringCompareMode.Contain ) );
14
15 this.ie.AttachEventByID ( "num1", "onchange", this.numChange );
16 this.ie.AttachEventByID ( "num2", "onchange", this.numChange );
17
18 this.ie.InstallJQuery(JQuery.CodeMin);
19 this.ie.AttachEventByJQuery ( JQuery.Create ( "':button'" ), "onclick", this.addClick );
20 }
21
22 private void numChange ( object sender, EventArgs e )
23 {
24 HtmlElement num = sender as HtmlElement;
25
26 try
27 { Convert.ToInt32 ( num.GetAttribute ( "value" ) ); }
28 catch
29 { MessageBox.Show ( "请输入一个正确的数字" ); }
30
31 }
32
33 private void addClick ( object sender, EventArgs e )
34 {
35
36 try
37 {
38 int result;
39
40 result = Convert.ToInt32 ( this.ie.ExecuteJQuery<string> ( JQuery.Create ( "'#num1'" ).Val ( ) ) ) + Convert.ToInt32 ( this.ie.ExecuteJQuery<string> ( JQuery.Create ( "'#num2'" ).Val ( ) ) );
41
42 this.ie.ExecuteJQuery ( JQuery.Create ( "'#result'" ).Text ( "'" + result.ToString ( ) + "'" ) );
43 }
44 catch
45 { MessageBox.Show ( "计算错误" ); }
46
47 }
48
49 }
在窗口的 Load 事件中, 我们初始化了 IEBrowser 对象并使用 Navigate 和 Wait 方法载入并等待之前建立的 add.htm 页面, 这里 add.htm 需要输出到最终的运行目录中. 而 Navigate 和 Wait 这两个方法应该在之前的文章中说明过, 这里就不再详细解释了.
在 15 和 16 行, 我们使用了 AttachEventByID 方法为页面上的两个文本框添加了改变事件, 第一个参数传递了文本框的 id, 分别是 num1 和 num2, 第二个参数则为事件的名称 onchange, 第三个参数为处理事件的 .NET 方法 numChange. 在 22 行, 我们看到了 numChange 的定义, 在 numChange 中, 检测了文本框的文本是否为一个合法的数字, 我只是使用了一个简单 try ... catch ... 来完成这个功能, 大家也可以使用其他的方法. 事件中的 sender 参数也就是触发事件的页面元素对应的 HtmlElement 对象, 而正因如此, 我们才使用了 num.GetAttribute ( "value" ) 来获取文本框的 value 属性.
在 19 行, 我们使用了 AttachEventByJQuery 方法为页面上的按钮添加点击事件, 选择器 ':button' 表示页面上所有的按钮, 而页面上只有一个计算按钮, 所以也就正确的为计算添加了 addClick 来处理事件. 而 AttachEventByJQuery 也上一方法的不同在于, 他传递一个 JQuery 对象作为选择页面的依据. 注意执行 AttachEventByJQuery 之前, 我们需要使用 InstallJQuery 方法在页面上安装 jQuery 脚本. 在 addClick 中, 我们通过 IEBrowser 的 ExecuteJQuery 方法获取到了页面中用户输入的加数, 然后相加并设置到 span 元素中显示.
上篇文章介绍了 IEBrowser jQuery 方面的功能, 这里不再详细解释 40 与 42 行.
好的, 整个例子还是比较简单的, 如果希望看到实际过程, 可以参照下面的演示.
IEBrowser 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
感谢之前留言以及通过其他方法给我提出建议的朋友, 这些建议其实大部分我已经完成, 目前 IEBrowser 最新版本为 2.5.0, 可以在上面的地址看到新版本改动的内容, 如果大家有关于 IEBrowser 好的想法和建议, 欢迎继续留言.
