Cutting Edge:使用用戶端行為擴充ASP.NET DataGrid 控制項

asp.net|datagrid|用戶端|控制項

Cutting Edge:使用用戶端行為擴充ASP.NET DataGrid 控制項

(可拖動列和用戶端排序)

英文原文： Extend the ASP.NET DataGrid with Client-side Behaviors
作者：Dino Esposito
翻譯： MasterLRC
源碼： CuttingEdge0401.exe

如同比薩餅廚師的擀麵杖，DataGrid 控制項，對於一個熟練的ASP.NET開發人員來說是非常基本而且有用的工具（譯者：老外的比喻，感覺好奇怪）。 雖然，在 ASP.NET 1.x 中，DataGrid已經是非常強大而且用途廣泛的控制項和伺服器工具。 但是，我們依然可以通過給它加一點用戶端指令碼,來使它的功能變得更加強大。 最近，我看到了Dave Massy在幾年前為 MSDN Online 的“DHTML Dude”欄目寫的一些精彩內容。 Dave 論述了一些使 HTML的 <Table> 元素功能強大的創造性的方法，其中之一就是如何對table的內容進行排序和在Table中拖動列。

他還示範了<Table>元素的的DHTMLBehavior的用法。我意識到，當DataGrid控制項在瀏覽器上呈現為 HTML 時，它完全就是一個<Table>元素; 雖然它可能包含了許多樣式屬性，但它的基本結構依然是一個典型的 HTML Table。這使我意識到我可以建立帶用戶端排序和可拖動列功能的 DataGrid 控制項。 這就是我們這個月的欄目內容，你可以下載原始碼來驗證我所說並非虛言。

DHTML Behavior快速指南

DHTML Behavior在我們的擴充的 DataGrid 控制項中扮演非常重要的角色。 一會兒你就會注意到：我並沒有使用Dave在他的原始form中使用的方法，為了使 behavior 在 ASP.NET 控制項可以工作，我做了一點更改。 雖然使用這個修改後的組件不需要任何 Javascript 技能，但是瞭解一下 DHTML Behavior的技術可以使你更好的理解伺服器端和用戶端協同工作的機制。

DHTML Behavior 就是利用 CSS（cascading style sheet層疊樣式表）的 behavior 樣式，綁定到一個 HTML 標籤的指令碼組件 對於那些不支援CSS或不識別 behavior 樣式的老瀏覽器中，將自動怱略未識別的樣式。要想深入瞭解 DHTML 請參見： Scripting Evolves to a More Powerful Technology: HTML Behaviors in Depth 一個 DHTML behavior 就是一個 JavaScrip 函數集，這個函數集中加入了一些由特殊句法定義的公用成員。一般來講，這些公用成員是一些屬性和事件，有時也可能是方法;Behavior 工作在現有的 HTML 元素之上， 允許你覆蓋和擴充 HTML 元素的 behavior 。方法是：behavior 把它自己定義的代碼關聯到 DHTML 的事件上。例如，提供拖動列功能的 behavior 操作 onmousedown 和 onmouseup 事件。而且，所有關鍵的 DHTML behavior 都支援 oncontentready 事件，當 HTML subtree(在指定元素內的所有 HTML)被解析完成時將激發這一事件。當 oncontentreadey 事件激發時，是初始化 behavior 的好時機。

其實，behavior 的核心就是向 Microsoft Internet Explorer（4.0或更高版本）瀏覽器暴露一系列介面的 COM 物件。最終就是你可以把它寫成 C++ 元組件或 HTML 元件（HTC）文字檔 HTC檔案可以布署在承載應用它們的檔案（HTML，ASP，ASP.NET）的伺服器上，不需要在用戶端安裝。

下面代碼錶示如何通過使用 “dragdrop.htc”behavior 添加一個具有可拖動列功能的<table≷標籤：

<TABLE style="behavior:url(dragdrop.htc);"> 這裡“dragdrop.htc”檔案必須和使用它的檔案布署於同一目錄。

可拖動的 DataGrid

在閱讀了 Dave Massy 的文章之後，我下載了 dragdrop.htc 樣本組件，然後我嘗試在一個實驗頁面中把它綁定到 DataGrid 組件。如下：

theGrid.Style["behavior"] = "url(dragdrop.htc)"; 奇怪的是，組件沒起作用。考慮到 DataGrid 在用戶端完全是一個 Table 這一不爭事實，我決定比較一下 Dave 的樣本 Table 的代碼和由 ASP.NET DataGrid 產生的 HTML 程式碼有什麼不同。我注意到：在 ASP.NET 1.x 中的 DataGrid 產生的 HTML Table 不包含 THEAD 和 TBODY 元素。而這兩個元素恰恰是樣本 behavior 起作用的關鍵因素。雖然拖動和下壓列並不直接需要 THEAD 和 TBODY 兩個元素，但是這兩個元素 非常有助於定位 table 的表頭和表體。

有兩個辦法解決這一問題：重寫一個不使用 THEAD 和 TBODY 的 behavior ;自己寫一個產生帶 THEAD 和 TBODY 標籤的 Table 的 DataGrid 控制項。 對於一個象我這樣的 ASP.NET 開發人員來說，我相信開發一個自訂控制項比編寫一個 behavior 要容易。因為至少我們可以進行有效進行代碼根蹤調試。 於是，我建立一個 Visual Studio .NET 解決方案，添加一個 ASP.NET 應用程式工程和一個 Web 控制項陳列庫工程。就有了下面的新 DataGrid 控制項的雛形：

[ToolboxData("<{0}:DataGrid runat=\"server\" />")]public class DataGrid : System.Web.UI.WebControls.DataGrid{public DataGrid() : base(){EnableColumnDrag = true;DragColor = Color.Empty;HitColor = Color.Empty;}...}

構造器初始化三個公用自訂屬性：EnableColumnDrag、DragColor和HitColor。EnableColumnDrag 是一個表示是否可以拖動列的布爾屬性。 如果此屬性設定成 False ，自訂 DataGrid 控制項將不會添加拖動列 behavior。另外兩個屬性分別表示被拖動的列的背景色和將下壓列的顏色。

注意這兩個顏色屬性不會影響 DataGrid 伺服器控制項的任何邏輯。他們是那種僅輸出 HTML 值（這個值只對用戶端 behavior 有用）的伺服器端屬性。 這兩個屬性的值被呈現為由 grid 的產生的 <table> 標籤的自訂屬性。DataGrid 的標記代碼是在控制項的 Render 方法中建立的,如下：

protected override void Render(HtmlTextWriter output){// Sets attributes for the DragDrop behaviorif (EnableColumnDrag){if (DragColor != Color.Empty)Attributes["DragColor"] = DragColor.Name.ToLower();if (HitColor != Color.Empty)Attributes["HitColor"] =        HitColor.Name.ToLower(); // Capturethe defaultoutputof the DataGrid StringWriterwriter =  new StringWriter(); HtmlTextWriterbuffer =         new  HtmlTextWriter(writer); base.Render(buffer);string gridMarkup =   writer.ToString();  //Parse the markup to insert missing tags //Find the first occurrence of >  and insert
int insertPoint;
insertPoint = gridMarkup.IndexOf(">")+ 1; // len of >
gridMarkup = gridMarkup.Insert(insertPoint, "");
insertPoint = gridMarkup.IndexOf("") + 5; // len of
gridMarkup = gridMarkup.Insert(