摘要:「WebMatrix」簡介
[原文發表位置]：Introducing WebMatrix
[原文發表時間]：2010/7/6, 12:39 PM
上個星期我發佈了幾篇關於我們正要發佈的一些關於Web開發新技術的部落格：
- IIS開發者體驗版: 這是一個輕量級的免費Web伺服器，安裝簡便，支援目前所有Windows版本，並且與IIS 7.5伺服器完全相容。
- SQL Server精簡版: 一款基於文件的輕量級免費資料庫，安裝簡便，可以整合到ASP.NET應用程式中，支援低成本的宿主環境，並且可以使資料庫有選擇性地遷移到SQL Server。
- ASP.NET 「Razor」: 一種新的ASP.NET繪製引擎，為生成HTML優化，採用程式碼至上原則的模板語法，便於在HTML中嵌入VB或C#。其特點是語法簡單，學習和編寫都非常容易,可以在任何文字編輯器中使用。
上周的文章提到了怎樣在像Visual Studio 2010 和Visual Web Developer 2010 Express這樣專業的Web開發工具中充分利用這些技術，以及這些技術如何使得現有的ASP.NET Web表單和ASP.NET MVC有更好地開發工作流程。
現在我們也將發佈一個新的整合了以上技術的輕量級Web開發工具，它使得人們使用ASP.NET進行Web開發變得更加簡單。這是一個免費的工具，提供核心程式碼和資料庫支援，整合了一個開放原始碼的Web應用程式庫，並且便於將網站和應用程式部署到Web主機服務提供商的虛擬主機上。
我們把這個新工具叫做WebMatrix，它的第一個beta版本現在可以在這裡下載。
什麼是WebMatrix?
WebMatrix下載大小只有15MB（如果沒有安裝.NET4就是50MB）而且安裝快捷。
這15MB的下載包括一個輕量級的開發工具、 IIS Express、SQL Compact Edition、一組可以使用新的Razor語法編寫單獨ASP.NET頁面的ASP.NET擴充程式，以及一系列易用的執行常見Web任務的資料庫和HTML輔助程式。WebMatrix可以和Visual Studio 2010 以及 Visual Web Developer 2010 Express同時安裝在同一台機器上。
註：在WebMatrix這第一個beta版本，ASP.NET MVC應用程式的Razor支援沒有被包含進來—這個月遲些時候發佈的ASP.NET MVC預覽版會包括它，同時也包含Visual studio的工具支援。
WebMatrix入門
WebMatrix是一個任務導向的工具，為簡化Web開發入門而設計。它盡量減少人們為了完成簡單的事情而必需學習的知識量，並且包含和整合了快速構建Web網站所需要的元件。
當執行WebMatrix時，啟動頁面如下圖所示。右邊的三個圖示用來建立新的Web網站：可以使用Web應用程式庫現有的開放原始碼應用程式，或用包含一些預設頁面的網站模板，再者使用磁碟上的空資料夾。
譯註：中文版尚未發佈，暫用英文版截圖
繁體中文版：http://www.microsoft.com/downloads/zh-tw/details.aspx?familyid=5b9510a1-bc42-4323-90ab-adf4daaaa2f0&displaylang=zh-tw
根據Web庫裡現有的開放原始碼應用程式建立網站
我們來建立一個新的Web網站。使用Web庫並且充分利用別人已經做好的工作，而不是完全由自己來寫整個網站。
我們從單擊WebMatrix主視窗上的「Site from Web Gallery」 連結開始，這樣會啟動如下圖的用戶介面 –瀏覽Web庫裡流行的開放原始碼應用程式，我們可以很容易地從這些程式開始，作一些微調和個人化，然後使用WebMatrix進行部署。Web庫包含的程式有ASP.NET也有PHP應用程式。
我們可以根據類別（Blog[i], CMS, eCommerce …）過濾，或者簡單地使用捲軸瀏覽整個列表。我們先建立一個部落格網站吧，以流行的開放原始碼專案BlogEngine.NET為基礎開始編寫。
當我們選擇 BlogEngine.NET 並且點擊「Next」, WebMatrix 會找出(並提供下載) BlogEngine.NET執行所需要在本地開發機上安裝的元件。
IIS Express 已經包含在WebMatrix裡面了，因此我已經有了一個Web伺服器（並且不用做任何事情來配置它）。 SQL Compact Edition 也包含在WebMatrix裡面， 因此也有了一個輕量級的資料庫（並且不用做任何事情來配置它）。因為SQL Compact 是全新的，Web庫裡的大多數專案都還不支援它，我們期望將來大部分專案也會把它做為一個可選項。如果一個專案需要SQL Express或者MySQL 作為資料庫，但是你還沒有安裝的話，它們就會顯示在依賴項列表中，WebMatrix將為你提供自動下載、安裝和配置。
Web庫裡的 PHP應用程式(像 WordPress, Drupal, Joomla 和SugarCRM – 所有這些) 會下載並安裝PHP 和MySQL.
因為我機器上已經安裝了SQL Express, 所以在我的下載列表裡只有一項BlogEngine.NET:
點擊 「I Accept」 按鈕後， WebMatrix 會下載所有我們需要的東西並安裝到機器上：
點擊 「OK」 按鈕後， WebMatrix 會打開新的BlogEngine.NET 專案並顯示一個網站概貌頁面：
WebMatrix的這個視圖提供了專案的概況，以及一些常見任務的快速連結 (等下我們會看到更多) 。
要開始的話，點擊上方Ribbon工具欄上的 「Run」 按鈕。點擊 「Run」按鈕會使用系統的預設瀏覽器啟動網站， 或者，你也可以點擊展開列表選擇任一個已安裝的瀏覽器來執行你的網站。點擊 「Open in All Browsers」 選項會一次啟動多個瀏覽器：
因為IIS Express是WebMatrix的一部分，打開專案時，WebMatrix會自動配置IIS Express 來執行它 （沒有多餘的步驟或配置工作）。
執行 BlogEngine.NET 會啟動一個瀏覽器並載入應用程式的預設頁面（如下所示）。 BlogEngine.NET 預設有一個主頁，上面有如何個性化網站的一些指導：
如果你讀一下內容，你會發現它說明了預設的管理員密碼是 admin/admin，登錄網站、個性化網站的觀感和內容的方法。我們來登錄，使用線上管理工具來個性化一些網站的基本組態（名字、作者介紹，等等），並發佈兩篇日誌來啟動網站：
美妙之處就是我不需要寫任何程式碼（也不用看任何程式碼）就能在短時間內建立我們的網站並執行起來。用Web庫裡的其它所有應用程式時也會有一樣的體驗。它們都被設計成這樣，讓你能夠透過WebMatrix來快速安裝，在本地執行，然後使用他們內建的管理工具微調以及個性化它們的核心內容和結構。
進一步個性化程式碼和內容
我們已經配置了部落格網站的基本組態，現在來看如何進一步個性化。要做這個，讓我們先回到WebMatrix並點擊工具導航欄左邊的 「Files」 節點：
這樣會在左邊打開一個文件系統資源管理器視圖，允許我們瀏覽網站，並且打開/編輯/添加/刪除文件。
Web庫裡的大部分應用程式支援 「主題」這個概念，使開發者能夠微調和個性化應用程式的佈局、式樣和用戶介面。上圖中，我已經展開BlogEngine.NET的「主題」資料夾並打開了Site.Master文件來個性化「標準」主題的主要佈局。我們可以對它進行微調和個性化，保存，再次執行網站查看我們所做的改變。（注意：F12是重新執行程式的快捷鍵）。
部署網站到掛載主機 (Hosting)
WebMatrix提供了一個輕量級的整合工作環境，允許在本地執行和微調網站。在完成個性化操作後，也添加了一些預設內容到資料庫裡，我們想要把它發佈到一個主機提供商上，這樣其他人才能訪問我們的部落格。
WebMatrix內建了發佈支援，使得部署Web網站和Web應用程式到遠端主機相當簡便。WebMatrix支援使用FTP和FTP/SSL以及微軟Web部署（也就是 MSDeploy）技術方便將網站部署到低成本共享主機提供商以及虛擬專用主機提供商。
要在 WebMatrix裡發佈一個網站, 只要展開Ribbon工具欄上的 「Publish」 圖示：
選擇 「Configure」 選項，它會打開下面的用戶介面，允許我們配置網站要部署的位置：
如果你還沒有一個主機提供商，你可以點擊發佈對話框上方的 「find web hosting」連結打開一個可用的主機提供商列表來選擇：
主機提供商現在提供的Windows托管計劃包括ASP.NET+SQL Server，便宜到只要3.5美元每月 (並且這些便宜的套餐還包括對ASP.NET 4、ASP.NET MVC 2、Web 部署、URL覆寫以及其他特性的支援).
這個星期的 「find web hosting」包括一些專為WebMatrix提供免費賬號的主機提供商，可以讓你免費試用。 （他們也在伺服端把WebMatrix的所有元件安裝好，並使用WebMatrix的部署工具測試他們的套餐）。
一旦你註冊了一個主機提供商，你就能從眾多的方法中任選一個發佈你的網站。
FTP 和FTP/SSL便於你發佈網站的本地文件到遠端伺服器上。
「Web Deploy」 選項可以發佈網站文件和資料庫內容—如果你的宿主支援它，這是部署的推薦選項。當選擇了「Web Deploy」選項，如果需要部署資料庫，WebMatrix會列出你專案裡所有的本地資料庫，並提供一個選項來讓你指定遠端主機上
所需要的資料庫連接字串。
注意: 預設情況下 BlogEngine.NET使用XML文件存儲內容和組態（不需要資料庫），Web庫裡的BlogEngine.NET 你僅僅需要輸入 "Data Source=empty;database=empty;uid=empty;pwd=empty" 作為遠端資料庫連接字串就不需要建立資料庫來發佈網站。
當點擊「Publish」， WebMatrix 會顯示一個部署時所作變動的預覽介面：
注:因為 BlogEngine.NET 不需要資料庫，我們要保持資料庫部署復選框為未選中狀態。如果我們的確要上傳一個資料庫我們可以在發佈預覽頁面上選擇它，這樣WebMatrix會自動上傳網站文件和資料庫架構+資料到遠端主機。部署資料庫到主機伺服器上。然後更新你發佈的web.config連接字串指向產品所在的地方。
一旦點擊 「Continue」， WebMatrix就會啟動網站的發佈行程，結束後我們的網站在網際網路上就可以存取了，不需要多餘的步驟。
更新網站
除初步的部署外，WebMatrix還支援後續發佈的增量文件更新。更新本地文件，再點擊 "Publish" 按鈕，WebMatrix會計算本地網站和發佈網站間的不同之處，只上傳更新過的文件（注意預設情況下資料庫不會被重新部署以避免覆寫遠端主機上的資料）：
點擊上圖的 「Continue」 按鈕只會上傳修改過的文件。這使得即使更新大網站也會很快速簡便。
使用程式碼建立一個個性化的Web網站
我已經講了用Web庫裡的開放原始碼應用程式建立一個新的Web網站。現在來看使用WebMatrix開發一個個性化網站還能做點什麼。
WebMatrix主頁上最右邊的兩個圖示提供了建立新網站的簡便的方法—或者基於簡單的模板頁面，或者是沒有內容的空網站：
我們點擊「Site From Template」 圖示來建立一個以模板為基礎的新網站。然後選擇 「Empty Site」模板並把我們要建立的網站命名為 「FirstSite」:
點擊 「Ok」按鈕後， WebMatrix會為我們載入一個網站，並顯示一個包含常見任務連結的網站概覽頁面：
我們點擊左邊導航欄上的 「Files」圖示或者中間概況屏上的「Browse your Files」連結。隨便選擇哪一項都會顯示文件資源管理器。 「Empty Site」 模板實際上預設有一個叫做Index.cshtml的文件。 我們可以雙擊它以在WebMatrix文字編輯器中打開它。
以 .cshtml 或 .vbhtml 為後綴的文件是一些使用在上周部落格提到新的 「Razor」 模板語法的文件。 你可以使用Razor文件作為基於ASP.NET MVC的應用程式的視圖文件，或者作為ASP.NET Web網站的單獨的頁面。 我們把這些頁面簡單地叫做 「ASP.NET Web 頁面」 – 你可以添加它們到新的專案中，也可以選擇性地加到已經存在的ASP.NET Web表單和 ASP.NET MVC應用程式中。
為什麼用 ASP.NET 網頁?
使用Razor編寫ASP.NET網頁提供了一種簡單，淺顯的方法來開發網站。很多人可能會爭辯說，作為一個基於ASP.NET Web表單或ASP.NET MVC的應用程式，它們並不強大，也沒有很多功能。的確，他們沒有很多的功能，也沒有豐富的程式設計模型。
但它的概念易於理解，上手容易，而且對很多人來說，提供了最簡單的方式來理解.NET、VB或C＃開發的基礎知識，學習程式設計。當你需要的僅僅是一些基本的服務端腳本和資料顯示和操作的話，而且想要快速建立一個網站時，它也很方便。
建立我們第一個簡單的 ASP.NET 網頁
讓我們建一個簡單的頁面，該網頁用來列出存儲在資料庫中的內容。
如果你是一個做了幾年.NET開發的專業程式設計師， 看完下面的步驟很可能會想□□這種場景太基礎了—建立一個「真正的」應用程式僅僅瞭解這些步驟是遠遠不夠的。為什麼不說一些封裝業務邏輯，資料訪問層，ORMs等等？好吧，如果你正在建立一個重要的商業應用程式，並且希望在未來的幾年內都易於維護，你的確應該考慮以上那些技術。
想像一下，如果你正在嘗試教你的朋友或者孩子
建立他們第一個簡單的應用程式，而他們剛剛接觸程式設計，變數，if語句，迴圈以及陳舊的HTML對於他們來說都是要努力去掌握的東西，類和對象是他們聽都沒有聽過的概念。幫助他們在這種情況下更快的建立和執行應用程式（不需要他們去掌握很多的新概念和步驟），將使得他們更容易成功—進而引導他們想要學習更多的知識。
我們正在努力用WebMatrix幫助被前面那些步驟嚇倒，掙扎著想要開始學習的初學者，最後會成為一個高級的VS/.NET開發者。
我們先從添加一些HTML到我們的頁面開始。ASP.NET網頁通常以HTML文件開始。本範例我們只添加一個靜態的列表到頁面中：
跟之前的場景一樣，為執行我們正在編輯的專案，IIS Express已經自動配置好了—-我們不需要配置網站伺服器或者安裝任何東西來執行我們的網站。
可以按「F12」或者從Ribbon工具欄上的「執行」按鈕來在瀏覽器中啟動。正如所期望的，這將為我們的電影列表生成一個簡單的靜態頁面：
處理資料
到目前為止都是相當基本的東西。讓我們現在使用資料庫轉來轉換此頁，並且讓電影列表動態呈現而不是靜態呈現。
建立一個資料庫
我們首先點擊WebMatrix左側導航欄中的「資料庫」選項卡。這將彈出一個簡單的資料庫編輯器：
SQL Server精簡版附帶在WebMatrix裡面—在專案裡面一直都可用。因為它可以嵌入在一個應用程式內部，所以容易複製並且應用在遠端主機環境（不需要額外的部署或安裝步驟—只需要透過FTP或者網路部署來發佈資料庫文件就可以了）。
註：除了支援SQL CE，以下的WebMatrix資料庫工具同樣適用於SQL Express，SQL Server以及MySQL。
我們可以透過點擊「Add a Database to your site」連結（或者點擊螢幕中間再或者點擊Ribbon上方的的「New Database」 圖示）來建立一個新的SQL CE資料庫。這將在我們應用程式的App_Data目錄中添加一個「FirstSite.sdf」資料庫文件。
然後我們可以點Ribbon上的「「New Table」圖示建立一個新表來存儲我們的電影資料。然後使用Ribbon裡的「New Column」按鈕添加三列—-ID，姓名和年齡。
註：在第一個Beta版中，必須使用在螢幕底部的屬性網格編輯器來配置列—更豐富的資料庫編輯功能將會出現在下一個Beta版中。
我們透過組態「Is Primary Key」屬性為true，把ID設為主鍵。
然後點擊「Save」並將表命名為「Movies」。做完後，它就會顯示在左手邊的表節點下面。
再點擊Ribbon的「Data」圖示，編輯剛建立的表中的資料，並且添幾行資料進去。
現在我們擁有一個資料庫、一張表、以及一些電影資料。
在ASP.NET網頁裡使用我們的資料庫
ASP.NET 網頁可以使用任何.NET API或者VB/C#語言功能。這就意味著你可以在任何網站或應用程式中使用完整的.NET功能。WebMatrix還包括一些額外的.NET庫和輔助程式，便於你完成一些常見任務。
其中有個輔助函數是簡單的資料庫API，可以允許你對資料庫編寫SQL程式碼。讓我們在網頁上用它查詢Movies資料表，並顯示所有包含在內的電影。要做這件事情，回到WebMatrix的Files選項卡，並且將以下程式碼添加到Index.cshtml文件中。
正如你看到的那樣—頁面的概念相當簡單（並且不需要理解任何深奧的物件導向的概念）。我們在文件的最頂上有兩行程式碼。
第一行程式碼打開資料庫。Database.Open()首先查看在web.config文件中是否有一個名為「FirstSite」的連接字串—如果有，連接並使用這個資料庫（註：目前我們沒有任何web.config文件）。另外，它在\App_Data資料夾中搜尋一個名為「FirstSite.mdf」的SQL Express資料庫或者一個名為「FirstSite.sdf」的SQL Compact資料庫。如果找到兩者之一
，就會打開這個文件。第二行的程式碼執行對資料庫的查詢和載入所有的電影。Database.Query()傳回一個動態列表—列表中每個動態對象都根據SQL查詢條件傳回。
然後，我們在<ul>元素中進行一個foreach迴圈，它可以簡單的遍歷電影列表，並將每個影片名稱輸出為<li>元素。因為movies是一個動態對象的集合，我們可以寫@movie.Name而不必寫movies["Name"].
當我們重新執行這個頁面（或者在瀏覽器中刷新），查看傳回到客戶端的HTML程式碼，我們可以看到以下內容：
以上的影片列表是從我們的資料庫中提出來的，並且是動態的。
添加一個簡單的過濾器
最後一個我們可以使應用程式更有活力的步驟是，根據頁面參數（Query String）傳送進來的字串參數，添加簡單的支援來篩選Movie列表。
我們可以透過在Index.cshtml文件中增加一些程式碼來實現這個功能：
以上我們添加了一行程式碼從Request對像中來獲取「year」這個頁面參數。採用WebMatrix新提供的一個 「Aslnt()」擴充輔助函數。這個函數要麼傳回一個整數值，要麼傳回空值。然後，我們引入一個WHERE參數作為變數來修改我們的SELECT查詢語句。這種語法，可以確保我們避免SQL注入攻擊。
最後，我們在<h1>內增加一個If語句，如果一個年份過濾器被指定了，它可以追加一條信息（post 1975）到<h1>。現在要是我們再次執行這個頁面，預設情況下，我們可以看到所有的影片：
同時，我們可以透過使用一個「year」頁面參數，來僅僅顯示這年之後的影片。
其他有用的網頁輔助函數
在前面簡單的影片列表範例中，我使用了WebMatrix附帶的資料庫輔助函數庫。
WebMatrix還附帶其他有用的Web輔助函數。我們不僅僅在ASP.NET網頁中支援這些函數—在ASP.NET MVC 和ASP.NET Web 表單應用程式中也支援。例如，要在應用程式中嵌入一個線上推特（Twitter）搜尋面板，你可以編寫以下的程式碼來搜尋微博（Tweets）：
這將顯示一個關於」scottgu」的推特微博列表。
其他內建的輔助函數，包括整合 Facebook 和 Google Analytics 的函數，建立和整合驗證碼（Captcha）和全球通用圖像（Gravatars）的函數，執行伺服端的動態圖表（使用新的內建於ASP.NET 4的圖表功能）等等。
所有這些輔助函數不僅可以在ASP.NET網頁中使用，而且也可以在ASP.NET Web表單和ASP.NET MVC程式中應用。
部署簡單
一旦我們完成網站的個性化，我們就可以部署它，就可以像部署BlogEngine.NET一樣部署它。所有我們需要做的就是點擊WebMatrix中的 "Publish" 按鈕，選擇一個主機供應商，這樣我們簡單的應用程式就發佈到網際網路上了。
在Visual Studio中打開
用WebMatrix建立的專案也可以在Visual Studio 2010和Visual Web Developer 2010中打開（免費的），這些工具都為網頁開發提供了一個更加豐富的功能，並且工作環境更側重於專業開發。WebMatrix專案可以透過點擊Ribbon工具欄右上角的「Visual Studio「圖示來在Visual Studio中打開。
這將啟動VS2010或Visual Web Developer 2010 Express，打開並編輯當前WexMatrix中的網站。將來，我們會發佈VS 2010/VWD 2010的一個補丁，使它們支援IIS Express, SQL CE和新的Razor語法。
進一步的學習
點擊這裡 來學習更多關於WebMatrix的知識。一個早期的WebMatrix Beta版本可以在這裡下載。
你可以訪問www.asp.net 網站觀看關於WebMatr
ix的線上教程和影片。 今天的測試版是這項技術的第一次預演，今後的幾周內會陸續改進檔案和範例程式，當然我們也會根據您的回饋進行完善它的功能。
總結
IIS Express, SQL CE 以及新的ASP.NET 「Razor」語法給使用Visual Studio，ASP.NET Web表單和 ASP.NET MVC的開發人員帶來很多的功能改進.
我們認為WebMatrix將能夠利用這些技術的優勢，簡化Web開發工作，這對於非專業開發領域上非常有用—並讓更多的開發人員能夠學習並將ASP.NET來應用在更廣泛的領域。
希望這能對您有所幫助。
附：[除了寫部落格以外，我現在也使用推特（Twitter）來及時更新狀態和分享連結，您可以到這個位址「推」我一下：twitter.com/scottgu]
標籤: ASP.NET, .NET, Community News