下一個專案該選MVC、Razor Pages還是Blazor?

 

作者：許薰尹  精誠資訊/恆逸教育訓練中心資深講師

2016年微軟推出了真正跨平台的.NET Core，經過日新月異時間的淬鍊，.NET已經邁向第七版了，為了在版本上不與舊一代.NET Framework 4.x版混淆，.NET Core 3.x版的下一個版本，是第五版，同時正名，把「Core」的字眼去掉，命為.NET 5，最新的版本是.NET 7，擁抱新一代.NET的時代已開始。

.NET中包含的ASP.NET應用程式用於開發網站應用程式，它的特色是：

l   開放源碼

l    可以跨Windows、macOS或Linux平台執行

l   一台機器可以多版本同時運行

l   可以使用Visual Studio開發工具、Visual Studio for Mac或Visual Studio Code(免費)進行開發

l   可整合現代化、流行的用戶端開發框架，如Angular、React、Vue.js

l    可裝載在多種網站伺服器與環境運行，如Kestrel、IIS、Nginx、Apache、Docker等等

不過目前ASP.NET應用程式開發分為三種：

l    ASP.NET MVC

l    ASP.NET Razor Pages

l    ASP.NET Blazor

l   ASP.NET MVC

這三種開發方式都可以使用Razor語法來產生瀏覽器顯示的HTML、CSS等Web UI介面。更進一步來說，ASP.NET MVC將網站應用程式切割成三大塊：Model(模型)、View(檢視)與Controller(控制器)，讓應用程式易於撰寫、除錯以及自動化測試。

 

l   ASP.NET Razor Pages

ASP.NET Core 2.0版新增的Razor Pages，採用類似Model-View-ViewModel(MVVM)設計模式進行開發，支援雙向繫結，開發方式類似PHP、傳統的ASP、Java Server Pages、ASP.NET Web Pages、ASP.NET Web Forms等等，ASP.NET Razor Pages以頁面(Page)為基礎。

 

ASP.NET Razor Pages將原來ASP.NET MVC開發步驟：加入控制器(Controller)→加入動作(Action) →加入檢視(View)，變成加一個頁面(Page)。相較之下，ASP.NET Razor Pages比ASP.NET MVC開發架構簡單、易學，最建議應用在具有Web UI的網站，例如企業入口網站。

 

就筆者的觀點而言，ASP.NET Razor Pages和ASP.NET MVC底層都是以ASP.NET為基礎，兩者之間的相似度有80%，差別在於採用不同的路由系統，以及程式寫在不同的位置罷了。

 

l   ASP.NET Blazor

ASP.NET Blazor採用單一頁面應用程式框架(Single Page App Framework，SPA)，SPA框架意味著將所有的檢視與UI邏輯移到用戶端處理。

ASP.NET Blazor適用於全端開發(Full-Stack)：

可以使用.NET來建立互動式的用戶端Web UI，號稱從前端瀏覽器寫到後端伺服器上的程式，都可以使用相同的C#語言來取代JavaScript。

ASP.NET Blazor可以執行在伺服端或透過WebAssembly執行在用戶端瀏覽器。參考下圖來自官方的文件，為WebAssembly的運行環境：

(資料來源)

下圖則是Blazor Server的運行環境：

(資料來源)

 

ASP.NET三種開發架構比起來差異性在哪呢？

參考下圖ASP.NET Razor Page與ASP.NET MVC都是由用戶端瀏覽器送出一個請求，例如要求Index頁面/檢視，伺服端便將整個頁面/檢視的執行結果傳回：

而ASP.NET Blazor則是使用多個元件(Component)，組成一個呈現在使用者看到的使用者介面。參考下圖是Blazor Web Assembly運作方式，第一次執行時將整個應用程式下載到瀏覽器，若有需要可透過網路叫用後端服務導向程式REST API來取得資料。您可以將Blazor想像成Vue.js或Angular，只不過我們使用的程式語言不是JavaScript而是C#。

ASP.NET MVC、ASP.NET Razor Page與ASP.NET Blazor主要差異請參考下表：

總結

ASP.NET MVC：適用於建立在網站伺服器執行的應用程式，瀏覽器只需要接收、載入HTML，然後顯示。檢視的部分由*.cshtml檔案的程式碼處理；商業邏輯則交由控制器(Controller)程式碼負責。

👍學習推薦

l   【UAC496】ASP.NET Core MVC網站開發從設計到實作Part 1

l   【UAC497】ASP.NET Core MVC網站開發從設計到實作Part 2

ASP.NET Razor Page：檢視的部分由*.cshtml檔案的程式碼處理；商業邏輯則交由對應的*.cshtml.cs檔案程式碼負責。檔案數量比MVC少。

👍學習推薦

l   【UAC495】全面掌握ASP.NET Core Razor Page網站開發技巧

ASP.NET Blazor：主要應用在SPA類型的應用程式，在用戶端處理互動式邏輯。

👍學習推薦

l   【UAC498】從設計到實作ASP.NET Core Blazor網站開發

👍相關學習推薦

l   【UN398】.NET MAUI跨界先鋒從桌面到移動的全平台開發旅程

l   【UN492】.NET精粹的極致技術解密之旅

l   【UAC399】ASP.NET Core Web API/Minimal API微服務開發實務

l   【GPTGH】使用GitHub Copilot提高Coding生產力-程式設計AI詠唱

l   【OPAI】使用Visual Studio 2022 開發Azure OpenAI應用程式

l   【U2249】掌握Vue.JS漸進式前端框架開發技術

👉👉👉索取微軟網站開發技術系列課程資料