實習實驗室：一個 ASP.NET：整合 ASP.NET Web Form、MVC 和 Web API

發行項
09/27/2024

ASP.NET 是一個使用 MVC、Web API 等專業技術建立網站、應用程式和服務的架構。隨著 ASP.NET 自建立以來的不斷擴展以及對整合這些技術的明確需求，最近人們正在努力實現 One ASP.NET。

Visual Studio 2013 引入了一個新的統一專案系統，讓您可以在一個專案中建構應用程式並使用所有 ASP.NET 技術。這個功能讓您不需要在專案一開始時就選定一種技術並一直使用下去，而是鼓勵在一個專案中使用多個 ASP.NET 架構。

所有範例程式碼和片段都包含在 Web Camps 培訓套件中，其可從 https://aka.ms/webcamps-training-kit 獲得。

概觀

目標

在這個實作教室中，您將了解如何：

建立基於 One ASP.NET 專案類型的網站
在同一專案中使用不同的 ASP.NET 架構，例如 MVC 和 Web API
識別 ASP.NET 應用程式的主要元件
利用 ASP.NET Scaffolding 架構自動建立控制器和檢視，以根據模型類別執行 CRUD 作業
依據各個工作使用適合的工具，以機器可讀和人類可讀格式公開同一組資訊。

必要條件

完成此實作教室需要滿足以下條件：

Visual Studio Express 2013 Web 版或更高版本
Visual Studio 2013 Update 1

設定

為了執行這個實作教室中的練習，您需要先設定您的環境。

開啟 Windows 檔案總管並瀏覽到實作教室的 Source 資料夾。
右鍵點擊 Setup.cmd，然後選擇「以管理員身份執行」以啟動安裝程序，該程序將設定您的環境並安裝本實驗的 Visual Studio 程式碼片段。
如果顯示「使用者帳戶控制」對話方塊，請確認動作以繼續。

注意

在執行安裝程式之前，請確保您已檢查此實驗的所有相依性。

使用程式碼片段

在整個實作教室文件中，系統將指示您插入程式碼區塊。為了方便起見，大部分程式碼都以 Visual Studio 程式碼片段的形式提供，您可以從 Visual Studio 2013 中存取它們，以避免手動新增。

注意

每個練習都附有起始解決方案，其位於 Begin 資料夾中，使您可以獨立進行各個練習。請注意，這些起始解決方案中缺少練習期間新增的程式碼片段，並且在您完成練習之前可能無法使用。在練習的原始程式碼中，您還會找到一個 End 資料夾，其中包含 Visual Studio 解決方案以及完成對應練習中的步驟所產生的程式碼。如果在進行這個實作教室時需要額外幫助，您可以使用這些解決方案作為指導。

練習

這個實作教室包括以下練習：

建立新的 Web Forms 專案
使用 Scaffolding 建立 MVC 控制器
使用 Scaffolding 建立 Web API 控制器

完成這個實作教室的預估時間：60 分鐘

注意

第一次啟動 Visual Studio 時，必須選擇其中一個預先定義的設定集合。每個預定義集合旨在匹配特定的開發風格，並決定視窗版面配置、編輯器行為、IntelliSense 程式碼片段和對話方塊選項。本實作教室中的程序描述了在使用一般開發設定集合時，在 Visual Studio 中完成特定任務所需的動作。如果您為開發環境選擇不同的設定集合，則可能需要考慮步驟中的差異。

練習 1：建立一個新的 Web Forms 專案

在這個練習中，您將使用 One ASP.NET 統一專案體驗，在 Visual Studio 2013 中建立一個新的 Web Forms 網站，這可讓您在同一應用程式中輕鬆整合 Web Forms、MVC 和 Web API 元件。然後，您將探索生成的解決方案並識別其組成部分，最後您將看到網站的運作效果。

任務 1 – 使用 One ASP.NET 體驗建立一個新網站

在這個任務中，您將開始在 Visual Studio 中建立一個基於 One ASP.NET 專案類型的新網站。 一個 ASP.NET 即統一所有 ASP.NET 技術，並讓您可以根據需要自由混合和搭配這些技術。然後，您將認識到 Web Forms、MVC 和 Web API 的不同元件如何在您的應用程式中並存。

打開 Web 版 Visual Studio Express 2013，然後選擇「檔案 | 新專案...」以開始一個新解決方案。

建立新專案
在「新專案」對話方塊中，選擇 Visual C# | Web 標籤下的 ASP.NET Web 應用程式，並確保選擇了 .NET Framework 4.5。將專案命名為 MyHybridSite，選擇位置，然後按一下「確定」。

建立新的 ASP.NET Web 應用程式專案
在「新 ASP.NET 專案」對話方塊中，選擇 Web Forms 範本，並選擇 MVC 和 Web API 選項。同時，確保驗證選項設定為「個人使用者帳戶」。按一下 [確定] 繼續進行。

使用 Web Forms 範本建立新專案，包括 Web API 和 MVC 元件
您現在可以探索生成解決方案的結構。

探索生成的解決方案
1. Account：該資料夾包含註冊、登入和管理應用程式使用者帳戶的 Web Form 頁面。在設定 Web Forms 項目範本時選擇「個人使用者帳戶」驗證選項時，將會新增此資料夾。
2. Models：該資料夾將包含代表您應用程式資料的類別。
3. 控制器和檢視：這些資料夾是 ASP.NET MVC 和 ASP.NET Web API 元件的必備項目。您將在接下來的練習中探索 MVC 和 Web API 技術。
4. Default.aspx、Contact.aspx 和 About.aspx 檔案是預先定義的 Web Form 頁面，您可以將它們用作建立特定於您應用程式頁面的起點。這些文件的程式邏輯位於一個稱為「code-behind」的獨立檔案中，該文件的副檔名為「.aspx.vb」或「.aspx.cs」 (取決於使用的語言)。程式碼後置邏輯在伺服器上執行，並動態生成頁面的 HTML 輸出。
5. Site.Master 和 Site.Mobile.Master 頁面定義應用程式中所有頁面的外觀和標準行為。
雙擊 Default.aspx 檔案以瀏覽該頁面的內容。

探索 Default.aspx 頁面

注意

文件頂部的 Page 指令定義了 Web Forms 頁面的屬性。例如，MasterPageFile 屬性指定主版頁面的路徑 (在本例中為 Site.Master 頁面)，而 Inherits 屬性定義頁面要繼承的程式碼後置類別。此類別位於由 CodeBehind 屬性決定的檔案中。

asp:Content 控制項保存頁面的實際內容 (文字、標記和控制項)，並對應到主版頁面上的 asp:ContentPlaceHolder 控制項。在此案例中，頁面內容將在 Site.Master 頁面中定義的 MainContent 控制項內呈現。
展開 App_Start 資料夾，找到 WebApiConfig.cs 檔案。 Visual Studio 會將檔案包含在生成的解決方案中，因為您在使用 One ASP.NET 範本設定專案時包含了 Web API。

開啟 WebApiConfig.cs 檔案。在 WebApiConfig 類別中，您將找到與 Web API 關聯的設定，它將 HTTP 路由對應到 Web API 控制器。

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
}

開啟 RouteConfig.cs 檔案。在 RegisterRoutes 方法中，您將找到與 MVC 相關的設定，該設定會將 HTTP 路由對應到 MVC 控制器。

public static void RegisterRoutes(RouteCollection routes)
{
    var settings = new FriendlyUrlSettings();
    settings.AutoRedirectMode = RedirectMode.Permanent;
    routes.EnableFriendlyUrls(settings);

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { action = "Index", id = UrlParameter.Optional }
        );
}

任務 2 – 執行解決方案

在這個任務中，您將執行生成的解決方案，探索應用程式及其一些功能，例如 URL 重寫和內建驗證。

若要執行解決方案，請按 F5 鍵，或點擊工具列上的「開始」按鈕。應用程式的首頁會在瀏覽器中打開。
確認 Web Forms 頁面是否被叫用。為此，請在地址列的 URL 後面附加 /contact.aspx 並按 Enter 鍵。

易記 URL

注意

如您所見，URL 會變更為 /contact。從 ASP.NET 4 開始，Web Forms 增加了 URL 路由功能，因此您可以寫出類似 http://www.mysite.com/products/software 而不是 http://www.mysite.com/products.aspx?category=software 的 URL。如需詳細資訊，請參閱 URL 路線規劃。
現在您將探索整合到應用程式中的驗證流程。為此，請按一下頁面右上角的註冊。

註冊新的使用者
在註冊頁面中，輸入使用者名稱和密碼，然後按一下「註冊」。

註冊頁面
應用程式註冊新帳戶，並對使用者進行驗證。

使用者已通過驗證
返回 Visual Studio 並按 SHIFT + F5 停止偵錯。

練習 2：使用 Scaffolding 建立 MVC 控制器

在本練習中，您將利用 Visual Studio 提供的 ASP.NET Scaffolding 架構來建立具有操作和 Razor 檢視的 ASP.NET MVC 5 控制器來執行 CRUD 操作，而無需編寫任何程式碼。 Scaffolding 程序將使用 Entity Framework Code First 在 SQL 資料庫中產生資料上下文和資料庫架構。

關於 Entity Framework Code First

Entity Framework (EF) 是一種物件關聯對應工具 (ORM)，可讓您透過使用概念應用程式模型進行程式設計來建立資料存取應用程式，而不是直接使用關聯式儲存結構描述進行程式設計。

Entity Framework Code First 建模工作流程可讓您使用自己的網域類別來表示 EF 在執行查詢、變更追蹤和更新功能時所依賴的模型。使用 Code First 開發工作流程，您無需透過建立資料庫或指定結構描述來開始應用程式。相反，您可以編寫標準 .NET 類別來定義最適合您應用程式的領域模型物件，然後 Entity Framework 會為您建立資料庫。

注意

您可以在這裡了解有關 Entity Framework 的更多資訊。

任務 1 – 建立新模型

現在，您將定義一個 Person 類別，它將是 Scaffolding 程序用來建立 MVC 控制器和檢視的模型。您將先建立一個 Person 模型類別，控制器中的 CRUD 動作將使用 Scaffolding 功能自動建立。

開啟 Web 版 Visual Studio Express 2013 和位於 Source/Ex2-MvcScaffolding/Begin 資料夾中的 MyHybridSite.sln 解決方案。或者，您可以繼續使用上一個練習中獲得的解決方案。
在「方案總管」中，以滑鼠右鍵按一下 MyHybridSite 專案的Models 資料夾，然後選擇「新增 | 類別」。

新增 Person 模型類別
在「新增項目」對話方塊中，將檔案命名為 Person.cs，並按一下「新增」。

建立 Person 模型類別

將 Person.cs 檔案的內容替換為以下程式碼。按 CTRL + S 儲存變更。

(程式碼片段 - BringingTogetherOneAspNet - Ex2 - PersonClass)

namespace MyHybridSite.Models
{
    public class Person
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }
    }
}

在「方案總管」中，以右鍵按一下 MyHybridSite 專案，然後選擇「建置」，或按 CTRL + SHIFT + B 建置該專案。

任務 2 – 建立 MVC 控制器

現在已經建立了 Person 模型，您將使用 ASP.NET MVC Scaffolding 和 Entity Framework 來為 Person 建立 CRUD 控制器動作和檢視。

在「方案總管」中，以滑鼠右鍵按一下 MyHybridSite 專案的 Controllers 資料夾，然後選擇「新增 | 新的 Scaffolded 項目....」

建立新的 Scaffolded 控制器
在「新增 Scaffold」對話方塊中，選擇「MVC 5 控制器 (包含檢視)，使用 Entity Framework」，然後按一下「新增」。

選擇 MVC 5 控制器 (包含檢視) 和 Entity Framework
將控制器名稱設為 MvcPersonController，選擇「使用非同步控制器動作」選項，然後模型類別選擇「Person (MyHybridSite.Models)」。

新增 MVC 控制器並使用 Scaffolding
在資料上下文類別下，按一下「新資料上下文...」。

建立新的資料上下文
在「新的資料上下文」對話方塊中，將新資料上下文命名為 PersonContext，然後按一下「新增」。

建立新的 PersonContext 類型
按一下「新增」以使用 Scaffolding 建立 Person 的新控制器。然後，Visual Studio 將產生控制器動作、Person 資料上下文和 Razor 檢視。

使用 Scaffolding 建立 MVC 控制器之後

開啟 Controllers 資料夾中的 MvcPersonController.cs 檔案。請注意，CRUD 動作方法已自動產生。

...

// POST: /MvcPerson/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for 
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([Bind(Include="Id,Name,Age")] Person person)
{
     if (ModelState.IsValid)
     {
          db.People.Add(person);
          await db.SaveChangesAsync();
          return RedirectToAction("Index");
     }

     return View(person);
}

// GET: /MvcPerson/Edit/5
public async Task<ActionResult> Edit(int? id)
{
     if (id == null)
     {
          return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
     }
     Person person = await db.People.FindAsync(id);
     if (person == null)
     {
          return HttpNotFound();
     }
     return View(person);
}

...

注意

透過在前面的步驟中從 Scaffolding 選項中選擇「使用非同步控制器動作」核取方塊，Visual Studio 會為所有涉及存取 Person 資料上下文的動作產生非同步動作方法。建議您對長時間執行、非 CPU 密集型要求使用非同步動作方法，以避免在處理要求時阻止 Web 伺服器執行其他工作。

任務 3 – 執行解決方案

在此任務中，您將再次執行解決方案以驗證 Person 的檢視是否如預期般運作。您將新增一個新人員，以確認其是否已成功儲存到資料庫中。

按 F5 執行解決方案。
瀏覽到 /MvcPerson。應該會顯示一個包含人員清單的 scaffolded 檢視。
按一下「建立新項目」以新增人員。

導覽至 scaffolded MVC 檢視
在「建立」檢視中，提供人員的姓名和年齡，然後按一下「建立」。

新增人員
新人員便會加入清單。在元素清單中，按一下「詳細資料」以顯示人員的詳細資料檢視。然後，在「詳細資料」檢視中，按一下「返回清單」以返回清單檢視。

人員的詳細資料檢視
按一下「刪除」連結可刪除該人員。在「刪除」檢視中，按一下「刪除」以確認作業。

刪除人員
返回 Visual Studio 並按 SHIFT + F5 停止偵錯。

練習 3：使用 Scaffolding 建立 Web API 控制器

Web API 架構是 ASP.NET Stack 的一部分，旨在簡化 HTTP 服務的實作，通常透過 RESTful API 傳送和接收 JSON 或 XML 格式的資料。

在本練習中，您將再次使用 ASP.NET Scaffolding 來產生 Web API 控制器。您將使用之前練習中的 Person 和 PersonContext 類別，以 JSON 格式傳回相同的個人資料。您將看到如何在同一個 ASP.NET 應用程式中以不同的方式公開相同的資源。

任務 1 – 建立 Web API 控制器

在此任務中，您將建立一個新的 Web API 控制器，它將以機器可使用的格式 (例如 JSON) 公開人員資料。

如果尚未打開，請開啟 Web 版 Visual Studio Express 2013，然後開啟位於 Source/Ex3-WebAPI/Begin 資料夾中的 MyHybridSite.sln 解決方案。或者，您可以繼續使用上一個練習中獲得的解決方案。

注意

如果您從練習 3 的「Begin」解決方案開始，請按 CTRL + SHIFT + B 來建置解決方案。
在「方案總管」中，以滑鼠右鍵按一下 MyHybridSite 專案的 Controllers 資料夾，然後選擇「新增 | 新的 Scaffolded 項目....」

建立新的 Scaffolded 控制器
在「新增 Scaffold」對話方塊中，在左側窗格中選擇「Web API」，然後在中間窗格中選擇「Web API 2 控制器 (包含動作)，使用 Entity Framework」，然後按一下「新增」。

選擇Web API 2 控制器 (包含動作) 和 Entity Framework
將控制器名稱設定為 ApiPersonController，選擇「使用非同步控制器動作」選項，然後模型類別選擇 Person (MyHybridSite.Models)，資料上下文類別選擇 PersonContext (MyHybridSite.Models)。然後按一下 [加入] 。

使用 Scaffolding 新增 Web API 控制器
然後，Visual Studio 將產生 ApiPersonController 類別，其中包含四個 CRUD 動作來處理您的資料。

使用 Scaffolding 建立 Web API 控制器之後
開啟 ApiPersonController.cs 檔案並檢查 GetPeople 動作方法。此方法查詢 PersonContext 類型的 db 欄位以取得人員資料。
```
// GET api/ApiPerson
public IQueryable<Person> GetPeople()
{
    return db.People;
}
```
現在請注意方法定義上方的註解。它提供公開此動作的 URI，您將在下一個任務中使用該動作。
```
// GET api/ApiPerson
public IQueryable<Person> GetPeople()
{
    return db.People;
}
```
注意

預設情況下，Web API 設定為擷取對 /api 路徑的查詢，以避免與 MVC 控制器發生衝突。如果需要變更此設定，請參閱「ASP.NET Web API 中的路由」。

任務 2 – 執行解決方案

在此任務中，您將使用網際網路Explorer F12 開發人員工具檢查來自 Web API 控制器的完整回應。您將了解如何擷取網路流量，以更深入地了解應用程式資料。

注意

確保在 Visual Studio 工具列上的「開始」按鈕中選擇了 Internet Explorer。

Internet Explorer 選項

F12 開發人員工具具有本實作教室中未涵蓋的廣泛功能。如果您想了解更多資訊，請參閱「使用 F12 開發者工具」。

按 F5 執行解決方案。

注意

為了正確執行此任務，您的應用程式需要有資料。如果您的資料庫是空的，您可以返回練習 2 中的任務 3，並按照有關如何使用 MVC 檢視建立新人員的步驟進行操作。
在瀏覽器中，按 F12 開啟「開發人員工具」面板。按 CTRL + 4 或按一下「網路」圖示，然後按一下綠色箭頭按鈕開始擷取網路流量。

啟動 Web API 網路擷取
將 api/ApiPerson 附加到瀏覽器網址列中的 URL。您現在將檢查 ApiPersonController 回應的詳細資訊。

透過 Web API 檢索人員資料

注意

下載完成後，系統會提示您對下載的檔案進行操作。保持對話方塊打開，以便能夠透過「開發人員工具」視窗觀看回應內容。
現在您將檢查回應的本文。為此，請按一下「詳細資料」索引標籤，然後按一下「回應本文」。您可以檢查下載的資料是否是具有與 Person 類別對應的屬性 Id、Name 和 Age 的物件清單。

查看 Web API 回應本文

任務 3 – 新增 Web API 說明頁面

在建立 Web API 時，建立說明頁面會很有用，以便其他開發人員知道如何呼叫您的 API。您可以手動建立和更新文件頁面，但最好自動產生它們，以避免進行維護工作。在此任務中，您將使用 Nuget 套件自動產生解決方案的 Web API 說明頁面。

從 Visual Studio 的「工具」功能表中，選擇「NuGet 套件管理員」，然後按一下「套件管理員主控台」。
在「套件管理員主控台」視窗中，執行下列命令：
```
Install-Package Microsoft.AspNet.WebApi.HelpPage
```
注意

Microsoft.AspNet.WebApi.HelpPage 套件安裝必要的組件，並為 Areas/HelpPage 資料夾下的說明頁面新增 MVC 檢視。

HelpPage 區域
預設情況下，說明頁面具有用於文件的預留位置字串。您可以使用 XML 文件註解來建立文件。若要啟用此功能，請開啟位於 Areas/HelpPage/App_Start 資料夾中的 HelpPageConfig.cs 檔案，並取消註解以下行：
```
config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));
```
在「方案總管」中，以滑鼠右鍵按一下專案 MyHybridSite，選擇「屬性」，然後按一下「建置」標籤。

建置索引標籤
在輸出下，選擇「XML 文件檔案」。在編輯方塊中，鍵入 App_Data/XmlDocument.xml。

「建置」索引標籤中的「輸出」區段
按 CTRL + S 儲存變更。
從 Controllers 資料夾中開啟 ApiPersonController.cs 檔案。
在 GetPeople 方法簽章和 // GET api/ApiPerson 註解之間輸入一個新行，然後鍵入三個正斜線。

注意

Visual Studio 會自動插入定義方法文件的 XML 元素。

新增摘要文字和 GetPeople 方法的回傳值。它應該如下所示。

// GET api/ApiPerson
/// <summary>
/// Documentation for 'GET' method
/// </summary>
/// <returns>Returns a list of people in the requested format</returns>
public IQueryable<Person> GetPeople()
{
    return db.People;
}

按 F5 執行解決方案。
將 /help 附加到網址列中的 URL，以瀏覽至說明頁面。

ASP.NET Web API 說明頁面

注意

該頁面的主要內容是一個 API 資料表，按控制器分組。資料表項目是使用 IApiExplorer 介面動態產生的。如果您新增或更新 API 控制器，則該表將在您下次建立應用程式時自動更新。

API 資料行列出了 HTTP 方法和相對 URI。描述資料行包含從方法文件中提取的資訊。
請注意，您在方法定義上方新增的說明會顯示在描述資料行中。

API 方法描述
按一下其中一種 API 方法可瀏覽至包含更詳細資訊的頁面，包括範例回應本文。

詳細資訊頁面

摘要

透過完成這個實作教室，您已經學會如何：

使用 Visual Studio 2013 中的 One ASP.NET Experience 建立新的 Web 應用程式
將多種 ASP.NET 技術整合到一個專案中
使用 ASP.NET Scaffolding 從模型類別產生 MVC 控制器和檢視
產生 Web API 控制器，該控制器使用非同步程式設計和透過 Entity Framework 進行資料存取等功能
自動為您的控制器產生 Web API 說明頁面

共用方式為

實習實驗室：一個 ASP.NET：整合 ASP.NET Web Form、MVC 和 Web API

概觀

目標

必要條件

設定

使用程式碼片段

練習

練習 1：建立一個新的 Web Forms 專案

任務 1 – 使用 One ASP.NET 體驗建立一個新網站

任務 2 – 執行解決方案

練習 2：使用 Scaffolding 建立 MVC 控制器

任務 1 – 建立新模型

任務 2 – 建立 MVC 控制器

任務 3 – 執行解決方案

練習 3：使用 Scaffolding 建立 Web API 控制器

任務 1 – 建立 Web API 控制器

任務 2 – 執行解決方案

任務 3 – 新增 Web API 說明頁面

摘要

意見反應

其他資源