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

來源:互聯網
上載者:User
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(



  • 相關文章

    E-Commerce Solutions

    Leverage the same tools powering the Alibaba Ecosystem

    Learn more >

    Apsara Conference 2019

    The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

    Learn more >

    Alibaba Cloud Free Trial

    Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

    Learn more >

    聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。