jQuery Control for ASP.NET：Server 端的 jQuery UI 控制項

（Part 1: 使用 DJ 建立 jQuery UI 應用程式初體驗）

Codeplex 軟體套件（Package）資訊
套件名稱	DJ: DotNetAge jQuery Controls for ASP.NET
作者	Ray Liang
目前版本	1.1.15 Stable（正式版）
URL	http://dj.codeplex.com/
使用難易度	易
使用此套件時可用的輔助工具	Visual Studio 2008
基礎知識	ASP.NET 伺服器控制項的使用。 jQuery 基本認識。 若有使用 AJAX Control Toolkit 的經驗更好。

縱橫 Web 開發的 scripting 工具：jQuery

在 Web 應用程式即將快速發展的 21 世紀初，當時 Web 應用程式仍是在以 Server 端為主的開發環境，如 ASP、PHP、JSP、Perl 或純 CGI 應用程式等等，伺服器仍以 Apache 與 IIS 為主流，當時在業界重視的都是 server-side development（伺服器端應用程式開發），而前端大概只有基本的 JavaScript、ActiveX Control 或 Plug-in 等等工具可以用，也就是除了瀏覽器以外，大概也沒什麼工具可以利用了。而當時使用者也不會太計較什麼前端介面的長相以及回應的速度什麼的，因為大家可能都習慣了畫面會『閃一下』的模式。

但是這個情況在 2005 年開始有了變化，原本由微軟在 1998 年在 Internet Explorer 4.0 中內植的一個允許讓 JavaScript 具有網路通訊能力的元件：XML HTTP 被其他瀏覽器開發者所接受，並且在各自的瀏覽器中提供了 XmlHttpRequest 的實作，這也代表了 JavaScript 將不再只是受制於由瀏覽器下載的 HTML 內容，而是可以主動向伺服器端要求資料，並且利用瀏覽器本身的 DHTML DOM（文件物件模型）來更新畫面，畫面不再會閃一下，這帶給了使用者新的操作體驗，而許多的網站（尤其是 Web 2.0 網站）也開始使用這項技術建構自己的應用，知名的 Facebook、Plurk（噗浪）以及 Twitter（推特）都廣泛的使用了這個技術，讓使用者在 Web 上的體驗變得更棒。而這個技術就是 Ajax 技術。

不只是 Ajax 技術開始發展，在瀏覽器內的 JavaScript 和 CSS 也快速發展起來，許多網站開始使用 DIV 來設計網站架構，大量運用 CSS 套用版面來改善美編以及載入速度（table 有生成畫面的延遲，但 DIV 相對輕微），而且瀏覽器針對 CSS 的改進也相當的大，支援使用關鍵字或特別的符號來識別不同層次的元素並給予樣式設定，像是這樣：

[CSS]

div[id^=myControl] // 查詢行為等於 id = myControl*
{
...
}
div[class$=menu] // 查詢行為等於 class = *menu
{
...
}
div[id=table] // 查詢行為等於 id = table
{
...
}

另一個 Web 前端開發亟待解決的問題，則是 DOM 的使用，因為以往存取 DOM 都要寫很長的物件存取方法，例如：

[JavaScript]

var mydoc = document.getElementById(“mydoc”);

if (clicked)
{
    mydoc.innerHTML = “<b>Clicked</b>”;
}

這其實還不打緊，最要命的是不同瀏覽器的相容性問題（Browser Compatibility），不同的瀏覽器針對 W3C 的規範，可能會有不同的實作方式（多數是 IE 和其他瀏覽器不同），就舉 XMLHttpRequest 這個例子好了，IE 本身並沒有 XMLHttpRequest，而是透過 ActiveXObject(“MSXML2.XMLHTTP”) 來生成的，但其他瀏覽器都有 XMLHttpRequest，所以為了要相容於所有的瀏覽器（至少要相容 9 成以上），開發人員就要這樣寫指令碼：

[JavaScript]

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
if (typeof(XMLHttpRequest) == "undefined") 
{
    XMLHttpRequest = function() {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch(e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP.4.0"); }
        catch(e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch(e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(e) {}
        try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch(e) {}
        throw new Error("This browser does not support XMLHttpRequest.");
    };
}
 
xmlhttp_request = new XMLHttpRequest();

依瀏覽器不同建立 XML Http Request 元件（來源：http://zh.wikipedia.org/wiki/Ajax）

　

NOTE

微軟的 Internet Explorer 自 7.0 開始，也開始提供了對原生 XmlHttpRequest 的支援，而不再受限於 ActiveXObject()。

　

這對於 Web 開發人員來說無異是一種龐大的負擔，所以坊間開始出現很多可以處理 AJAX，又可以將不同瀏覽器差異性封裝起來的 JavaScript 函式庫，這些 JavaScript 函式庫大多都支援 Obtrusive JavaScript 能力，並且具有類似物件導向的基礎結構，在這些函式庫中最受青睞的，非 jQuery 莫屬了。

jQuery 是由 John Resig 所發展的一套 JavaScript 函式庫，它的最主要特色是在它的選取器（selector）可以支援到 CSS 3.0 層次的能力，這代表可以不再只能使用瀏覽器 DOM的document.getElementsByTagName() 或 document.getElementById() 就能自在的存取在 HTML 中的任何一個元素，它獨創的包裹器（wrapper）讓控制 HTML 的能力更強，函式庫中的各式方法以及其核心的 AJAX 支援也讓許多開發人員樂於使用它，因此有很多主流的網站都用 jQuery 來發展，像是 Google、MLB、Digg、DELL、NBC、CBS 甚至知名的架站軟體 WordPress 以及 Drupal 也都採用 jQuery 作為前端操作的函式庫。微軟也宣布贊助 jQuery 團隊，並且將會在 Visual Studio 2010 以及 ASP.NET AJAX 中加入 jQuery 的完整支援（目前的 Visual Studio 2008 已支援 jQuery的Intellisense 能力）。

jQuery 不只有核心函式庫而已，它還實作了一組常用的使用者介面元件，稱為 jQuery UI，提供了一些平時想用 JavaScript 實作卻有難度的使用者控制項，像是拖放功能（Drop-Down）、Side Bar、Progress Bar、Accordion（類似 Outlook 左邊的功能區）、Sort（對元素排序）、Select（對元素選取）、Resize（縮放元素）以及 Effect（視覺效果）等等視覺化互動操作的能力。而 jQuery 眾多的 plug-in 也讓開發人員得以透過 jQuery 享受到更多豐富的資源（例如分割視窗、TreeView 或是 Tooltips 等等能力）。

雖然 jQuery 是那麼的好用，但對於不熟悉 Script 或是經驗不足的開發人員來說，jQuery 仍然是有個入門的門檻在，其主要原因是 jQuery 的驅動必須要透過 JavaScript，但不是每個開發人員都熟悉 JavaScript，而且它的 UI 元素排列是有規則性的，若不滿足它的規則性，jQuery UI 的驅動就會失效，這些都讓開發人員需要花較多的時間實驗與學習才會上手。

DJ jQuery 伺服器控制項元件介紹

本文要介紹的 DotNetAge jQuery Server Control for ASP.NET（以下簡稱 DJ）就是在 ASP.NET 中無痛使用 jQuery UI 的解決方案之一，它不但是 Open Source，而且完整支援了 jQuery 核心元件 1.3.2 版以及 jQuery UI 元件 1.7.2 版，同時它也支援 jQuery UI 所套用的 CSS Framework，因此 jQuery UI 的主題（Theme）也可以在這個控制項上使用。

目前 DJ 支援 14 種 server 端控制項，分別是：

DJ Server控制項	jQuery UI控制項
互動行為控制項（Interactive Control）
Draggable	Draggable
Droppable	Droppable
Sortable	Sortable
Selectable	Selectable
Resizable	Resizable
部件類控制項（Widget Control）
Accordion	Accordion
DatePicker	DatePicker
Dialog	Dialog
ProgressBar	ProgressBar
Slider	Slider
Tab	Tab
View
NavView
jQueryPlugin
視覺效果控制項（Effect Controls）
Effect	Effect
Animation

 

基本上這些控制項的用法和 AJAX Control Toolkit 有點相近，有使用過 AJAX Control Toolkit 的話會更容易上手。

在 Visual Studio 的工具箱加入控制項

首先，先由 Codeplex 中下載 DJ 的元件，並且解壓縮後，開啟 Visual Studio，在工具箱中按右鍵，選擇『加入索引標籤』，並輸入「DJ jQuery UI Controls」：

　

然後在裡面按右鍵，選擇『選擇項目』：

此時會出現選擇元件的對話盒，請按『瀏覽』，並且選擇到方才解壓縮 DJ 元件的資料夾，應可以看到三個檔案：

選擇 DNA.UI.JQuery.dll，並按『開啟舊檔』，此時工具箱會載入這個組件，並顯示它有哪些控制項可以用：

再按『確定』，即可將 DJ 的控制項新增到工具箱中，日後便可以由工具箱中拖放出來使用。

第一個 DJ 應用

這個應用是展示使用 DJ 控制項且不撰寫任何一行程式碼的小程式，只要使用拖放的方法就可以在頁面中放置 Accordion 控制項，其他的就由 DJ Control 自己處理即可。

首先，請開啟一個新專案（Web 網站或應用程式均可），並新增一個網頁，此時會進入設計模式（若進入原始檔模式，請切換回設計模式）：

接著，請在左邊工具箱中的 AJAX 擴充功能中，將 ScriptManager 拖放至頁面。

 

NOTE

DJ 需要 ScriptManager 以處理用戶端指令碼登錄的功能，若沒有 ScriptManager 時，會擲出「並未將物件參考設定為物件的執行個體」錯誤訊息。

 

再來，將 DJ 控制項中的 Accordion 控制項拖放到頁面中：

並且按下 Add View，建立新的 View：

然後自行找一份大型的 HTML 網頁，將內容貼到 View 中：

重覆上述新增 View 的動作，並貼上較大的 HTML 文件（如此才可看出 Accordion 控制項的能力），可以建立 3-5 個 View。

建立完成後，請建置專案，並瀏覽此網頁，由於我們還沒有修改 View 的名稱，因此看到的應該會類似這樣的畫面：

當按下 View1 時，View1 的內容會出現：

此時再使用『檢視原始碼』的功能來看網頁的原始碼，會發現 jQuery Accordion 的驅動碼已經輸出在原始碼中了：

重點是，目前還沒有寫到任何一行程式碼，就已經做好了 Accordion 的功能了。

替 DJ 控制項添加色彩：主題功能（Theme）

jQuery UI 控制項除了功能以外，它的 CSS Framework 也支援了八種官方樣式以及九種由網友提供的樣式，共十七組供需要的開發人員自行下載（有需要的話也可以參考 CSS Framework 來自訂樣式），而在 DJ 中也支援了十七組樣式（官方網站上列出的都有），但它不是和元件檔包裝在一起的，而是另外由 Downloads 下載 jQueryThemes.zip 再做適當的設定才可以生效。

筆者也認為前一步完成的那個醜醜的畫面是無法搬上檯面的，不過如果是這樣可能就不一樣了：

如何？和剛才那個破破又空洞的介面比較差很多吧，而且還有十七種任君選擇，並且只要符合 jQuery的CSS Framework，只要設定一次，所有的 jQuery UI 控制項都會切換成對應的主題，完全不需要自己去做修改，DJ 同時也可以支援 ASP.NET 本身就有的主題以及 skin 的功能。

那麼，我們就來實作吧。

首先，先在 DJ 的 Codeplex 網站上下載 jQueryThemes.zip 檔案並解壓縮，你會看到有十七個資料夾，這十七個資料夾分裝了不同的圖片以及 CSS 定義檔，會在切換主題時生效。然後，開啟剛才的專案的 Web.config 檔，找到 <pages> 區段：

[XML, Web.config]

<pages>
  <controls>    
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  </controls>
</pages>

將它修改一下，添加必要的設定（如紅字標示）：

<pages styleSheetTheme="ui-darkness">

  <controls>

    <add tagPrefix="DotNetAge" namespace="DNA.UI.JQuery" assembly="DNA.UI.JQuery"/>

**    <add tagPrefix="DotNetAge" namespace="DNA.UI" assembly="DNA"/>**

    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

    <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

  </controls>

</pages>

 

其中的 styleSheetTheme 是表示要用哪一種主題，在範例中是使用 ui-darkness，而 controls 中的 DNA.UI 和 DNA.UI.JQuery 組件則是支援主題功能的組件。

接著，在專案中新增 ASP.NET Theme 的資料夾（App_Themes），在專案上按右鍵，選擇『佈景主題』：

再將方才解壓縮過的所有 jQuery 主題資料夾都複製到 App_Themes 資料夾中，完成後的結果看起來是：

 

NOTE

若看不到 App_Themes 的內容，請按上方的『顯示所有檔案』，即可看到這些資料夾，也可以使用『加入至專案』功能將它們加到專案，這樣只要專案開啟就可以看到。

 

最後，建置專案，再重新瀏覽在前一步所建立的網頁，即可看到美美的畫面。

如何，到目前為止，也是完全沒寫到一行程式，就有如此的效果。

DJ View 和 NavView 的不同

做完前面的程式後，也許你會發現，在 Accordion 控制項中新增 View 時，會看到兩種 View：

在 DJ 控制項的清單中，有兩種不同的資料容器（可以視為是 Panel 的一種），一種是 View，另一種是 NavView，這兩種 View 都可以裝載資料，只是 View 可以裝載 HTML 的內容，但 NavView 只能裝載 NavViewItem 物件，而 NavViewItem 物件是一個清單項目（如下圖），每一個項目可以裝載圖片、連結或文字，不過 NavViewItem 的圖示限制比較多一些（不會依圖片大小自動變動），所以只適合小圖示，或者用 View 來自己設定。

 

The Next...

接下來，筆者會逐一介紹每個 DJ 控制項的實際用法，以及如何在程式中使用它，也會在其中穿插一些好用的 jQuery Plug-in 的介紹，讓讀者可以感受到 jQuery 的威力以及它的便利性。