基於AJAX.NET技術的DataGrid控制項開發

ajax|datagrid|datagrid控制項|控制項開發

　　摘要 本文中的這個DataGrid是一個用戶端控制項，它是使用JavaScript和Ajax.net技術構建的。

　　一、 簡介

　　本文中要建立的這個DataGrid是一個用戶端控制項。它是使用JavaScript並且使用Ajax.net技術構建的以實現與ASP.NET後端代碼的通訊；而在這個後端，我們使用ADO.NET存取資料庫並使用Dataset更新資料庫。

　　這個控制項具有一個DataGrid應該具有的一切特徵，並且具有在你建立串連串和表名後不需要編寫任何代碼就能夠自動工作的所有功能。

　　這個Datagrid支援如下功能：

　　1. 頁面。

　　2. 排序。

　　3. Master-Detail（Detail部分還支援頁面和排序)。

　　4. 基於給定的列條件可以定製行顏色。

　　5. 編輯。

　　6. 當沒有頁面支援時，沒有頭部滾動的捲軸支援。

　　7. 支援控制項（映像，文字框，超級連結，下拉式清單方塊，複選框）。

　　8. 自動分割頭部名稱。

　　9. 針對十進位、電子郵件和數位自動校正文字框。

　　通過右擊螢幕開啟一個快顯視窗（參考圖１），可以實現這個DataGrid在不同的模式之間的切換（圖2展示一種模式下的視圖）：

圖2.這個DataGrid具有分頁，Master-Detail和編輯功能。

圖3.這個DataGrid具有定製控制項和含有靜態頭部的捲軸

　　二、 效能剖析

　　這個DataGrid是應邀使用javascript建立的，而JavaScript並不是一種編譯語言，因此，與把xtml代碼直接產生到頁面的技術相比，這種方式速度顯然慢些。如果DataGrid包含多於200記錄，那麼最好還是使用頁面方式。否則，效能將會受到很大影響。

　　我們使用CSS（層疊式樣表）來配置這個控制項的外觀；因此，使用者可以很容易地進行修改。

　　三、 用法

　　這個使用者控制項包括五個部分：

　　1. 使用者控制項.ascx檔案

　　2. JavaScript檔案

　　3. 資料庫存取檔案
　
　　4. CSS檔案

　　5. AJAX.NET動態連結程式庫（.dll）

　　首先，要添加對ajax.dll的參考。

　　然後，把UserControl目錄直接複製到你的工程並且把這個使用者控制項添加到你的ASP.Net頁面（請參考工程源碼）：
＜%@ Register TagPrefix="WebDataGridDemo" TagName="WebDataGrid" Src= "UserControl/WebDataGridUserControl.ascx"%＞
＜WEBDATAGRIDDEMO:WEBDATAGRID id="wdg1" runat="server"＞ ＜/WEBDATAGRIDDEMO:WEBDATAGRID＞

　　在這個Web.config檔案中，安裝連接字串。接下來，添加對Ajax.net dll的參考：

＜appSettings＞
＜add key="ConnectionString" value="Data Source=(local);Initial Catalog=Northwind;User Id=sa;Password=xxx;" /＞
＜/appSettings＞
＜httpHandlers＞
＜add verb="POST，GET" path="
type="Ajax.PageHandlerFactory， Ajax " /＞
＜/httpHandlers＞
　　在這個DynamicDataGrid.js檔案中，大多數參數具有預設值，你可以通過使用該控制項的Web表單來修改這些參數。

private void Page_Load(object sender， System.EventArgs e)
{
　if(!Page.IsPostBack)
　{
　　WebDataGridUserControl.MainTableName="suppliers";
　　WebDataGridUserControl.DetailTableName = "products";
　　//這些可選的值將會覆蓋預設的屬性
　　WebDataGridUserControl.Height =300;
　　WebDataGridUserControl.Width = 780;
　　WebDataGridUserControl.Editable = 1;
　　WebDataGridUserControl.PageSize = 4;
　}
}
　　四、 配置

　　另外，你還可以修改WebDataGridUserControl.ascx.cs檔案中的一些參數。

　　如果你不使用頁面模式，那麼你可能需要改變數組ResetIfNoEditable和columnWidth以調整該格子的頭部的列尺寸和行尺寸。

[Ajax.AjaxMethod]
public ArrayList InitializeInfo()
{
　...
　// int pageable=1; masterDetail =1;editable = 1;pageSize=10; height=300
　string [] FunctionProperty = {"1"， "1"， gEdit， gPageSize， gridHeight， gridWidth};
　//={}-沒有可用控制項，0-標籤，1-映像，2-超級連結，3-文字框，4-複選框，5-下拉式清單方塊
　string [] ColumnControlType = {"0"，"2"，"3"，"3"，"0"，"3"，"4"};
　//顯示哪些列（3，4，5，7）是可編輯的
　string [] ColumnEditable = {"0"，"0"，"1"，"1"，"1"，"0"，"1"};

　//下列屬性僅僅用於非頁面支援情況下
　//下列一句用於把第3，4，5列編輯按鈕的尺寸重新設定為10，10，10
　string [] ResetIfNoEditable = {"0"，"0"，"10"，"10"，"10"， "0"};

　string [] CustomizedHeadZize={"68"，"140"，"120"，"120"，"120"， "0"};
　//當沒有頁面支援設定時，需要列寬度；你應該把一列設定為"0"
　string [] columnWidth ={"68"，"140"，"120"，"120"，"120"，"0"};
　...
　return al;
}
[Ajax.AjaxMethod]
public ArrayList GetHeadArray()
{
　...
　//這個數組應該匹配編輯欄位-column3=Decimal，column4=Email，column5=Number
　string [] ValidateType = {""，""，"Decimal"，"Email"，"Number"};
　//賦值ColumnDisplayName = {};如果不使用定製顯示名
　string [] ColumnDisplayName = {};
　...
}
　　最後，十分感謝Michael Schwarz，是他建立了搭建起JavaScript與.Net之間橋樑的ajax.net。