簡介

  • 3 分鐘

披薩外送公司雇用您將其對應客戶的 Blazor 網站現代化，其中包括披薩清單、訂購頁面和其他功能。 Blazor 互動式 Web 應用程式會使用 .NET 來共用伺服器與用戶端程式碼之間的邏輯。

在您的更新中，您想要：

  • 使用 JavaScript 以動畫顯示轉譯的 HTML 元件。
  • 使用 JavaScript 程式庫將商標套用至警示頁面。
  • 變更應用程式在頁面轉譯完成後回應事件的方式。
  • 建立範本元件並且套用以更新多個頁面。

本課程模組說明如何與 JavaScript 程式碼互通、使用範本化元件，以及回應 Blazor 中的元件生命週期事件。

學習目標

  • 從 .NET 程式碼呼叫 JavaScript 函式，並從 Blazor 應用程式中的 JavaScript 呼叫 .NET 程式碼。
  • 處理 Blazor 元件生命週期中的事件。
  • 建立可納入 Blazor 應用程式的可重複使用範本元件。

必要條件

  • 熟悉 HTML、CSS 和 JavaScript Web 開發。
  • 撰寫 C# 程式碼的新手能力。
  • 已安裝 .NET 8.0 SDK。
  • 整合式開發環境 (IDE)。 本課程模組使用 Visual Studio Code。

提示

本課程模組使用 .NET 命令列介面 (CLI) 與 Visual Studio Code 進行本機開發。 完成本課程模組之後，您可以使用 Visual Studio for Windows、Visual Studio for Mac 或搭配 Windows、Linux 或 Mac 的 Visual Studio Code來套用概念並繼續開發。

.NET 8.0 SDK

本課程模組使用 .NET 8.0 SDK。 確認您已在慣用的命令終端中執行下列命令來安裝 .NET 8.0：

dotnet --list-sdks

類似下列範例的輸出隨即出現：

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

確定已列出開頭為 8 的版本。 如果未列出任何項目或找不到命令，請安裝最新的 .NET 8.0 SDK。