練習 - 自訂專案

  • 12 分鐘

您的小組已分割披薩庫存管理應用程式的工作。 您的小組成員已為您建立 ASP.NET Core Web 應用程式，並已建置服務來讀取和寫入披薩資料至資料庫。 您已獲指派在 [披薩清單] 頁面上工作，其會顯示披薩清單，並可讓您將新的披薩新增至資料庫。 我們一開始會瀏覽專案，以了解其組織方式。

注意

本課程模組使用 .NET CLI (命令列介面) 和 Visual Studio Code 進行本機開發。 完成本課程模組後，您可以使用 Visual Studio (Windows) 應用這些概念或使用 Visual Studio Code (Windows、Linux 和 macOS) 來繼續開發。

取得專案檔

如果您使用 GitHub Codespaces，只要 在瀏覽器中開啟存放庫，選取 [程式碼]，然後在 main 分支上建立新的 codespace。

如果您未使用 GitHub Codespaces，請取得專案檔，並使用下列步驟在 Visual Studio Code 中開啟：

  1. 開啟命令殼層，並使用命令列從 GitHub 複製專案：

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. 瀏覽至 mslearn-create-razor-pages-aspnet-core 目錄，並在 Visual Studio Code 中開啟專案：

    cd mslearn-create-razor-pages-aspnet-core
code .

提示

如果您已安裝相容的容器執行階段，您可以使用開發容器擴充功能，在容器中開啟預先安裝工具的存放庫。

檢閱小組成員的工作

讓我們花點時間熟悉 ContosoPizza 資料夾中的現有程式碼。 專案是使用 dotnet new webapp 命令所建立的 ASP.NET Core Web 應用程式。 您小組成員所做的變更如下所述。

提示

不要花太多時間檢閱這些變更。 您的小組成員已完成建立資料庫和服務以讀取和寫入披薩至資料庫的工作，但不會進行任何 UI 變更。 您將在下一個單元中建置取用其服務的 UI。

  • Models 資料夾已新增至專案。
    • model 資料夾包含代表披薩的 Pizza 類別。
  • Data 資料夾已新增至專案。
    • 資料檔案夾包含代表資料庫內容的 PizzaContext 類別。 它繼承自 Entity Framework Core 中的 DbContext 類別。 Entity Framework Core 是一種物件關聯式對應程式 (ORM)，可讓您更輕鬆地使用資料庫。
  • Services 資料夾已新增至專案。
    • services 資料夾包含 PizzaService 類別，此類別會公開列入和新增披薩的方法。
    • PizzaService 類別會使用 PizzaContext 類別來將披薩讀取和寫入至資料庫。
    • 類別會在 Program.cs (第 10 行) 註冊相依性插入。

Entity Framework Core 也會產生一些事項：

  • 已產生 Migrations 資料夾。
    • migrations 資料夾包含用來建立資料庫結構描述的程式碼。
  • 產生 SQLite 資料庫檔案 ContosoPizza.db。
    • 如果您已安裝 SQLite 擴充功能 (或使用 GitHub Codespaces)，您可以用滑鼠右鍵按一下檔案並選取 [開啟資料庫] 來檢視資料庫。 資料庫結構描述會顯示在 [總管] 窗格的 [SQLite Explorer] 索引標籤中。

檢閱 Razor Pages 專案結構

專案中的所有其他專案在建立專案時不會變更。 下表描述 dotnet new webapp 命令所產生的專案結構。

名稱 描述
Pages/ 包含 Razor Pages 和支援檔案。 每個 Razor 頁面都有 .cshtml 檔案和 .cshtml.csPageModel 類別檔案。
wwwroot/ 包含靜態資產檔案，例如 HTML、JavaScript 和 CSS。
ContosoPizza.csproj 包含專案設定中繼資料，例如相依性。
Program.cs 做為應用程式的進入點，並設定應用程式行為，例如路由傳送。

其他值得注意的觀察：

  • Razor 頁面檔案及其成對的 PageModel 類別檔案

    Razor 頁面會儲存在 Pages 目錄中。 如上所述，每個 Razor 頁面都有 .cshtml 檔案和 .cshtml.csPageModel 類別檔案。 PageModel 類別允許分隔 Razor 頁面的邏輯和呈現、定義要求的頁面處理常式，以及封裝其 Razor 頁面範圍內的資料屬性和邏輯。

  • Pages 目錄結構和路由要求

    Razor Pages 會使用 Pages 目錄結構作為路由要求的慣例。 下表顯示 URL 如何對應至檔案名：

    URL 對應到 Razor 頁面
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Pages 目錄中的子資料夾可用來組織 Razor 頁面。 例如，如果有 Pages/Products 目錄，URL 會反映該結構：

    URL 對應到 Razor 頁面
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • 版面配置和其他共用檔案

    有數個檔案會跨多個頁面共用。 這些檔案會決定常見的版面配置元素和頁面匯入。 下表說明每個檔案的目的：

    檔案 說明
    _ViewImports.cshtml 匯入跨多個頁面使用的命名空間和類別。
    _ViewStart.cshtml 指定所有 Razor 頁面的預設配置。
    Pages/Shared/_Layout.cshtml 這是 _ViewStart.cshtml 檔案所指定的版面配置。 實作跨多個網頁的通用版面配置元素。
    Pages/Shared/_ValidationScriptsPartial.cshtml 提供所有頁面驗證功能。

第一次執行專案

讓我們執行專案，讓我們可以看到專案正運作中。

  1. 以滑鼠右鍵按一下 [總管] 中的 [ContosoPizza] 資料夾，然後選取 [在整合式終端機中開啟]。 這會在專案資料夾的內容中開啟終端機視窗。

  2. 在終端機視窗中，輸入下列命令：

    dotnet watch

    此命令：

    • 建置專案。
    • 啟動應用程式。
    • 監看檔案變更，並在偵測到變更時重新啟動應用程式。

  3. IDE 會提示您在瀏覽器中開啟應用程式。 選取 [Open in Browser] (在瀏覽器中開啟)。

    提示

    您也可以在終端機視窗中尋找 URL 來開啟應用程式。 按住 Ctrl 並按一下 URL，以在瀏覽器中開啟。

  4. 比較轉譯的首頁與 IDE 中的 Pages/Index.cshtml：

    • 觀察檔案中 HTML、Razor 語法和 C# 程式碼的組合。
      • Razor 語法是以 @ 字元表示。
      • C# 程式碼會以 @{ } 區塊括住。 記下檔案頂端的指示詞：
      • @page 指示詞會指定這個檔案是 Razor 頁面。
      • @model 指示詞會 (在此案例中) 指定頁面的模型類型，IndexModel此類型會在 Pages/Index.cshtml.cs 中定義。
    • 檢閱 C# 程式碼區塊。
      • 程式碼會將 ViewData 字典內 Title 項目的值設定為「首頁」。
      • ViewData 字典是用來在 Razor 頁面與 IndexModel 類別之間傳遞資料。
      • 在執行階段，Title 值是用來設定頁面的 <title> 元素。

讓應用程式在終端機視窗中保持執行。 我們將在即將推出的單元中使用。 也請讓瀏覽器索引標籤與執行中的 Contoso Pizza 應用程式保持一致。 您將變更應用程式，且瀏覽器將會自動重新整理以顯示變更。

自訂登陸頁面

讓我們對登陸頁面進行一些變更，使其與披薩應用程式更加相關。

  1. 在 Pages/Index.cshtml 中，以下列程式碼取代 C# 程式碼區塊中的程式碼：

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    上述 程式碼：

    • 將 ViewData 字典內的 Title 項目值設定為「披薩愛好者的首頁」。
    • 計算自業務開始後所經過的時間量。

  2. 修改 HTML，如下所示：

    • 使用下列程式碼來取代 <h1> 元素：

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • 使用下列程式碼來取代 <p> 元素：

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    上述 程式碼：

    • 將標題變更為「歡迎使用 Contoso Pizza」。
    • 顯示自業務開始後已經過的天數。
      • @ 字元是用來從 HTML 切換至 Razor 語法。
      • Convert.ToInt32 方法可用來將 timeInBusiness 變數的 TotalDays 屬性轉換為整數。
      • Convert 類別是 System 命名空間的一部分，由[ContosoPizza.csproj] 檔案中的 <ImplicitUsings> 元素自動匯入。

  3. 儲存檔案。 具有應用程式的瀏覽器索引標籤會自動重新整理以顯示變更。 如果使用的是 GitHub Codespaces，檔案會自動儲存，但您必須手動重新整理瀏覽器索引標籤。

重要

每 dotnet watch 次儲存檔案時，請密切注意終端機視窗。 有時候，您的程式碼可能包含稱為粗話編輯的內容。 這表示您變更的程式碼無法在不重新啟動應用程式的情況下重新編譯。 如果系統提示您重新啟動應用程式，請按 y (是) 或 a (一律)。 您可隨時在終端機視窗中按兩下 Ctrl+C 來停止應用程式，然後再次執行 dotnet watch 以重新啟動該應用程式。

您已對 Razor 頁面進行第一次變更！ 在下一個單元中，您會將新頁面新增至應用程式以顯示披薩清單。