轉帖|其它|編輯:郝浩|2011-07-08 18:05:55.000|閱讀 473 次
概述:上回重新講解了 IEBrowser jQuery 方面的方法, 本次向大家介紹其新版本中為頁面元素添加 .NET 事件的功能.在 IEBrowser 的最新版本 2.5.0 中, 增加了 AttachEvent 系列的方法, 分別是 AttachEvent, AttachEventByID, AttachEventByJQuery, AttachEventByTagName, 他們可以為指定的 HtmlElement 對象, 指定 id 屬性的元素, 符合指定 JQuery 對象要求的元素, 以及指定 tagName 屬性的元素添加 .NET 事件.本次的例子是實現一個簡單的加法運算功能。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
上回重新講解了 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 是開源共享的代碼, 可以在 //code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:博客園