選擇 ASP.NET Core Web UI

ASP.NET Core 是完整的 UI 架構。 選擇要結合哪些功能以符合應用程式的 Web UI 需求。

如需進行新的專案開發，建議使用 ASP.NET Core Blazor。

ASP.NET Core Blazor

Blazor 是一個完整堆疊的 Web UI 架構，建議用於大部分的 Web UI 案例。

使用 Blazor 的優點：

• 可重複使用的元件模型。
• 有效率的差異型元件轉譯。
• 透過 WebAssembly 彈性地從伺服器或客戶端轉譯元件。
• 在 C# 中建置豐富的互動式 Web UI 元件。
• 以靜態方式從伺服器轉譯元件。
• 漸進式增強伺服器轉譯元件，以便更順暢地瀏覽和表單處理，並啟用串流轉譯。
• 在客戶端和伺服器上共用常見邏輯的程序碼。
• 與 JavaScript 的 Interop。
• 將元件與現有的 MVC、Razor Pages 或 JavaScript 型應用程式整合。

如需 Blazor 的完整概觀、其架構和優點，請參閱：ASP.NET Core Blazor 和 ASP.NET Core Blazor 裝載模型。 若要開始使用您的第一個 Blazor 應用程式，請參閱建置您的第一個 Blazor 應用程式。

ASP.NET Core Razor Pages

Razor Pages 是以頁面為基礎的模型，用於建置伺服器轉譯的 Web UI。 Razor 頁面 UI 會在伺服器上動態轉譯，以產生頁面的 HTML 和 CSS，以響應瀏覽器要求。 頁面抵達用戶端以準備好顯示。 Razor Pages 的支援會以 ASP.NET Core MVC 為建置基礎。

Razor Pages 優點：

• 快速建置和更新 UI。 頁面的程式碼會隨著頁面保留，同時讓 UI 和商務邏輯考量區隔。
• 可測試且可調整為大型應用程式。
• 讓您的 ASP.NET Core 頁面以比 ASP.NET MVC 更簡單的方式組織：
  • 檢視特定的邏輯和檢視模型可以保存在自己的命名空間和目錄中。
  • 相關頁面的群組，可以保存在其自己的命名空間和目錄中。

若要開始使用您的第一個 ASP.NET Core Razor Pages 應用程式，請參閱教學課程：開始使用 ASP.NET Core 中的 Razor Pages。 如需 ASP.NET Core Razor Pages 的完整概觀、其架構和優點，請參閱：ASP.NET Core 中的 Razor Pages 簡介。

ASP.NET Core MVC

ASP.NET Core MVC 會在伺服器上轉譯 UI，並使用 Model-View-Controller (MVC) 架構模式。 MVC 模式會將應用程式分成三個主要元件群組：模型、檢視表和控制器。 使用者要求會路由至控制器。 控制器會負責處理模型來執行使用者動作或擷取查詢結果。 控制器會選擇要向使用者顯示的檢視，並在其中提供任何所需的模型資料。

ASP.NET Core MVC 優點：

• 根據可調整且成熟的模型來建置大型 Web 應用程式。
• 清楚考量區隔，以取得最大的彈性。
• Model-View-Controller 的責任區隔可確保商務模型可以發展，而不會緊密結合到低階實作詳細資料。

若要開始使用 ASP.NET Core MVC，請參閱開始使用 ASP.NET Core MVC。 如需 ASP.NET Core MVC 架構和優點的概觀，請參閱 ASP.NET Core MVC 的概觀。

ASP.NET Core 單頁應用程式 (SPA) 與前端 JavaScript 架構

使用 Angular、React 和 Vue 等熱門 JavaScript 架構來建置 ASP.NET Core 應用程式的用戶端邏輯。 ASP.NET Core 提供 Angular、React 和 Vue 的專案範本，也可以與其他 JavaScript 架構搭配使用。

除了先前列出的用戶端轉譯優點之外，ASP.NET Core SPA 搭配 JavaScript 架構的優點：

• JavaScript 執行階段環境已隨著瀏覽器提供。
• 大型社群和成熟的生態系統。
• 使用 Angular、React 和 Vue 等熱門 JS 架構來建置 ASP.NET Core 應用程式的用戶端邏輯。

缺點：

• 需要更多程式碼語言、架構和工具。
• 難以共用程式碼，因此某些邏輯可能會重複。

若要開始使用，請參閱：

• 使用 Angular 建立 ASP.NET Core 應用程式
• 使用 React 建立 ASP.NET Core 應用程式
• 使用 Vue 建立 ASP.NET Core 應用程式
• Visual Studio 中的 JavaScript 與 TypeScript

結合多個 Web UI 解決方案：ASP.NET Core MVC 或 Razor Pages 加上 Blazor

MVC、Razor Pages 和 Blazor 是 ASP.NET Core 架構的一部分，其設計是要搭配使用。 可以將 Razor 元件整合至 Razor Pages 與 MVC 應用程式中。 轉譯檢視或頁面時，可以同時預先轉譯元件。

除了 MVC 或 Razor Pages 的優點以外，MVC 或 Razor Pages 加上 Blazor 的優點：

• 預先轉譯會在伺服器上執行 Razor 元件，並將其轉譯成檢視或頁面，其可改善應用程式的感知負載時間。
• 使用元件標籤協助程式，將互動功能新增至現有的檢視或頁面。

若要開始使用 ASP.NET Core MVC 或 Razor Pages 加上 Blazor，請參閱將 ASP.NET Core Razor 元件整合到 ASP.NET Core 應用程式。

下一步

如需詳細資訊，請參閱

• ASP.NET Core Blazor
• ASP.NET Core Blazor 裝載模型
• 將 ASP.NET Core Razor 元件整合到 ASP.NET Core 應用程式中
• 比較 gRPC 服務與 HTTP API