為ASP.NET控制元件加入快捷選單

iDotNetSpace發表於2009-04-20

雖然快捷選單在桌面應用程式中已經是非常通用的元素,但是由於在象ASP.NET這樣的基於伺服器的技術沒有很好的描繪,所以在Web應用程式中快捷選單 並不是很通用。要想使用快捷選單,瀏覽器必須高度支援DHTML和豐富事件模式,例如:Microsoft Internet Explorer 5.0及更高版本,或者Netscape 6.0等。然而,各種瀏覽器的物件模式雖然功能上大至相同,但是成員各名字卻各不相同,這就需要我們自己實現物件和事件的從一種模式到到另一種模式的轉 換。這裡,我們建立一個針到Internet Explorer的物件模式的ASP.NET快捷選單。接著,我將經過修改使其功能支援其它瀏覽器。

ContextMenu Control 快捷選單控制元件概述:

MSDN Liabrary中包含了幾個DHTML快捷選單的示例。分別提供了對這一功能的不能實現方法。一個快捷選單就是在頁面中任何位置的一組標記程式碼。它包括 兩部分內容——介面和指令碼(當使用者在頁面右擊時關聯UI),UI提供一個可點選的元素的列表——選單項——和各自的內容文字,圖示,命令名 (command name),目標url,提示(tooltip),和所有你認為有必要顯示出來的東西。快捷選單介面是頁面的一部分,並且屬於頁面控制元件樹中的一員。(太多 的快捷選單將會出現執行的問題:與大多數使用者的常規情況相比,ASP.NET將傳送更多的快捷選單到瀏覽器)當使用者在頁面的一個元素上右擊時,將引發一段 JavaScript,這段指令碼將快捷選單移動到右擊的位置顯示。

快捷選單將保持隱藏屬性,只有當使用者在頁面的一個繫結個快捷選單的元素上右擊時,快捷選單才顯示。頁面元素接收指令碼事件並彈出一個快捷選單作為響 應。指令碼事件信賴於瀏覽器,在Internet Explorer 5.0和更新版本中是 OnContexMenu事件.在Netscape6.0和更新版本中你要使用 OnMouseUp 事件(在Internet Explorer 5.0+中你也可能使用OnMouseUp事件,但要多寫幾行程式碼)在接收事件的指令碼中,獲取快捷選單的UI程式碼塊並且將它移動到發生點選的位置。同時設 置彈出的panel的 visibilty屬性。當使用者在選單項上點選時,頁面回傳並引發伺服器端事件。對於伺服器而言,點選一個選單項和點選一具常規的按鈕沒什麼區別。

當使用者戶想取消已經開啟的快捷選單時怎麼辦呢?在windows程式中,按下Esc鍵或者在選單區域外點選都可以取消已彈出的快捷選單。所以你必須 在Web中實現這一功能。請注意,只有快捷選單處於活動(顯示出來)時,Esc鍵才有郊。因為Esc還可用於其它元素的其它鍵盤快捷方式。

我還可以讓選單在使用者滑鼠移開選單時隱藏。可以通過指令碼操作OnMouseLeave 事件實現。

使用彈出選單控制元件

假定我們已以設計出了這個彈出選單(我們一會兒再說如何實現這個快捷選單控制元件),那麼如何使用它在ASP.NET頁面中新增一個或多個快捷選單呢? 首先,在Visual Studio? .NET的工個欄中拖一個或多個快捷選單控制元件到頁面上。然後,為每個選單新增選單項,並配置每個選單項的的工具提示,命令名(command name)和其它所需的內容,例如快捷鍵和幫助主題的連結。命令名(command name)用於在響應點選快捷選單發生頁面回傳時確定是哪一個選單項被點選;對每一個快捷選單控制元件例項的選單項集合它必須是唯一的。

你必須在HTML標籤的OnContextMenu事件中加入程式碼來彈出快捷選單,程式碼必須信賴一系列的引數,象點選的x,y座標,點選的元素,和 要使用的快捷選單的例項等。注意:如果必要你可以使用這種方式完全代替瀏覽器的快捷選單。繫結到OnContextMenu事件執行的 JavaScript程式碼是在執行時動態生成的。ContextMenu控制元件將暴露一個集合屬性來包含分繫結快捷選單的控制元件集合,在 ContextMenu控制元件將在執行時給這些要繫結的控制元件一個 oncontextmenu 屬性。OK!完成!可以測試了。

慢著,讓我們先來想一下ContexMenu控制元件和頁中任意的顯示快捷選單的元素的繫結機制,這種機制對設計時的支援怎麼樣?理想的情況是:根據基 類每一個Web控制元件直接暴露一個 ContextMenuId屬性。然後在屬性視窗中選擇這個屬性時,將看到在頁面中的ContextMenu控制元件的列表。當然這些ContextMenu 控制元件我們是已經建立了的;ContextMenuId屬性在ASP.NET 1.x中不支援,在將來的ASP.NET2.0中也不支援。

在Visual Studio .NET 2003 整合開發環境中,ASP.NET複合控制元件可以很好的完成這一工作。可以通過使用類撰寫組合現有控制元件來創作新控制元件。複合控制元件可呈現一個重新使用現有控制元件功能 的使用者介面。複合控制元件可以從子控制元件的屬性合成屬性並處理由子控制元件引發的事件。它還可以公開自定義屬性和事件。

我不選擇使用複合控制元件有以下幾個原因:一個是Visual Studio .NET 2003對於Web窗體中的控制元件功能的擴充套件支援的不好(請參見:Extender provider components in ASP.NET: an IExtenderProvider implementation),第二,在Visual Studio 2005的ASP.NET設計器中不再支援元件托盤區。Web窗體設計器現在僅支援ASP.NET控制元件而忽略象複合控制元件這樣的非視覺化的元件。 Visual Studio 2005將不再信賴InitializeComponent節,並且不再在程式碼檔案中自動添任何工具生成(tool-generated)的程式碼。 ASP.NET控制元件也不設計成具有快捷選單,所以要繫結快捷選單隻能通過快捷選單控制元件自身的執行。這裡我使用類似ASP.NET驗證控制元件和被驗證控制元件之間 關聯的形式。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/12639172/viewspace-591025/,如需轉載,請註明出處,否則將追究法律責任。

相關文章