作者： 埃里克·雷坦
本教學系列將教你如何使用 ASP.NET 4.5 和 Microsoft Visual Studio Express 2013 for Web 建置 ASP.NET Web 表單應用程式的基礎。 本教學系列附有一個 包含 C# 原始碼 的 Visual Studio 2013 專案可供參考。
在這個教學中，你將在 Visual Studio 中建立、檢視並執行預設專案，讓你熟悉 ASP.NET 的功能。 另外，你會檢視 Visual Studio 的環境。
您將學到什麼：
- 如何建立新的 Web 表單專案。
- Web Forms 專案的檔案結構。
- 如何在 Visual Studio 中執行專案。
- 預設網頁表單應用程式的不同功能。
- 關於如何使用 Visual Studio 環境的一些基本知識。
創建專案
開啟 Visual Studio。
在 Visual Studio 的檔案選單中選擇新專案。
選取左側的 [範本 -> Visual C# ->Web 範本] 群組。
選擇 中央數據行中的 ASP.NET Web 應用程式 範本。
本教學系列使用 .NET Framework 4.5.2。將你的專案命名 為 WingtipToys ，並選擇 確定 按鈕。
備註
這個教學系列中的專案名稱是 WingtipToys。 建議你使用 確實的 專案名稱，這樣教學系列中提供的程式碼才能如預期運作。
點擊 「變更認證 」按鈕。 選擇個人使用者帳號並點擊確定按鈕。
選擇 網頁表單 範本並點擊 確定 按鈕。
這個專案需要一些時間來完成。 準備好後，打開 Default.aspx 頁。
你可以在中央視窗底部選擇一個選項，在 設計 檢視和 原始資料 檢視之間切換。 設計 檢視顯示 ASP.NET 網頁、母版頁、內容頁、HTML 頁面及使用者控制項，採用近乎所見即所得的視圖。 原始碼 檢視會顯示你網頁的 HTML 標記，你可以編輯。
小提示
理解 ASP.NET 框架
ASP.NET Web Forms 允許你使用熟悉的拖放事件驅動模型來建立動態網站。 設計介面及數以百計的控制項和元件可讓您迅速建置精緻、功能強大且具備資料存取權限的 UI 驅動網站。 Wingtip 玩具店基於 ASP.NET 網路表單，但你在這個教學系列中學到的許多概念都適用於所有 ASP.NET。
ASP.NET 提供四種主要的發展框架：
-
ASP.NET Web Forms
Web Forms 框架的目標開發者偏好宣告式及控制式程式設計，例如 Microsoft Windows Forms（WinForms）及 WPF/XAML/Silverlight。 它提供由設計者驅動的所見即所得開發模式，因此在尋求快速應用程式開發（RAD）網頁開發環境的開發者中非常受歡迎。 如果你是網頁程式新手，熟悉傳統的 Microsoft RAD 用戶端開發工具（例如 Visual Basic 和 Visual C#），即使沒有 HTML 和 JavaScript 經驗，也能快速建立網頁應用程式。 -
ASP.NET MVC
ASP.NET MVC 針對對測試驅動開發、關注點分離、控制反轉（IoC）及依賴注入（DI）等模式與原則感興趣的開發者。 此框架鼓勵將網頁應用的商業邏輯層與其呈現層分離。 -
ASP.NET 網頁
ASP.NET Web Pages 的目標是想要簡單網頁開發故事的開發者，類似 PHP。 在網頁模型中，你先建立 HTML 頁面，然後在頁面上加入伺服器端程式碼，以動態控制標記的呈現方式。 網頁本身就是設計成輕量級框架，對於懂 HTML 但程式經驗不多的人來說，是進入 ASP.NET 最簡單的入口——例如學生或業餘愛好者。 這也是熟悉 PHP 或類似框架的網頁開發者開始使用 ASP.NET 的好方法。 -
ASP.NET 單頁應用程式
ASP.NET 單頁應用程式 (SPA) 可協助您使用 HTML 5、CSS 3 和 JavaScript 建立包含重要用戶端互動的應用程式。 ASP.NET 與網頁工具 2012.2 更新釋出一個新範本，用於使用 knockout.js 和 ASP.NET Web API 建立單頁應用程式。 除了新的 SPA 範本外，社群創建的新 SPA 範本也可供下載。
除了四個主要開發框架外，ASP.NET 還提供一些重要且需熟悉但未在本教學系列中涵蓋的技術：
- ASP.NET Web API - 一個用於建立能覆蓋廣泛客戶端（包括瀏覽器與行動裝置）的 HTTP 服務框架。
- ASP.NET SignalR - 一個讓即時網頁功能的開發變得輕鬆的函式庫。
專案檢討
在 Visual Studio 中，解決方案 總管 視窗可以管理專案的檔案。 讓我們看看有哪些資料夾已新增到你的應用程式中的 解決方案總管。 網頁應用程式範本新增了基本的資料夾結構：
Visual Studio 會為你的專案建立一些初始資料夾和檔案。 你接下來會處理的第一個檔案如下：
| File | Purpose |
|---|---|
| Default.aspx | 通常是應用程式在瀏覽器中執行時顯示的第一頁。 |
| Site.Master | 一個讓你能建立一致版面配置，並使用應用程式中頁面標準行為的頁面。 |
| Global.asax | 一個可選檔案，包含回應由 ASP.NET 或 HTTP 模組所引發的應用程式層級及會話層級事件的程式碼。 |
| Web.config | 應用程式的設定資料。 |
執行預設網頁應用程式
預設的網頁應用程式基於內建功能與支援，提供豐富的體驗。 只要不修改預設的 Web 表單專案，應用程式即可在您本地的網頁瀏覽器上運行。
在 Visual Studio 裡按 F5 鍵。
應用程式會在你的網頁瀏覽器中建立並顯示。
完成執行中的應用程式檢視後，關閉瀏覽器視窗。
這個預設網頁應用程式有三個主要頁面： Default.aspx （首頁）、 About.aspx 和 Contact.aspx。 這些頁面皆可從頂端導航欄進入。 帳戶資料夾中還有兩個額外頁面，分別是Register.aspx頁和Login.aspx頁。 這兩個頁面讓你能利用 ASP.NET 的會員功能來建立、儲存及驗證使用者憑證。
ASP.NET 網頁表單背景
ASP.NET 網頁表單是基於Microsoft ASP.NET 技術的頁面，伺服器上執行的程式碼會動態產生網頁輸出到瀏覽器或用戶端裝置。 ASP.NET 網頁表單頁面會自動呈現正確的瀏覽器相容 HTML，以符合樣式、版面配置等功能。 網頁表單相容於 .NET 通用語言執行環境所支援的任何語言，例如 Microsoft Visual Basic 和 Microsoft Visual C#。 此外，網頁表單是基於 Microsoft .NET 框架打造，該框架提供如受管理環境、型別安全與繼承等優勢。
當 ASP.NET 網頁表單頁面執行時，該頁面會經歷一個生命週期，執行一系列處理步驟。 這些步驟包括初始化、控制項實例化、還原與維護狀態、執行事件處理程式，以及渲染。 隨著你越來越熟悉 ASP.NET 網頁表單的強大功能，了解 ASP.NET 頁面生命週期 變得非常重要，這樣你才能在適當的生命週期階段撰寫符合你期望效果的程式碼。
當網頁伺服器收到頁面請求時，會找到該頁面、處理、傳送到瀏覽器，然後丟棄所有頁面資訊。 若使用者再次請求同一頁面，伺服器會重複整個序列，從頭重新處理該頁面。 換句話說，伺服器不會記憶它已處理的頁面，因為頁面是無狀態的。 ASP.NET 頁面框架自動處理維護頁面狀態及其控制項的任務，並提供明確的方法來維護應用程式特定資訊的狀態。
小提示
網頁表單應用程式範本中的網頁應用程式功能
ASP.NET 網頁表單應用程式範本提供了豐富的內建功能。 它不僅提供您Home.aspx頁面、About.aspx頁面、Contact.aspx頁面，還包含註冊用戶並儲存其認證的成員資格功能，讓他們能夠登入您的網站。 本概述提供更多關於 ASP.NET 網頁表單應用程式範本中部分功能，以及這些功能在 Wingtip Toys 應用程式中的應用方式。
成員資格
ASP.NET Identity 會將使用者的憑證儲存在應用程式建立的資料庫中。 當使用者登入時，應用程式會透過讀取資料庫來驗證他們的憑證。 你的專案 帳戶資料夾包含 了實作會員身份各個部分的檔案：註冊、登入、更改密碼以及授權存取。 此外，ASP.NET Web Forms 支援 OAuth 與 OpenID。 這些認證增強功能允許用戶使用現有帳號登入網站，如 Facebook、Twitter、Windows Live 和 Google 等帳號。
預設，範本會使用預設資料庫名稱，在 SQL Server Express LocalDB 的實例中建立成員資料庫，這個實例是隨 Visual Studio Express 2013 for Web 附帶的開發資料庫伺服器。
SQL Server Express LocalDB
SQL Server Express LocalDB 是 SQL Server 的輕量版本，具備許多 SQL Server 資料庫的可程式化功能。 SQL Server Express LocalDB 以使用者模式運行，安裝速度快速且無需設定，並有簡短的安裝前置條件清單。 在 SQL Server Microsoft，任何資料庫或 Transact-SQL 程式碼都可以從 SQL Server Express LocalDB 遷移到 SQL Server 和 SQL Azure，無需升級步驟。 因此，SQL Server Express LocalDB 可作為針對所有版本 SQL Server 應用程式的開發環境使用。 SQL Server Express LocalDB 啟用了儲存程序、使用者自訂函式與聚合、.NET Framework 整合、空間型別等 SQL Server Compact 無法提供的功能。
主版頁面
ASP.NET 母版頁面定義了應用程式中所有頁面一致的外觀與行為。 母版頁的版面會與單一內容頁的內容合併，產生使用者所看到的最終頁面。 在 Wingtip Toys 應用程式中，您可以修改 Site.master 主頁，使網站中所有頁面共用相同的獨特標誌與導覽欄。
HTML5
ASP.NET Web Forms Application 範本支援 HTML5，這是 HTML 標記語言的最新版本。 HTML5 支援新增元素與功能，使網站建立更簡單。
現代化
對於不支援 HTML5 的瀏覽器，你可以使用 Modernizr。 Modernizr 是一個開源的 JavaScript 函式庫，能偵測瀏覽器是否支援 HTML5 功能，若不支援則啟用。 在 ASP.NET Web Forms Application 範本中，Modernizr 以 NuGet 套件形式安裝。
Bootstrap
Visual Studio 2013 專案範本使用 Bootstrap，這是 Twitter 建立的版面配置和主題架構。 Bootstrap 使用 CSS3 提供回應式設計，這表示版面配置可以根據不同的瀏覽器視窗大小動態調整。 您也可以使用 Bootstrap 的主題功能，輕鬆更改應用程式的外觀和風格。 根據預設，Visual Studio 2013 中的 ASP.NET Web 應用程式範本會以 NuGet 套件的形式包含 Bootstrap。
NuGet 套件
ASP.NET 網頁表單應用程式範本包含一組 NuGet 套件。 這些套件以開源函式庫與工具的形式提供元件化功能。 有各式各樣的套件可以幫助你建立和測試應用程式。 Visual Studio 讓你輕鬆新增、移除和更新 NuGet 套件。 開發者也可以為 NuGet 建立並新增套件。
當你安裝套件時，NuGet 會將檔案複製到你的解決方案，並自動進行必要的修改，例如新增參考資料和更改與你的網頁應用程式相關的設定。 如果你決定移除函式庫，NuGet 會移除檔案並還原它在專案中所做的修改，讓專案不會有任何雜亂。 NuGet 可從 Visual Studio 的工具選單 中取得。
jQuery
jQuery 是一個快速且簡潔的 JavaScript 函式庫，簡化了 HTML 文件遍歷、事件處理、動畫製作及 Ajax 互動，促進快速網頁開發。 jQuery JavaScript 函式庫作為 NuGet 套件包含在 ASP.NET Web Forms Application 範本中。
不顯眼的驗證
內建的驗證器控制項已設定為使用不干擾性的 JavaScript 來執行用戶端驗證邏輯。 這大幅減少了頁面標記中內嵌渲染的 JavaScript 數量，並縮小了整體頁面大小。 根據應用程式根目錄的 Web.config 檔案中 <appSettings> 元素的設定，全域性新增非干擾性驗證於預設的 ASP.NET Web Forms 應用程式範本中。
實體框架程式碼優先
除了 ASP.NET Web Forms Application 範本的功能外，Wingtip Toys 應用程式使用 Entity Framework Code First，這是一個 NuGet 函式庫，能在處理資料時實現以程式碼為中心的開發。 簡單來說，它會根據你寫的程式碼，幫你建立應用程式中的資料庫部分。 使用 Entity Framework 時，你可以將資料擷取並作為強型別物件進行操作。 這讓你能專注於應用程式中的商業邏輯，而非資料如何存取的細節。
欲了解 ASP.NET Web Forms 範本所包含的已安裝函式庫與套件的更多資訊，請參閱已安裝的 NuGet 套件清單。 為此，請在 Visual Studio 建立一個新的 Web 表單專案，選擇工具>NuGet 套件管理器>管理解決方案中的 NuGet 套件，然後在管理 NuGet 套件的對話框中選擇已安裝套件。
探索 Visual Studio
Visual Studio 的主要視窗包括 解決方案總管、 伺服器總管 （Express 中的資料庫總管 ）、 屬性視窗、 工具箱、 工具列和 文件視窗。
欲了解更多 Visual Studio 資訊，請參閱視覺 網頁開發者視覺指南。
總結
在這個教學中，你已經建立了、審查並執行了預設的 Web Forms 應用程式。 你已經檢視過預設 Web 表單應用程式的各種功能，並學會了如何使用 Visual Studio 環境的一些基礎知識。 在接下來的教學中，你將建立資料存取層。