學習ASP.NET Core Blazor程式設計系列一——綜述

.NET 6 是微軟統一.Net Core與.Net Framework 兩大架構的第二個版本，微軟在 .NET 5 中開始進行這兩大架構的統一之路。

.NET 6 将作為長期支援 (LTS) 版本得到三年的支援。隻有Visual Studio 2022（以及更高版本）支援 .NET 6。Visual Studio 2017/2019等版本都不支援.NET 6。

.NET 6可以生成運作在Linux、 Windows 和 macOS 上的單個檔案的應用程式，這個應用程式是一個單檔案二進制檔案。單檔案應用程式不再将任何核心運作時程式集提取到臨時目錄。

一、NET 6概述

    .NET 6 是微軟統一.Net Core與.Net Framework 兩大架構的第二個版本，微軟在 .NET 5 中開始進行這兩大架構的統一之路。

    .NET 6 将作為長期支援 (LTS) 版本得到三年的支援，NET 6是2021年釋出的，微軟支援到2024年。隻有Visual Studio 2022（以及更高版本）支援 .NET 6。Visual Studio 2017/2019等版本都不支援.NET 6。

    .NET 6可以生成運作在Linux、 Windows 和 macOS 上的單個檔案的應用程式，這個應用程式是一個單檔案二進制檔案。單檔案應用程式不再将任何核心運作時程式集提取到臨時目錄。

    .NET 6 在移動、桌面、IoT 和雲應用之間統一了SDK、基礎庫和運作時。除了這方面的統一以外，.NET 6生态系統還提供了以下功能：

• 簡化開發：輕松入門。 C# 10中的新語言功能可減少需要編寫的代碼量。 利用Web堆棧和最小API的原則，可以輕松地快速編寫更小、更快速的微服務。
• 更佳的性能：.NET 6是最快的最完整的Web架構，如果在雲上運作，則會降低計算成本。
• 更高的工作效率：.Net 6和Visual Studio 2022提供熱重載、新的git工具、智能代碼編輯、可靠的診斷和測試工具以及更好的團隊協作。

二、ASP.NET Core 6 的優點

• 生成Web UI和Web API的統一場景。
• 針對可測試性進行建構。
• 內建新式用戶端架構和開發工作流。
• 基于環境的雲就緒配置系統。
• 内置依賴項注入。
• 輕型的高性能子產品化 HTTP 請求管道。
• 能夠在IIS、Kestrel、HTTP.sys、Nginx、Apache、Docker 上進行托管或在自己的程序中進行自托管。
• 并行版本控制。
• 簡化新式Web開發的工具。
• 能夠在 Windows、macOS 和 Linux 進行生成和運作。
• Razor Pages 可以使基于頁面的編碼方式更簡單高效。
• Blazor 允許在浏覽器中使用 C# 和 JavaScript。 共享全部使用 .NET 編寫的伺服器端和用戶端應用邏輯。
• 支援使用 gRPC 托管遠端過程調用 (RPC)。
• 開放源代碼和以社群為中心。

三、 ASP.NET Core 6 WebUI介紹

    ASP.NET Core 6 提供一套完整的Web UI架構。主要區分為伺服器UI和用戶端UI。在ASP.NET Core 6中可以使用三種方法來建構新的Web UI。   

     三種方式如下：

      1）使用伺服器UI來建構應用。

      2）使用用戶端UI在浏覽器中建構應用。

      3）伺服器UI和用戶端UI混合使用的方式來建構應用。 例如，大多數Web UI使用伺服器UI，運作在伺服器上，并會根據需要來添加用戶端UI元件，運作在用戶端的浏覽器中。

四、伺服器 UI

     使用伺服器 Web UI，ASP.NET Core 6建構的應用會在伺服器上動态生成頁面的 HTML和CSS，以響應浏覽器發過來的請求。頁面在到達用戶端時已準備以何種樣式顯示給使用者看了。

     優點：

• 用戶端的性能要求最少，因為是主要由伺服器執行邏輯和頁面生成工作：
• 非常适用于低端裝置和低帶寬連接配接。
• 允許在用戶端上使用各種版本的浏覽器。
• 快速加載初始頁面。
• 盡可能少地使用或不使用JavaScript腳本檔案。
• 靈活地通路受保護的伺服器資源：
• 對資料庫的通路。
• 對機密資料或接口的通路。
• 靜态站點分析優點，例如搜尋引擎優化。

    常見的使用伺服器Web UI的應用場景如下：

• 動态站點，例如提供個性化頁面、資料和窗體的站點。
• 顯示隻讀資料，如資料清單。
• 顯示靜态部落格頁面。
• 面向公衆的内容管理系統。

     缺點：

• 計算和記憶體使用的成本都集中在伺服器上，而不是分攤到每個用戶端。
• 使用者互動需要往返伺服器才能生成新的UI界面。

五、用戶端 UI

     用戶端UI是指ASP.NET Core 6開發的應用在用戶端上動态地呈現Web UI，根據需求直接更新浏覽器頁面中的DOM，進而改變頁面中的資料及頁面。

     優點：

• 可以實作幾乎即時的使用者互動，無需往返伺服器。 UI事件處理和邏輯在使用者的裝置上運作，延遲最小。
• 支援增量更新，儲存部分完成的窗體或文檔，使用者無需點選送出按鈕，送出窗體。
• 可設計為在斷開連接配接模式下運作。重建連接配接後，針對用戶端模型的更新最終會同步到伺服器。
• 降低了伺服器的負載和成本，将一部分工作負荷轉移到用戶端。許多用戶端呈現的應用也可以作為靜态網站進行托管。
• 利用使用者的裝置的一些性能與功能。

     用戶端 Web UI 的使用場景如下：

• 互動式儀表闆。
• 具有拖放功能的應用
• 響應式協作社交應用。

    缺點：

• 必須在用戶端下載下傳和執行邏輯的代碼，這增加了初始加載時間。
• 對于用戶端的裝置和浏覽器的版本有較高要求，可能不包含那些低端裝置、較舊版本的浏覽器或低帶寬連接配接的使用者。

六、伺服器ASP.NET Core Web UI 介紹

       伺服器ASP.NET Core Web UI主要有ASP.NET Core Razor Pages 和 ASP.NET Core MVC 組成，這是.NET 6中基于伺服器的ASP.NET Core架構，用于建立Web應用。

     1、ASP.NET Core Razor Pages

     Razor Pages是一個基于頁面的Web開發架構。Web  UI和業務邏輯關注點保持分離狀态，但都在頁面内。Razor Pages入門比ASP.NET Core MVC要簡單一些。

      Razor Pages的優點：

• 快速建構和更新UI。頁面的代碼與頁面一起儲存，同時保持UI和業務邏輯關注點互相分離。
• 可進行測試并縮放到大型應用。
• 使用 ASP.NET Core Razor Page頁面，比使用ASP.NET MVC更簡單：
• 視圖的具體邏輯和視圖模型可以一起儲存在它們自己的命名空間和目錄中。
• 相關頁面的組可以儲存在各自的命名空間和目錄中。

     2、ASP.NET Core MVC

     ASP.NET MVC 在伺服器上呈現 UI的一個開發架構，是用于建立基于 MVC(模型-視圖-控制器結構模式)的Web 應用的Web開發架構。 MVC模式将應用分成三組主要元件：模型、視圖和控制器。使用者請求被路由到控制器。控制器負責使用模型來執行使用者操作或檢索查詢結果。控制器選擇要顯示給使用者的視圖，并為其提供所需的任何模型資料。對Razor Pages的支援是建立在ASP.NET Core MVC基礎之上的。

     ASP.NET Core MVC的優點：

• 基于可縮放且成熟的模型生成大型Web應用。
• 明确分離關注點以獲得最大的靈活性。
• 模型-視圖-控制器的責任分離，確定了業務模型的發展，而不會與底層的實作細節緊密相連。

七、用戶端 ASP.NET Core Web UI

      Blazor和Javascripot用戶端架構是ASP.NET Core 6中所使用的用于在用戶端建構Web應用的Web UI模型。

     1、Blazor

     Blazor是一個使用Blazor生成互動式用戶端的Web UI架構，使用C#代替JavaScript來建立資訊豐富的互動式UI，允許使用共享代碼和庫。使用 C#、HTML 和 CSS 實作的可重用的Web UI元件。将 UI 呈現為 HTML 和 CSS，以支援衆多浏覽器，其中包括移動浏覽器。Blazor 元件非正式地稱為 Blazor 元件，正式可以稱Razor元件，Razor元件類通常以 Razor 标記頁（檔案擴充名為 .razor）的形式編寫。

     Razor元件的優點：

• 使用C#而不是JavaScript建構互動式 Web UI。對前端和後端代碼使用同一語言，可以：
• 加快應用開發。
• 降低生成管道的複雜性。
• 簡化維護。
• 利用現有的.NET庫生态系統。
• 讓開發人員了解和處理用戶端和伺服器端代碼。
• 建立可重用且可共享的UI元件。
• 使用Blazor提供的 Blazor可重用UI元件，提高工作效率。
• 适用于所有新版的Web浏覽器，包括移動浏覽器。Blazor使用Web開方标準，沒有插件或代碼轉譯。
• 可以使用Blazor Server或Blazor WebAssembly托管Razor元件，以利用伺服器或用戶端呈現的優勢。

    2. JavaScript架構（例如Angular和React）

     使用JavaScript前端架構（如 Angular 或 React）生成基于ASP.NET Core的應用程式的用戶端頁面。ASP.NET Core為 Angular和React提供了項目模闆，當然也可以用其他的JavaScript架構（例如Vue，EasyUI，Extjs）。

     将ASP.NET Core SPA與JavaScript架構結合使用的優點：

• JavaScript運作時環境已随浏覽器提供。
• 大型社群和成熟的生态系統。
• 使用熱門的JS架構（如Angular和React）建構适用于ASP.NET Core 應用的用戶端邏輯。

     缺點：

• 需要使用多種程式設計語言、架構和工具。
• 難以共享代碼，是以一些邏輯可能會重複。

八、ASP.NET Core MVC或Razor Pages與Blazor結合使用

       MVC、Razor Pages和Blazor都是ASP.NET Core架構的一部分，微軟在設計時，就已經設計為可以結合使用。Razor元件可以通過Blazor WebAssembly或Blazor Server內建到Razor Pages和MVC應用程式中。呈現視圖或頁面時，可以同時預呈現元件。

      在MVC或Razor Pages的優點基礎上，MVC或Razor Pages與Blazor結合使用的優點如下：

• 預呈現會在伺服器上執行 Razor 元件，并将其呈現到視圖或頁面中，進而提高應用的感覺加載時間。
• 使用元件标記幫助程式将互動性添加到現有視圖或頁面。