WebMatrix開發ASP.NET試用手記

asp.net|web
　　前言

　　無可否認，Microsoft的重量級開發工具Visual Studio.NET確實為我們提供了一個非常強大、優秀的.NET應用系統整合式開發環境。但是，使用VS.NET也要面對一些問題，比如：VS.NET要付費（當然D版另當別論），VS.NET安裝比較麻煩，VS.NET佔用空間很大，對機器要求也較高。因此，採用VS.NET來開發要付出比較高昂的使用成本，只有應用於大型的系統開發才有較好的性效比。

　　如果僅僅只是要進行中小型的基於ASP.NET的Web應用系統開發的話，是否一定要用強大而昂貴的Visual Studio.NET呢？

　　答案是否定的。最近Microsoft為開發人員提供了一款免費的小巧易用的開發ASP.NET工具，這就是WebMatrix。

圖1：http://www.asp.net/WebMatrix

　　圖1是WebMatrix項目的首頁，WebMatrix起源於2000年12月，微軟的工程師完全採用.NET Framework和C#語言開發的一款免費的輕量級ASP.NET快速開發工具，可以方便快捷的完成Web應用系統的開發。

　　WebMatrix最突出的特點就是小巧靈活，整個安裝檔案不過1.3M左右，安裝後全部大小也不過2.8M左右，使用它只需基本的.NET Framework支援就可以了，甚至不需要安裝IIS，因為WebMatrix內建了一個Microsoft ASP.NET Web Matrix Server，發行就緒、運行ASP.NET應用程式。
　　走近WebMatrix

　　l) 安裝WebMatrix

　　WebMatrix目前可以支援的作業系統是Windows 2000和Windows XP，可以從http://www.asp.net/webmatrix/免費下載。

　　安裝WebMatrix之前必須先裝好Microsoft .NET Framework 1.1和Internet Expleror 5.5以上版本。安裝過程是傻瓜式的，只管一路"Next"就行了。安裝好後運行可以看到WebMatrix的主介面如圖2所示。其介面布局與VS.NET有點類似，上部是菜單/工具條，左邊是工具箱，提供開發ASP.NET所需的各種控制項工具，右邊是工作區管理欄和屬性欄，分別用於檔案/資料的管理和控制項屬性的配置，中間是主工作區。

圖2：WebMatrix主介面

 

　　2) 第一個ASP.NET程式Hello WebMatrix！

　　首先我們來建立第一個ASP.NET程式，從File菜單建立一個檔案，可以看到一個建立檔案對話方塊（圖3）。

圖3：建立檔案對話方塊

　　WebMatrix與VS.NET的一個很大不同之處是WebMatrix是基於檔案來進行開發管理的，而不是象VS.NET那樣基於項目（Project）來管理。這跟WebMatrix主要面對的開發項目是中小型項目有關係，小型項目開發相對比較簡單，管理沒有那麼複雜，WebMatrix自身的定位只是一個輕量級的開發工具。

　　從開啟的建立檔案對話方塊中可以看到WebMatrix支援建立多種類型的檔案，包括.aspx、.sql、.cs、.xml檔案等，可以支援三種典型的.NET應用開發語言--C#、J#、Visual Basic.NET。選擇預設的ASP.NET Page，並輸入要建立的檔案名稱HelloWebMatrix.aspx，選擇C#為程式設計語言，即可建立一個空白ASPX分頁檔。

　　WebMatrix為每個ASP.NET檔案視窗提供了四種視圖，分別是設計檢視（Design），靜態程式碼檢視（HTML），動態程式碼檢視（Code）和全域視圖（All），預設顯示的是設計檢視。

　　從左邊的工具箱中的Web Controls欄中選擇Button控制項拖放到頁面設計檢視上，可以看到一個Button控制項顯示在視圖中，在屬性欄中將其Text屬性修改為"問候！"，可以看到按鈕上的文本隨之變為"問候！"，如圖4所示。從介面右下地區的屬性欄中可以看到該控制項的預設名稱為Button1。

圖4：在視圖區添加"問候！"按鈕

　　這樣HelloWebMatrix程式的可視化編輯就完成了，然後開始編輯代碼。

　　 雙擊視圖區中的"問候！"按鈕，可以看到整頁模式區由Design視圖轉到了Code視圖，WebMatrix自動為按鈕Button1的Click事件建立了一個函數--void Button1_Click(object sender, EventArgs e)，函數體尚無內容。在函數體中添入一行代碼：

"Button1.Text = "Hello WebMatrix!"

　　整個開發過程就完成了，如圖5所示。

圖5：為按鈕Click事件添加處理代碼

　　點擊工具條上的運行按鈕運行程式，可以看到WebMatrix彈出一個對話方塊，詢問是採用IIS還是內建的Web Matrix Server來運行程式，如果機器上沒有安裝IIS，可以選擇其預設的Web Matrix Server，在連接埠號碼中輸入一個本機閒置連接埠號碼，比如8000，點擊Start按鈕即開始運行，如圖6所示。

圖6：選擇ASP.NET應用程式的運行伺服器

　　運行過程中首先啟動了Web Matrix Server（可以看到Windows系統托盤區出現了一個表徵圖），然後從彈出瀏覽器視窗中可以看到運行結果--頁面上出現一個"問候"按鈕，點擊該按鈕後按鈕上的文本變為"Hello WebMatrix！"，如圖7所示。

圖7：HelloWebMatrix程式運行效果

　　開發資料庫訪問程式

　　動態網頁開發中最常見的恐怕就是開發資料庫訪問程式。WebMatrix為開發ASP.NET資料庫訪問程式提供了很好的支援。觀察一下WebMatrix主介面右上地區的工作區管理欄（Workspace），會發現在Workspace標籤頁的旁邊還有一個Data標籤頁，這裡還提供了一個資料欄（Data） ，點擊Data標籤頁就進入了資料視窗（Data），如圖8所示。

圖8：資料視窗

　　開發資料庫訪問程式首先要建立資料庫連接，點擊資料視窗中的添加資料庫連接按鈕，可以看到添加新資料庫連接項目視窗，如圖9所示。


圖9：添加資料庫連接

　　WebMatrix可以支援Access資料庫，也可以支援SQL Server/MSDE資料庫/案頭引擎，如果是後者的話，可以得到更好的支援，在這裡為簡便起見，可以選擇Access Database，點擊OK，從彈出的對話方塊中選擇一個Access資料庫，比如Access內建的Sample資料庫：家庭成員地址資料庫檔案ADDRBOOK.MDB，點擊OK後可以看到WebMatrix已經在資料視窗中建好了一個資料庫連接，從中可以看到資料庫中的資料表，如圖10所示。


圖10：一個建立好的資料連線

　　建好了資料庫連接後，剩下來的事情就簡單了，建立一個ASP.NET程式檔案DataBaseAccess.aspx，然後在資料視窗中選擇一個資料表（比如"家庭成員"表）拖放到頁面設計檢視上，可以看到頁面上自動建立了一個MxDataGrid控制項和一個AccessDataSourceControl控制項，並自動完成了資料集的關聯，如圖11所示。


圖11：拖放一個資料表到頁面設計檢視區後的效果

　　此時已經完成了一個具有基本的資料顯示功能的資料庫訪問程式的開發。點擊運行按鈕運行程式，可以看到頁面的顯示效果－－頁面上顯示出一張有關家庭成員資訊的資料表，可以看到這個資料表還進行了自動分頁顯示處理，在表格的最後一行是資料分頁顯示的頁碼連結，用滑鼠點擊表格的表頭各列，表中資料可以自動按照該列排序顯示，這樣的資料表已經可以滿足一般的頁面資料顯示需要，而此時你甚至還沒有編寫一行代碼。


圖12：DataBaseAccess程式運行效果

　　作為一個資料庫訪問程式，僅僅有資料顯示功能當然是不夠的，還需要加上一些基本的增、刪、改等互動功能，下面我們為DataBaseAccess程式加入資料查詢功能。

　　回到頁面設計檢視，從工具箱中將WebControls欄中的TextBox和Button拖放到頁面設計檢視上，將Button的"Text"屬性設為"查詢"，再將一個DataGrid控制項拖放到下一行，如圖13所示。可以看到這幾個控制項的名字被預設設定為TextBox1、DataGrid1、Button1。


圖13：添加查詢文字框和按鈕

　　此時程式的頁面可視化設計就完成了，接下來實現一個按照使用者在文字框中輸入的成員姓氏查詢成員資訊的功能（刪除、修改功能可以以類似方式實現）。

　　在整頁模式區中點擊底部的Code標籤頁 ，整頁模式區轉到了Code視圖，可以看到WebMatrix介面左邊的工具箱中出現了代碼嚮導（Code Wizard）一欄，如圖14所示。


圖14：代碼嚮導欄

　　可以看到"代碼嚮導"提供了幾種基本的資料操作（比如SELECT、INSERT、DELETE、UPDATE等）代碼嚮導，雙擊其中的"SELECT Data Method"，可以看到螢幕彈出一個查詢代碼添加嚮導對話方塊，如圖15。


圖15：查詢代碼添加嚮導對話方塊

　　依照該嚮導順序操作，

　　1） 選擇要進行查詢操作的資料庫（ADDRBOOK.MDB），如圖15；

　　2） 選擇要在查詢結果中顯示的資料項目（成員編號、名字、姓氏、角色等），如圖16；


圖16：選擇要在查詢結果中顯示的資料項目

　　3） 點擊WHERE按鈕，選擇要查詢的資料項目和查詢條件（姓氏），如圖17；


圖17：選擇要查詢的資料項目和查詢條件

　　4） 完成設定後點擊Next按鈕進入查詢測試對話方塊，點擊Test Query按鈕進行查詢測試，輸入編號"趙"，可以看到姓趙的成員資訊被顯示出來，這說明測試成功，如圖18；


圖18：測試查詢結果

　　5） 最後設定產生的查詢方法的名稱（預設為MyQueryMethod）和傳回型別（預設為DataSet），如圖19；


圖19：設定產生的查詢方法名稱和傳回型別

　　6） 完成設定後回到Code視圖，可以看到WebMatrix自動產生的MyQueryMethod方法原始碼，如圖20。


圖20：產生的查詢方法原始碼

　　接下來是最後一步，把查詢按鈕的點擊事件與查詢方法關聯起來。

　　點擊整頁模式區底部的Design標籤頁 回到Design視圖，雙擊前面添加到頁面上的"查詢"按鈕，可以看到整頁模式區由Design視圖轉到了Code視圖，WebMatrix自動為"查詢"按鈕的Click事件建立了一個函數--void Button1_Click(object sender, EventArgs e)，函數體尚無內容。在函數體中添入兩行代碼：




DataGrid1.DataSource = MyQueryMethod( TextBox1.Text );
DataGrid1.DataBind();

　　整個開發過程就完成了，如圖21所示。


圖21：為查詢按鈕的點擊事件添加關聯代碼

　　點擊工具條上的運行按鈕運行程式，可以看到運行效果，頁面出現了文字框和查詢按鈕，在文字框中輸入"趙"，點擊"查詢"按鈕後，資料表中所有姓"趙"的成員的資訊被查出並顯示在了頁面上，如圖22。


圖22：程式按姓氏進行條件查詢的運行效果

　　如果覺得頁面中DataGrid的顯示效果難看的話，可以很方便進行調整修飾。

　　回到WebMatrix中的程式頁面設計檢視視窗，點擊頁面上的控制項DataGrid1，可以看到WebMatrix右下地區的屬性設定區中出現了對DataGrid的各種屬性設定項，最簡便的修飾外觀的方法是點擊該地區下部的"Auto Format…"連結，從彈出的自動格式設定對話方塊中選擇一種喜歡的外觀樣式就可以了，如圖23所示。


圖23：DataGrid的外觀設定

　　再次運行，可以看到介面顯示效果已經自動進行了修飾，如圖24所示。


圖24：加入修飾效果後的資料查詢程式頁面運行效果

　　結束語

　　至此，相信你已經領會到了WebMatrix的強大功能了，回過頭來想一想，真有點不敢相信這個東西居然只有2.8M。

　　WebMatrix在ASP.NET程式碼處理上與VS.NET的不同之處在於WebMatrix將程式的邏輯處理代碼與頁面靜態代碼放在一個檔案中，而不像VS.NET那樣做到了資料與顯示的分離。因此，在程式員與網頁美工的配合上會麻煩一點，但對於開發中小型系統來說，這並不是很大問題。

　　總而言之，WebMatrix是一款小巧靈活、功能強大的基於Web的ASP.NET應用系統開發工具，雖然相對VS.NET來說它還是一個非常輕量級的開發工具，但其自身相當有特點，很多功能並不遜於VS.NET，對於中小型的系統開發來說它是一個不錯的選擇，而且最重要的是－－它是免費的。