建立 Blazor web 應用程式

本指南提供建立第一個 Blazor web 應用程式的簡介。 如需更深入的指引,請參閱ASP.NET Core Blazor 簡介

ASP.NET Core Blazor支援兩種不同的裝載選項;Blazor WebAssembly (WASM) 或 Blazor伺服器。 Visual Studio for Mac 支援這兩種裝載模型。 Visual Studio for Mac 8.4 + 支援 Blazor Server 和 Visual Studio for Mac 8.6 + 兩者都支援。 如需裝載模型的詳細資訊, Blazor 請參閱ASP.NET Core Blazor 裝載模型。 您可以在 Blazor WebAssembly Visual Studio for Mac 的預覽 (版本中,透過 Visual Studio > 檢查更新 ... 功能表) 中的預覽更新通道,取得在中偵錯工具的支援。

什麼是 Blazor? Blazor 是使用 .NET 建立互動式用戶端 web UI 的架構,可為 網頁程式開發人員提供下列優點:

  • 以 C# 撰寫而不是 JavaScript。
  • 利用 .NET 程式庫的現有 .NET 生態系統。
  • 跨伺服器和用戶端共用應用程式邏輯。
  • 的權益。淨效能、可靠性和安全性。
  • 利用 Visual Studio 在 PC、Linux 和 macOS 上保持生產力。
  • 以常用的語言、架構和工具建置,不僅穩定、功能豐富,而且容易使用。

建立新 Blazor WebAssembly 專案

  1. 在 [ 開始] 視窗 中,選取 [ 新增 ] 以建立新的專案:

    Visual Studio for Mac醒目提示新選項的開始視窗

  2. 在 [新增 Project ] 對話方塊中,選取 [ .net Core > 應用 > Blazor WebAssembly 程式],然後選取 [下一步] ![ 新增 Project]) (對話方塊的螢幕擷取畫面,在 [應用程式] 窗格中反白顯示 [ASP.NET Core],並選取 [下一個] 按鈕。

  3. 選取 [.NET Core 3.1] 作為目標 framework,然後選取 [下一步]設定您的新:::非 loc (Blazor WebAssembly) :::應用程式對話方塊,該對話方塊會顯示為已選取為 .NET Core 3.1 的目標 Framework

  4. 選擇專案的名稱,並視需要新增 Git 支援。 選取 [Create] (建立) 以建立專案。 在輸入 Project 名稱時,會顯示新的:::非 loc (Blazor WebAssembly) ::: App 對話方塊

    Visual Studio for Mac 會在程式碼配置視窗中開啟您的專案。

  5. 選取 [執行 > 啟動但不進行調試 程式] 以執行應用程式。

    Visual Studio 開始Kestrel、將瀏覽器開啟至 https://localhost:5001 ,並顯示您的 Blazor web 應用程式。

    :::非 loc (Blazor) ::: web 應用程式 Microsoft Edge

建立新的 Blazor 伺服器專案

  1. 在 [ 開始] 視窗 中,選取 [ 新增 ] 以建立新的專案:

    Visual Studio for Mac醒目提示新選項的開始視窗

  2. 在 [新增 Project ] 對話方塊中,選取 [ .net Core > 應用 程式 > Blazor 伺服器應用程式],然後選取 [下一步] ![ 新增 Project]) (對話方塊的螢幕擷取畫面,在 [應用程式] 窗格中反白顯示 [ASP.NET Core],並選取 [下一個] 按鈕。

  3. 選取 [.NET Core 3.1] 作為目標 framework,然後選取 [下一步]設定您的新:::非 loc (Blazor) ::: Server 應用程式對話方塊,此對話方塊會顯示為已選取為 .NET Core 3.1 的目標 Framework

  4. 選擇專案的名稱,並視需要新增 Git 支援。 選取 [Create] (建立) 以建立專案。 輸入 Project 名稱時,會顯示新的::: no-loc (Blazor) ::: Server 應用程式對話方塊

    Visual Studio for Mac 會在程式碼配置視窗中開啟您的專案。

  5. 選取 [執行 > 啟動但不進行調試 程式] 以執行應用程式。

    Visual Studio 開始Kestrel、將瀏覽器開啟至 https://localhost:5001 ,並顯示您的 Blazor web 應用程式。

    :::非 loc (Blazor) ::: web 應用程式 Microsoft Edge

BlazorVisual Studio for Mac 支援

從8.4 版開始的 Visual Studio for Mac () 包含可協助您建立新伺服器專案的新功能 Blazor 。 也提供您預期的標準支援,例如建立、執行和偵測 Blazor 專案。 在 Visual Studio for Mac 8.6 中,已新增建立、建立和執行專案的支援 Blazor WebAssembly 。

在上述的逐步解說中,我們看到 [ Blazor 伺服器應用程式] 專案範本如何協助您建立新的 Blazor 伺服器應用程式或 Blazor WebAssembly 應用程式專案。 讓我們看看 Visual Studio for Mac 中的一些額外功能,以支援 Blazor 專案開發。

Razor 檔案的編輯器支援

Visual Studio for Mac 包含編輯 razor 檔案的支援,也就是您在建立應用程式時將使用的大部分檔案。 Blazor Visual Studio for Mac 針對您的 razor 檔案(包括專案中所宣告的 razor 元件的完成)提供完整的顏色標示和完成支援。

顯示 Intellisense for:::非 loc (Blazor) :::的 Visual Studio for Mac 編輯器視窗

Blazor將應用程式發佈至 Azure App Service

您也可以 Blazor 直接將應用程式發佈至 Azure App Service。 如果您沒有 Azure 帳戶可 Blazor 在 azure 上執行您的應用程式,您可以在 這裡免費註冊 ,這也會隨附12個月免費的熱門服務、$200 的免費 Azure 點數,以及超過25項永遠免費的服務。

顯示 Azure 發佈體驗的 Visual Studio for Mac

專案剖析

Blazor web 應用程式預設會包含幾個目錄和檔案。 當您開始使用時,以下是您需要熟悉的主要專案:

Pages 資料夾

此資料夾包含使用 razor 副檔名的專案網頁。

共用資料夾

此資料夾包含共用元件,也會使用 razor 副檔名。 您會看到這包含 MainLayout,它是用來定義應用程式之間的一般配置。 它也包含共用的 NavMenu razor 元件,用於所有頁面。 如果您要建立可重複使用的元件,這些元件將會移至 共用 資料夾。

應用程式設定

AppSettings 檔案包含設定資料,例如連接字串。

如需有關設定的詳細資訊,請參閱ASP.NET 指南中的設定。

wwwroot 資料夾

此資料夾包含靜態檔案,例如 HTML、JavaScript 和 CSS 檔案。 如需詳細資訊,請參閱 ASP.NET Core 中的靜態檔案

Program.cs

此檔案包含程式的進入點。 如需詳細資訊,請參閱 ASP.NET Core Web 主機

Blazor 伺服器應用程式特定檔案

應用程式設定

AppSettings 檔案包含設定資料,例如連接字串。

如需有關設定的詳細資訊,請參閱ASP.NET 指南中的設定。

Startup.cs

此檔案包含設定應用程式行為的程式碼,例如應用程式是否需要對 cookie 的同意。 如需詳細資訊,請參閱 ASP.NET Core 中的應用程式啟動

總結

在本教學課程中,您已瞭解如何 Blazor 在 Visual Studio for Mac 中建立新的伺服器應用程式或 Blazor WebAssembly 應用程式,並瞭解一些 Visual Studio for Mac 提供來協助您建立 Blazor 應用程式的功能。

另請參閱

如需建立 Blazor web 應用程式的完整指南,請參閱ASP.NET Core Blazor 簡介