共用方式為

建立專案

  • 發行項

作者 ：Erik Reitan

本教學課程系列將教導您使用 ASP.NET 4.5 和 Microsoft Visual Studio Express 2013 for Web 建置 ASP.NET Web Forms 應用程式的基本概念。 隨附本教學課程系列提供具有 C# 原始程式碼的 Visual Studio 2013 專案。

在本教學課程中，您將建立、檢閱和執行Visual Studio中的預設專案，讓您熟悉 ASP.NET 的功能。 此外，您將檢閱Visual Studio環境。

您將學到什麼：

  • 如何建立新的 Web Form 專案。
  • Web Form 項目的檔案結構。
  • 如何在Visual Studio中執行專案。
  • 預設 Web 表單應用程式的不同功能。
  • 有關如何使用 Visual Studio 環境的一些基本概念。

建立專案

  1. 開啟 Visual Studio。

  2. 從 Visual Studio 的 [檔案] 選單中選取 [新增專案]。

    建立專案 - 新增專案功能表項

  3. 選取左側的 [範本->Visual C# ->Web 範本] 群組。

  4. 選擇中間欄的 [ASP.NET Web 應用程式] 範本。
    本教學課程系列使用 .NET Framework 4.5.2。

  5. 將您的專案命名 為 WingtipToys， 然後選擇 [ 確定 ] 按鈕。

    建立專案 - 新增項目對話方塊

    注意

    本教學課程系列中的專案名稱為 WingtipToys。 建議您使用此 確切 的項目名稱，讓整個教學課程系列所提供的程式代碼如預期般運作。

  6. 按一下 [變更驗證] 按鈕。 選取 [個別使用者帳戶 ]，然後按兩下 [ 確定 ] 按鈕。

  7. 選取 Web Form 範本，然後按下 [確定] 按鈕。

    [新增 ASP.NET 專案] 視窗的螢幕快照，其中已選取 [Web Form] 範本和 [確定] 按鈕。

專案需要一些時間來建立。 準備好時，請開啟 [Default.aspx ] 頁面。

顯示 [Default.aspx] 頁面之 Web 視窗的 Microsoft Visual Studio Express 2013 螢幕快照。

您可以在 [設計 視圖] 和 [ 來源 ] 檢視之間切換，方法是選取中央視窗底部的選項。 設計 檢視會顯示 ASP.NET 網頁、主版頁面、內容頁面、HTML 頁面，以及使用接近WYSIWYG檢視的使用者控制件。 來源 檢視會顯示網頁的 HTML 標記，您可以加以編輯。

提示

瞭解 ASP.NET 架構

ASP.NET Web Forms 可讓您使用類似的拖放、事件導向模型來建置動態網站。 單一設計介面和數百個控制項和元件可讓您快速建置功能強大、可存取資料的 UI 導向網站。 Wingtip Toy Store 是以 ASP.NET Web Forms 為基礎，但您在本教學課程系列中學到的許多概念都適用於所有 ASP.NET。

ASP.NET 提供四個主要開發架構：

  • ASP.NET Web Forms \(英文\)
    Web Form 架構的目標是偏好宣告式和控件型程式設計的開發人員，例如 Microsoft Windows Forms (WinForms) 和 WPF/XAML/Silverlight。 它提供 WYSIWYG 設計工具驅動開發模型，因此它很適合開發人員尋找快速的應用程式開發 (RAD) 環境以進行 Web 開發。 如果您不熟悉 Web 程式設計，而且熟悉傳統的 Microsoft RAD 用戶端開發工具 (，例如 Visual Basic 和 Visual C#) ，您可以快速建置 Web 應用程式，而不需在 HTML 和 JavaScript 中體驗。
  • ASP.NET MVC
    ASP.NET MVC 的目標是對模式和原則有興趣的開發人員，例如測試驅動開發、考慮分離、控制 (IoC) 的反轉，以及相依性插入 (DI) 。 此架構鼓勵將 Web 應用程式的商業規則層與其呈現層分開。
  • ASP.NET Web Pages
    ASP.NET Web Pages 以想要簡單 Web 開發故事的開發人員為目標，以及 PHP 這幾行。 在網頁模型中，您會建立 HTML 頁面，然後將以伺服器為基礎的程式代碼新增至頁面，以動態控制該標記的轉譯方式。 網頁特別設計為輕量型架構，而且對於知道 HTML 但可能沒有廣泛程式設計經驗的人員而言，這是最簡單的進入點 ASP.NET，例如學生或興趣者。 對於知道 PHP 或類似架構的 Web 開發人員，開始使用 ASP.NET 也是很好的方法。
  • ASP.NET 單頁應用程式
    ASP.NET 單頁應用程式 (SPA) 可協助您建置包含使用 HTML 5、CSS 3 和 JavaScript 的重要用戶端互動的應用程式。 ASP.NET 和 Web 工具 2012.2 Update 提供新的範本，以使用 knockout.js 和 ASP.NET Web API 建置單頁應用程式。 除了新的 SPA 範本之外，也提供新的社群建立 SPA 範本以供下載。

除了四個主要的開發架構之外，ASP.NET 也提供其他技術，這些技術對於注意並熟悉很重要，但在本教學課程系列中並未涵蓋：

  • ASP.NET Web API - 建置可觸達各種用戶端的 HTTP 服務架構，包括瀏覽器和行動裝置。
  • ASP.NET SignalR - 可讓您輕鬆開發即時 Web 功能的連結庫。

檢閱專案

在 Visual Studio 中，[方案總管] 視窗可讓您管理項目的檔案。 讓我們看看已在 方案總管 中新增至應用程式的資料夾。 Web 應用程式樣本會新增基本資料夾結構：

建立專案 - 方案總管

Visual Studio 會為您的專案建立一些初始資料夾和檔案。 本教學課程稍後將使用的第一個檔案如下：

檔案 目的
Default.aspx 通常是在瀏覽器中執行應用程式時所顯示的第一頁。
Site.Master 頁面，可讓您建立一致的版面配置，並針對應用程式中的頁面使用標準行為。
Global.asax 選擇性檔案，其中包含回應 ASP.NET 或 HTTP 模組所引發之應用層級和會話層級事件的程序代碼。
Web.config 應用程式的組態數據。

執行預設 Web 應用程式

默認 Web 應用程式會根據內建功能和支援，提供豐富的體驗。 若未對預設 Web 窗體專案進行任何變更，應用程式即可在本機網頁瀏覽器中執行。

  1. 在 Visual Studio 中按下 F5 鍵。
    應用程式將會在網頁瀏覽器中建置並顯示。

    建立專案 - 預設頁面

  2. 完成檢閱執行中的應用程式之後，請關閉瀏覽器視窗。

此預設 Web 應用程式中有三個主要頁面： Default.aspx (Home) 、 About.aspx 和 Contact.aspx。 您可以從頂端導覽列連線到這些頁面。 [帳戶] 資料夾中也包含兩個額外的頁面：[Register.aspx] 頁面和 [Login.aspx] 頁面。 這兩個頁面可讓您使用 ASP.NET 的成員資格功能來建立、儲存及驗證用戶認證。

ASP.NET Web Forms 背景

ASP.NET Web Forms 是以 Microsoft ASP.NET 技術為基礎的頁面，其中在伺服器上執行的程式代碼會動態產生瀏覽器或用戶端裝置的網頁輸出。 ASP.NET Web Forms 頁面會自動針對樣式、版面配置等功能轉譯正確的瀏覽器相容 HTML。 Web Form 與 .NET Common Language Runtime 支援的任何語言相容，例如 Microsoft Visual Basic 和 Microsoft Visual C#。 此外，Web Form 建置在 Microsoft .NET Framework 上，可提供受控環境、類型安全性和繼承等優點。

當 ASP.NET Web Forms 頁面執行時，頁面會經歷其執行一系列處理步驟的生命週期。 這些步驟包括初始化、具現化控件、還原和維護狀態、執行事件處理程式程式代碼，以及轉譯。 當您更熟悉 ASP.NET Web Forms 的強大功能時，請務必瞭解 ASP.NET 頁面生命週期，以便在您想要的效果的適當生命週期階段撰寫程序代碼。

當網頁伺服器收到頁面的要求時，它會尋找頁面、處理頁面、將它傳送至瀏覽器，然後捨棄所有頁面資訊。 如果使用者再次要求相同的頁面，伺服器會重複整個順序，從頭重新處理頁面。 另一種方式是，伺服器沒有已處理頁面的記憶體是無狀態的。 ASP.NET 頁面架構會自動處理維護頁面狀態及其控件的工作，並提供您明確的方式來維護應用程式特定信息的狀態。

提示

Web Form 應用程式範本中的 Web 應用程式功能

ASP.NET Web Forms 應用程式範本提供一組豐富的內建功能。 它不僅提供 您Home.aspx 頁面、 About.aspx 頁面、 Contact.aspx 頁面，還包含註冊用戶並儲存其認證的成員資格功能，讓他們可以登入您的網站。 本概觀提供 ASP.NET Web Forms 應用程式範本中包含的一些功能，以及如何在 Wingtip Toys 應用程式中使用這些功能的詳細資訊。

成員資格

ASP.NET 身分識別會將使用者的認證儲存在應用程式所建立的資料庫中。 當使用者登入時，應用程式會讀取資料庫來驗證其認證。 專案的 Account 資料夾包含實作成員資格各種部分的檔案：註冊、登入、變更密碼，以及授權存取。 此外，ASP.NET Web Forms 支援 OAuth 和 OpenID。 這些驗證增強功能可讓使用者使用現有的認證登入您的網站，例如 Facebook、Twitter、Windows Live 和 Google。

建立專案 - 方案總管 (ASP.NET 身分識別)

根據預設，範本會在 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 會在使用者模式中執行，並具有快速、零設定的安裝，且具有簡短的安裝必要條件清單。 在 Microsoft SQL Server 中，任何資料庫或 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 主版頁面，讓 Wingtip Toys 網站中的所有頁面共用相同的特殊標誌和導覽列。

HTML5

ASP.NET Web Forms 應用程式範本支援 HTML5，這是最新版的 HTML 標記語言。 HTML5 支援新的元素和功能，可讓您更輕鬆地建立網站。

Modernizr

對於不支援 HTML5 的瀏覽器，您可以使用 Modernizr。 Modernizr 是開放原始碼 JavaScript 連結庫，可偵測瀏覽器是否支援 HTML5 功能，如果不支援，請加以啟用。 在 ASP.NET Web Forms 應用程式範本中，Modernizr 會安裝為 NuGet 套件。

拔靴複製法

Visual Studio 2013 項目範本會使用 Bootstrap、Twitter 所建立的版面配置和主題架構。 Bootstrap 會使用 CSS3 來提供響應式設計，這表示版面配置可以動態適應不同的瀏覽器視窗大小。 您也可以使用 Bootstrap 主題功能，輕鬆地影響應用程式外觀和操作的變更。 根據預設，Visual Studio 2013 中的 ASP.NET Web 應用程式範本包含 Bootstrap 作為 NuGet 套件。

NuGet 套件

ASP.NET Web Forms 應用程式範本包含一組 NuGet 套件。 這些套件會以 開放原始碼 連結庫和工具的形式提供元件化功能。 有各種不同的套件可協助您建立及測試應用程式。 Visual Studio 可讓您輕鬆地新增、移除和更新 NuGet 套件。 開發人員也可以建立套件並將其新增至 NuGet。

[管理 NuGet 套件] 視窗的螢幕快照，其中已醒目提示 jQuery。

當您安裝套件時，NuGet 會將檔案複製到您的方案，並自動進行所需的任何變更，例如新增參考，以及變更與 Web 應用程式相關聯的組態。 如果您決定移除連結庫，NuGet 會移除檔案，並反轉它在專案中所做的任何變更，如此就不會留下雜亂。 NuGet 可從 Visual Studio 的 [工具 ] 功能表取得。

jQuery

jQuery 是快速且簡潔的 JavaScript 連結庫，可簡化 HTML 檔周遊、事件處理、動畫和 Ajax 互動，以快速進行 Web 開發。 jQuery JavaScript 連結庫包含在 ASP.NET Web Forms 應用程式範本中作為 NuGet 套件。

不干擾驗證

內建驗證程式控件已設定為針對客戶端驗證邏輯使用不干擾的 JavaScript。 這可大幅減少內嵌在頁面標記中呈現的 JavaScript 數量，並減少整體頁面大小。 根據應用程式根目錄中 Web.config 檔案 appSettings> 元素中的<設定，將非干擾性驗證全域新增至 ASP.NET Web Forms 應用程式範本。

Entity Framework Code First

除了 ASP.NET Web Forms 應用程式範本中的功能之外，Wingtip Toys 應用程式還使用 Entity Framework Code First，這是 NuGet 連結庫，可讓您在處理數據時以程式代碼為中心的開發。 簡單地說，它會根據您撰寫的程式代碼為您建立應用程式的資料庫部分。 使用 Entity Framework，您可以擷取及操作數據做為強型別物件。 這可讓您專注於應用程式中的商業規則，而不是如何存取數據的詳細數據。

如需 ASP.NET Web Forms 範本隨附之已安裝連結庫和套件的其他資訊，請參閱已安裝的 NuGet 套件清單。 若要這樣做，請在 Visual Studio 中建立新的 Web Form 項目，選取 [工具>][NuGet 套件管理員>管理方案的 NuGet 套件]，然後在 [管理 NuGet 套件] 對話框中選取 [已安裝的套件]。

導覽 Visual Studio

Visual Studio 中的主要視窗包括 方案總管、[伺服器總管] (Express 中的 [資料庫總管]) 、[屬性視窗]、[工具箱]、[工具欄] 和 [文檔視窗]。

顯示 Visual Studio 中主要視窗的圖表。

如需 Visual Studio 的詳細資訊，請參閱 Visual Web 開發人員的 Visual 指南。

摘要

在本教學課程中，您已建立、檢閱並執行預設 Web Form 應用程式。 您已檢閱預設 Web 窗體應用程式的不同功能，並瞭解如何使用 Visual Studio 環境的基本概念。 在下列教學課程中，您將建立數據存取層。

其他資源

Web 應用程式專案和網站專案的比較
ASP.NET Web Forms 頁面概觀

上一個下一個