2.利用ASP.NET元件DataGrid顯示數據
相關內容介紹:
ASP.NET自帶了許多web元件，加速編網頁的速度。讓我們用Dreamwaver MX自帶的一個教學--global的例子，來示範如何利用此元件將資料庫裡的資料顯示出來.
1.資料庫連結和用DataGrid顯示數據
在web頁面目錄裡的assets中有本實例的資料庫global.mdb,我們的目的就是將此資料庫中的location表中的資料根據Region_id的值來輸出不同地區的資料。 (可利用Access開啟此資料庫)
我們可以將location3.htm檔案重新命名為location3.aspx(ASP.NET的web視窗檔案的後綴為aspx)，而後對其編輯。
[圖2-1 需要更改的頁面]
讓我們來刪除中間簡單的靜態部分,來用ASP.NET的DataGrid來實現其功能。
[圖2-2 刪除靜態部分的頁面]
下一步就是連結資料庫了。點選右邊的Application面板，選擇Database，點選+號，
選擇OLE DB connection。
[圖2-3 Application 面板]
接著進入OLE DB Connection 對話框。這裡可以手寫連結資料庫程式碼，也可自動產生程式碼。將Connection Name命名為location,點選Build，透過精靈自動產生程式碼。
[圖2-4 OLE DB Connection 對話框]
進入Data Link Properties頁面後，選擇Provider設定資料庫引擎
以下就是令人驚異的了,支援21種資料庫連結方式其中包括SQL server,Oracle等等。
[圖2-5 資料庫引擎提供頁]
這就是.NET的巨好的地方之一，支援多種資料庫。其採用了ADO.NET。等一會我們用此精靈產生的connection string就是依照ADO.NET寫成的。
由於我們將要連結的資料庫是Access2000的資料庫，所以我們選擇Microsoft Jet 4.0 OLE DB Provider,點選Next。
點選1.Select or enter a database name 旁的按鈕，選擇所要連結的資料庫
在2.Enter information to log on to the database 中取消User name和Password
[圖2-6 設定連結]
在Advanced 中設定讀取的權限。選擇Read, ReadWrite,Write，按確定。
[圖2-7 設定權限]
新增Connection name，點選Test測試資料庫連結,倘若資料庫連結成功，點選OK。恭喜你，
你已經將資料庫連結到你的網站了。下一步就應該是將其用DataGrid顯示出來
同樣是Application面板,選擇Server Behaviors，
先完成設定,點選deplay，程式會將自動部署網站,會將DreamweaverCtrls.dll，web.config以及_mmServerScripts資料夾拷貝到網站目錄，是用Dreamweaver MX建立ASP.net網頁必需的檔案。
[圖2-8 部署站點]
同時先在網站根目錄下建立bin資料夾，並將DreamweaverCtrls.dll檔案拷貝至此資料夾。
點選+號，先新建一個DataSet.
[圖2-9 新增Dataset]
Connection 是選擇資料來源，Table是選擇表，Column是選擇項目，Filter是用於篩選數據，由於此頁面是顯示Europe的數據，故設Entered Value=3。 On Failure，Go To是用來處理讀取資料出錯時跳到的頁面。
[圖2-10建立資料集]
建立DataSet成功後就可以建立DataGrid了。點選+號，選擇DataGrid
[圖2-11 新增DataGrid]
Dataset中選擇需要的記錄集，Show中設定是否採用分頁顯示和分頁顯示的每頁記錄個數，Navigation中設定導覽列的方式，Columns中可以新增或刪除顯示的項目。
[圖2-12 設定DataGrid]
點選Edit，設定表頭的標題。輸入標題後，按一下OK確定。
[圖2-13 設定標題]
點選OK,新增DataGrid。
[圖2-14預覽頁]
在預覽頁面中你可以看到新增了一個DataGrid的區域，按F12預覽頁面。
下面就是運行後的頁面。
[圖2-15 運行後的頁]
2.更改DataGrid的屬性
相關內容介紹:
當你看到這個組件的時候是否會覺得看起來顏色不太漂亮，那樣就讓我們來改變他吧。 DataGrid元件具有許多屬性,可以透過他改變DataGrid的樣式。
分析程式碼
這是Dreamwaver MX產生的程式碼，可依其屬性進行修改。
PagerStyle-Mode
可以設定分頁顯示的形式，NumericPages以數字分頁顯示，NextPrev是以”<” “>”標記顯示。
HeaderStyle
設定表頭的樣式。可設定HorizontalAlign(水平對齊)，BackColor(背景顏色)，ForeColor(前景顏色)，Font-Name(字體)，Font-Bold(是否為粗體)，Font-Size(字體大小)
ItemStyle
設定每個資料項的樣式，其中屬性同上
AlternatingItemStyle
如果需要交替資料項顏色，這可以新增此項，屬性同上
FooterStyle
設定頁腳樣式
PagerStyle
表底樣式
Dreamwaver MX也有可以變更DataGrid的樣式的對話框。
選擇產生的DataGrid，再在其屬性面板中點選Edit Columns..
[圖2-16 DataGrid的屬性面板]
進入屬性修改頁面,我們可以透過”+”,”-”來增減所要的列,同時可以點選Edit設定每一項對應的資料項，以及Title的名字。點擊Change Column可以設定每一項的類型其中包括Free Form(自由設定每列包含的數據，而且可以新增自己的內容)，Hyperlink(設定為超連結)，Edit,Updata,Cancel Buttons(可以用於快速建立管理頁面)，Delete Button(刪除記錄)
[圖2-17 DataGrid Column屬性]
[圖2-18 Change Column Type屬性]
相信透過這些屬性你可以設定你想要的DataGrid。