實際操作實驗室：一個 ASP.NET：整合 ASP.NET Web Form、MVC 與 Web API

發行項
07/13/2023

ASP.NET 是一種架構，可使用 MVC、Web API 等特殊技術來建置網站、應用程式和服務。隨著擴充 ASP.NET 自建立以來已看到，而且表達需要整合這些技術，最近已努力處理 One ASP.NET。

Visual Studio 2013引進新的整合專案系統，可讓您建置應用程式，並在一個專案中使用所有 ASP.NET 技術。這項功能不需要在專案開始時挑選一項技術，並繼續使用，而是鼓勵在一個專案內使用多個 ASP.NET 架構。

所有範例程式碼和程式碼片段都包含在 Web Training Kit 中，可在取得 https://aka.ms/webcamps-training-kit 。

概觀

目標

在此實際操作實驗室中，您將瞭解如何：

根據 One ASP.NET 專案類型建立網站
在相同的專案中使用不同的ASP.NET架構，例如MVC和Web API
識別 ASP.NET 應用程式的主要元件
利用 ASP.NET Scaffolding 架構自動建立控制器和檢視，以根據您的模型類別執行 CRUD 作業
針對每個作業使用正確的工具，以機器和人類可讀取的格式公開相同的資訊集

必要條件

需要下列專案才能完成此實際操作實驗室：

Visual Studio Express 2013 網頁版或更新版本
Visual Studio 2013 Update 1

安裝程式

若要在此實際操作實驗室中執行練習，您必須先設定環境。

開啟 Windows 檔案總管並流覽至實驗室的 [來源資料 ] 資料夾。
以滑鼠右鍵按一下 Setup.cmd ，然後選取 [ 以系統管理員身分執行 ] 以啟動安裝程式，以設定您的環境並安裝此實驗室的 Visual Studio 程式碼片段。
如果顯示 [使用者帳戶控制] 對話方塊，請確認要繼續的動作。

注意

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

使用程式碼片段

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

注意

每個練習都會伴隨位於練習 [ 開始 ] 資料夾中的起始解決方案，讓您獨立遵循每個練習。請注意，在練習期間新增的程式碼片段會從這些起始解決方案中遺失，而且在您完成練習之前可能無法運作。在練習的原始程式碼內，您也會找到包含 Visual Studio 解決方案的 End 資料夾，其中包含完成對應練習中步驟所產生的程式碼。當您完成此實際操作實驗室時，如果您需要其他協助，可以使用這些解決方案作為指引。

Exercises

此實際操作實驗室包含下列練習：

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

完成此實驗室的估計時間： 60 分鐘

注意

當您第一次啟動 Visual Studio 時，必須選取其中一個預先定義的設定集合。每個預先定義的集合都設計成符合特定開發樣式，並決定視窗配置、編輯器行為、IntelliSense 程式碼片段和對話方塊選項。本實驗室中的程式描述使用一 般開發設定 集合時，在 Visual Studio 中完成指定工作所需的動作。如果您為開發環境選擇不同的設定集合，則應該考慮的步驟可能會有差異。

練習 1：建立新的Web Form專案

在此練習中，您將使用One ASP.NET整合專案體驗，在Visual Studio 2013中建立新的Web Form網站，這可讓您輕鬆地在相同的應用程式中整合Web Form、MVC 和 Web API 元件。接著，您將探索產生的解決方案並識別其元件，最後您會看到網站運作情形。

工作 1 – 使用一個 ASP.NET 體驗建立新網站

在此工作中，您將根據 One ASP.NET 專案類型，開始在 Visual Studio 中建立新的網站。 一個 ASP.NET 統一所有 ASP.NET 技術，並讓您選擇視需要混合和比對它們。接著，您將辨識應用程式內並存Web Form、MVC 和 Web API 的不同元件。

開啟Visual Studio Express 2013 for Web並選取 [檔案] |新增專案...以啟動新的解決方案。

建立新專案
在 [新增專案] 對話方塊中，選取 [Visual C#] 底下的 [ASP.NET Web 應用程式] |Web 索引標籤，並確定已選取 [.NET Framework 4.5]。將專案命名為 MyHybridSite，選擇 [位置] ，然後按一下 [ 確定]。

建立新的 ASP.NET Web 應用程式專案
在 [新增 ASP.NET 專案] 對話方塊中，選取Web Form範本，然後選取MVC和Web API選項。此外，請確定 [ 驗證 ] 選項已設定為 [個別使用者帳戶]。按一下 [確定] 繼續進行。

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

探索產生的解決方案
1. 帳戶： 此資料夾包含要註冊的 Web 表單頁面、登入和管理應用程式的使用者帳戶。當Web Form專案範本的組態期間選取[個別使用者帳戶] 驗證選項時，就會新增此資料夾。
2. 模型： 此資料夾將包含代表應用程式資料的類別。
3. 控制器和檢視：ASP.NET MVC和ASP.NET Web API元件需要這些資料夾。您將在下一個練習中探索 MVC 和 Web API 技術。
4. Default.aspx、Contact.aspx和About.aspx檔案是預先定義的 Web Form 頁面，您可以做為起點來建置應用程式特定的頁面。這些檔案的程式設計邏輯位於稱為「程式碼後置」檔案的個別檔案中，該檔案具有「.aspx.vb」或「.aspx.cs」副檔名 (，視所使用的語言而定) 。程式碼後置邏輯會在伺服器上執行，並動態產生頁面的 HTML 輸出。
5. Site.Master和Site.Mobile.Master頁面會定義應用程式內所有頁面的外觀與風格和標準行為。
按兩下 Default.aspx 檔案以探索頁面的內容。

探索 Default.aspx 頁面

注意

檔案頂端的Page指示詞會定義Web Form頁面的屬性。例如， 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 Form頁。若要這樣做，請將 /contact.aspx 附加至網址列中的 URL，然後按 Enter。

易記的 URL

注意

如您所見，URL 會變更為 /contact。從ASP.NET 4開始，URL 路由功能已新增至 Web Form，因此您可以撰寫 URL，而不是 http://www.mysite.com/products/softwarehttp://www.mysite.com/products.aspx?category=software 。如需詳細資訊，請參閱 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 功能自動建立。

開啟Visual Studio Express 2013 for Web和位於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 控制器

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

在方案總管中，以滑鼠右鍵按一下MyHybridSite專案的Controllers資料夾，然後選取 [新增] |新增 Scaffolded Item...。

建立新的 Scaffolded 控制器
在 [ 新增 Scaffold ] 對話方塊中， 使用 Entity Framework 選取 [MVC 5 控制器與檢視]， 然後按一下 [ 新增]。

選取具有檢視和 Entity Framework 的 MVC 5 控制器
將 MvcPersonController 設定為 控制器名稱，選取 [ 使用非同步控制器動作 ] 選項，然後選取 [ Person (MyHybridSite.Models) 作為 Model 類別。

使用 Scaffolding 新增 MVC 控制器
在 [資料內容類別別] 下，按一下 [ 新增資料內容...]。

建立新的資料內容
在 [ 新增資料內容 ] 對話方塊中，將新的資料內容命名為 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 系結要求使用非同步動作方法，以避免在處理要求時封鎖網頁伺服器執行工作。

工作 3 – 執行解決方案

在這項工作中，您將再次執行解決方案，以確認 Person 的檢視如預期般運作。您將新增人員，以確認它已成功儲存至資料庫。

按 F5 執行方案。
流覽至 /MvcPerson。顯示人員清單的 Scaffold 檢視應該會出現。
按一下 [新建 ] 以新增人員。

流覽至 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 之類的電腦消費性格式公開人員資料。

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

注意

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

建立新的 Scaffold 控制器
在 [ 新增 Scaffold ] 對話方塊中，選取左窗格中的 [Web API ]，然後選取 [ Web API 2 控制器]，然後在中間窗格中使用 Entity Framework ，然後按一下 [ 新增]。

選取具有動作和 Entity Framework 的 Web API 2 控制器
將 ApiPersonController 設定為 控制器名稱，選取 [使用非同步控制器動作 ] 選項，然後分別選取 [ 人員 (MyHybridSite.Models ) 和 PersonCoNtext (MyHybridSite.Models) 作為模型和資料內容類別。然後按一下 [ 新增]。

使用 Scaffolding 新增 Web API 控制器
Visual Studio 接著會使用四個 CRUD 動作來產生 ApiPersonController 類別，以處理您的資料。

，

使用 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 – 執行解決方案

在此工作中，您將使用 Internet 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 擷取人員資料

注意

下載完成後，系統會提示您使用下載的檔案採取動作。讓對話方塊保持開啟狀態，以便透過 [開發人員工具] 視窗watch回應內容。
現在，您將檢查回應的本文。若要這樣做，請按一下 [ 詳細資料] 索引 標籤，然後按一下 [ 回應本文]。您可以檢查下載的資料是否為物件清單，其中包含對應至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

概觀

目標

必要條件

安裝程式

使用程式碼片段

Exercises

練習 1：建立新的Web Form專案

工作 1 – 使用一個 ASP.NET 體驗建立新網站

工作 2 – 執行解決方案

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

工作 1 – 建立新模型

工作 2 – 建立 MVC 控制器

工作 3 – 執行解決方案

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

工作 1 – 建立 Web API 控制器

工作 2 – 執行解決方案

工作 3 – 新增 Web API 說明頁面

總結

意見反應

意見反應

其他資源