共用方式為

組建 Blazor 電影資料庫應用程式（第 1 部分 - 建立 Blazor Web App）

  • 發行項

本文是 Blazor 電影資料庫應用程式教學課程的第一個部分，教您建立具有管理電影資料庫功能的 ASP.NET Core Blazor Web App 基本概念。

本教學課程系列這部分涵蓋如何建立採用靜態伺服器端轉譯 (靜態 SSR) 的 Blazor Web App 。 靜態 SSR 表示內容會在伺服器上轉譯，並傳送至用戶端顯示，以回應個別要求。

必要條件

具有 ASP.NET 和 Web 開發工作負載的 Visual Studio (最新版本)

最新版本：

本教學課程用於 ASP.NET Core 開發的 Visual Studio Code (VS Code) 指示會使用 .NET CLI，這是 .NET SDK 的一部分。 .NET CLI 命令是在 VS Code 的整合式終端機中發出的，預設為 PowerShell 命令殼層。 從功能表列中的 [終端機] 功能表選取 [新增終端機]，即可開啟 [終端機]。

.NET SDK (最新版本)

.NET CLI 是 .NET Core SDK 的一部分。 若要發出影響專案的命令，請將命令殼層開啟至專案的根資料夾。

建立 Blazor Web App

在 Visual Studio 中：

  • 從 [開始] 視窗選取 [建立新專案] ，或從功能表欄選取 [檔案][新]>>[專案]。

  • 在 建立新專案 對話方塊中，從專案範本清單中選取 Blazor Web App 。 選取下一步按鈕。

  • 在 [設定新專案] 對話方塊中，在 [專案名稱] 欄位中，將專案命名為 BlazorWebAppMovies，包括符合大小寫。 使用此確切的專案名稱很重要，以確保命名空間符合您從教學課程複製到您要建置的應用程式的程式碼。

  • 請確認應用程式的 位置 適合。 設定 [將解決方案放在相同專案目錄] 核取方塊，以符合您慣用的解決方案檔案位置。 選取下一步按鈕。

  • 在 [其他資訊] 對話方塊使用下列設定：

    • Framework：選取 [.NET 7.0 (標準期間支援)]。
    • 驗證類型：無
    • 針對 HTTPS 進行設定：已選取
    • 互動式轉譯模式：伺服器
    • 互動位置：每頁/元件
    • 包含範例頁面：已選取
    • 不要使用最上層陳述式：未選取
    • 選取 建立。

  • 在 [其他資訊] 對話方塊使用下列設定：

    • Framework：選取選取 [.NET 8.0 (長期支援)]。
    • 驗證類型：無
    • 針對 HTTPS 進行設定：已選取
    • 互動式轉譯模式：伺服器
    • 互動位置：每頁/元件
    • 包含範例頁面：已選取
    • 不要使用最上層陳述式：未選取
    • 選取 建立。

本教學課程系列部分的 Visual Studio 指示會使用 EF Core 命令來新增資料庫移轉及更新資料庫。 EF Core 命令是使用 Visual Studio 連線服務發出。 本教學課程系列稍後會提供詳細資訊。

此教學課程假設您已熟悉 VS Code。 如果您不熟悉 VS Code，請參閱 VS Code 文件。 簡介影片頁面所列出的影片旨在提供 VS Code 的功能的概觀。

確認您已安裝最新的 C# Dev 套件 和 .NET SDK 。

在 VS Code 中：

建立新的專案：

  • 移至 [總管] 檢視，然後選取 [建立 .NET 專案] 按鈕。 或者，您可以使用 Ctrl+Shift+P，啟動 命令選擇區 ，接著輸入「.NET」，然後尋找並選取 .NET: 新增專案 命令。

  • 從清單中選取 Blazor Web App 專案範本。

  • 在 [專案位置] 對話方塊中，建立或選取專案的資料夾。

  • 在命令選擇區中，將專案命名為 BlazorWebAppMovies，包括符合大小寫。 使用此確切的專案名稱很重要，以確保命名空間符合您從教學課程複製到您要建置的應用程式的程式碼。

  • 從命令選擇區選取 [建立專案]。

確認您已安裝最新的 .NET SDK 。

在命令殼層中：

  • 使用 cd 命令變更至您要建立專案資料夾的目錄 (例如， cd c:/users/Bernie_Kopell/Documents)。

  • 使用 dotnet new 命令 搭配 blazor 專案範本 來建立新的 Blazor Web App 專案。 傳遞至命令的 -o|--output 選項 在目前殼層目錄位置的新資料夾中建立專案。 將專案命名為 BlazorWebAppMovies，包括符合大小寫，讓命名空間與您從教學課程複製到應用程式的程式碼相符。

    dotnet new blazor -o BlazorWebAppMovies

執行應用程式

按鍵盤上的 F5 執行應用程式。

當專案未設定為使用 SSL 時，Visual Studio 會顯示下列對話方塊：

信任自我簽署憑證對話方塊

如果您信任 ASP.NET Core SSL 憑證，請選取 [是]。

此時會顯示下列對話方塊：

安全性警告對話方塊

選取 [是] 以確認風險並安裝憑證。

Visual Studio：

  • 編譯並執行應用程式。
  • 在 https://localhost:{PORT} 啟動預設瀏覽器，這會顯示應用程式的 UI。 {PORT} 預留位置是建立應用程式時指派至應用程式的隨機連接埠。 如果由於本機連接埠衝突而需要變更連接埠，請變更專案 Properties/launchSettings.json 檔案中的連接埠。

瀏覽應用程式的頁面，以確認應用程式正常運作。

在 VS Code 中，按 F5 執行應用程式。

在 VS Code UI 頂端 [命令選擇區] 的 [選取偵錯工具] 提示中，選取 C#。 在下一個提示，選取預設啟動設定 )C#: BlazorWebAppMovies [Default Configuration])。

預設瀏覽器是在 http://localhost:{PORT} 啟動，這會顯示應用程式的 UI。 {PORT} 預留位置是建立應用程式時指派至應用程式的隨機連接埠。 如果由於本機連接埠衝突而需要變更連接埠，請變更專案 Properties/launchSettings.json 檔案中的連接埠。

瀏覽應用程式的頁面，以確認應用程式正常運作。

在開啟至專案根資料夾的命令殼層中，執行 dotnet watch 命令以編譯並啟動應用程式：

dotnet watch

應用程式已編譯並執行。 應用程式會在 http://localhost:{PORT}啟動，其中 {PORT} 預留位置是建立應用程式時指派至應用程式的隨機連接埠。 如果由於本機連接埠衝突而需要變更連接埠，請變更專案 Properties/launchSettings.json 檔案中的連接埠。

瀏覽應用程式的頁面，以確認應用程式正常運作。

停止應用程式

請使用下列其中一個方法停止應用程式：

  • 關閉瀏覽器視窗。
  • 在 Visual Studio 中：

    • 使用 Visual Studio 功能表列中的 [停止] 按鈕：

      Visual Studio 功能表列中的 [停止] 按鈕

    • 在鍵盤上按 Shift+F5。

請使用下列方法停止應用程式：

  1. 關閉瀏覽器視窗。
  2. 在 VS Code 中：
    • 從 [執行] 功能表中，選取 [停止偵錯]。
    • 在鍵盤上按 Shift+F5。

請使用下列方法停止應用程式：

  1. 關閉瀏覽器視窗。
  2. 在命令殼層中，按 Ctrl+C (Windows) 或按 ⌘+C (macOS)。

檢查專案檔

以下章節包含專案資料夾和檔案儲存體的概要說明。

如果您正在建立應用程式，則不需要變更下列各節中的專案儲存體。 當您讀取資料夾和檔案的描述時，請在專案中檢查它們。

如果您只讀取文章，而不是建立應用程式，則可以在 Blazor GitHub 存放庫範例中參考已完成的樣本應用程式 (dotnet/blazor-samples)。 選取存放庫的最新版本資料夾。 本教學課程專案的樣本資料夾名為 BlazorWebAppMovies。 樣本應用程式是遵循教學課程系列的所有步驟之後， 完成的應用程式版本 。 樣本的程式碼並不總是與本系列結束之前的教學課程步驟相符。

Properties 資料夾

Properties 資料夾在 launchSettings.json 檔案中儲存開發環境設定。

wwwroot 資料夾

wwwroot 資料夾包含靜態資產，例如影像、JavaScript (.js) 和 stylesheet (.css) 檔案儲存體。

Components、 Components/Pages和 Components/Layout 資料夾

這些資料夾包含 Razor 元件，通常稱為「元件」和支援檔案。 元件是使用者介面 (UI) 的獨立部分，具有選擇性處理邏輯。 元件可以在專案之間嵌套、重複使用並共用。

元件會使用 C# 和 HTML 標記的組合，實作到副檔名為 .razor 的 Razor 元件檔案中。

一般而言，嵌套於其他元件內且無法直接連線（「可路由」）到 URL 的元件會放在 Components 資料夾中。 可透過 URL 路由傳送的元件通常放在 Components/Pages 資料夾中。

Components/Layout 資料夾包含下列配置元件和樣式表：

  • MainLayout 元件 (MainLayout.razor)：應用程式的主要配置元件。
  • MainLayout.razor.css：應用程式主要配置的樣式表。
  • NavMenu 元件 (NavMenu.razor)：實作資訊看板導覽。 此元件會使用數個 NavLink 元件來轉譯導覽連結至其他 Razor 元件。
  • NavMenu.razor.css：應用程式的導覽功能表樣式表。

Components/_Imports.razor 檔案

_Imports 檔案 (_Imports.razor) 包含要包含在應用程式 Razor 元件的通用 Razor 指示詞 。 Razor 指示詞是以 @ 為前綴的保留關鍵詞，出現在 Razor 標記中，並變更元件標記或元件元素的編譯或函式方式。

Components/App.razor 檔案

App 元件 )App.razor)是應用程式的根元件，包括：

  • HTML 標記
  • Routes 元件：
  • Blazor 指令碼 （<script> 標記 blazor.web.js）。

根元件是應用程式載入的第一個元件。

Components/Routes.razor 檔案

Routes 元件 (Routes.razor) 為應用程式設定路由。

appsettings.json 檔案

appsettings.json 該檔案包含設定資料，例如連接字串。

Program.cs 檔案

Program.cs 檔案包含程式碼來建立應用程式，並設定應用程式的要求處理管道。

Blazor Web App 專案範本中各行順序會隨著 .NET 版本而變更，因此 Program.cs 檔案各行順序可能不符合本節所涵蓋行的順序。

WebApplicationBuilder 使用預先設定預設值建立應用程式：

var builder = WebApplication.CreateBuilder(args);

Razor 元件服務會藉由呼叫 AddRazorComponents新增至應用程式，讓 Razor 元件能夠在伺服器上轉譯並執行程式代碼：

builder.Services.AddRazorComponents();

組建 WebApplication （由下列程式碼中的 app 變數儲存）：

var app = builder.Build();

接下來，設定 HTTP 要求管道。

在開發環境中

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

HTTPS 重新導向中介軟體 (UseHttpsRedirection) 會在 HTTPS 連接埠可用時，將 HTTP 要求重新導向至 HTTPS，以強制執行 HTTPS 通訊協定：

app.UseHttpsRedirection();

防偽中介軟體 (UseAntiforgery) 會針對表單處理強制執行防偽保護：

app.UseAntiforgery();

對應靜態資產中介軟體 (MapStaticAssets) 將組建期間產生的靜態檔案，例如影像、腳本和樣式表單，對應為端點：

app.MapStaticAssets();

靜態檔案中介軟體 (UseStaticFiles) 提供靜態檔案，例如來自資料夾的 wwwroot 影像、腳本和樣式表單：

app.UseStaticFiles();

MapRazorComponents 將根 App 元件定義的元件對應至指定的 .NET 元件，並轉譯可路由元件：

app.MapRazorComponents<App>();

應用程式透過呼叫在 WebApplication (app)上的 Run 來執行：

app.Run();

使用已完成的範例進行疑難排解

如果您在依照教學課程進行時遇到無法從文字解決的問題，請將程式碼與 Blazor 範例存放庫中已完成的專案進行比較：

Blazor 範例 GitHub 存放庫 (dotnet/blazor-samples)

選取最新版本資料夾。 本教學課程專案的樣本資料夾名為 BlazorWebAppMovies。

其他資源

使用 VS Code 或 .NET CLI 時，本教學課程系列採用不安全的 HTTP 通訊協定，以簡化 Linux 和 macOS 使用者採用 SSL/HTTPS 安全性轉換。 有關採用 SSL/HTTPS 的資訊，請參閱 在 ASP.NET Core 強制執行 HTTPS。

下一步

下一步：新增並建造模型