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

語言: CN / TW / HK

一、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 元件,並將其呈現到檢視或頁面中,從而提高應用的感知載入時間。
  • 使用元件標記幫助程式將互動性新增到現有檢視或頁面。