MVC or RazorPage 該怎麼選-從專案範本討論!
- 2020-04-08
- 11947
- 0
- Razor Pages 與 ASP.NET MVC 的差異
RazorPage 與 MVC 兩者設計的差異在於 MVC 完成一個功能會至少產生 Controller , View , Model(ViewModel),而 RazorPage 則是就只有自己本體一頁,並不是說檔案少就比較好,檔案多就比較差,這就和遵循物件導向設計模式的檔案數一定會多過大無畏開發的檔案數,但我們是整天接觸實務的開發者,如果專案還沒長大就把架構想的太大是會造成開發過程複雜化。
RazorPage 的設計很適合敏捷開發與人力不足或經常流動的公司,因為每一個功能都是相對獨立的,抽換簡單,可快速面對市場變化。快速交付持續改善,是現在網路世界的不二法門!
對於 RazorPage 開發有興趣的朋友可以參考 SkillTree 的課程😎
精準解析 Entity Framework Core 進階篇 [2025-03-16]開課 共5H
精準解析 Entity Framework Core 基礎篇 [2025-03-09]開課 共5H
現代桌面應用程式,玩轉WPF [2025-03-15]開課 共21H
情境建立
為了讓各位開發者能更清楚的體會,所以我打算用一個簡易 Blog 來做範例,預期的功能如下圖所列
Your browser does not support frames. View this map on its original site. It was created using Mindomo.
因為此 Blog 只是拿來輔助用的,所以實際功能會視需要開發
專案架構
首先來看一下兩者新專案的差異

MVC 會建立出對應的 Models, Views, Controllers 資料夾,而 RazorPage 只會有一個 Pages 這就是第一個滿大的差異,但這樣看不出來,我們來加上前端文章的功能看看差異。

加上了前端需要的文章功能後差異就明顯了,從上圖可以看到 MVC 要有一個對應的 ArticleController 放在指定目錄 Controllers 下,然後在 Views 資料夾中再建立同名的子資料夾才能把對應的 View 放在裡面,而 RazorPage 的部分只需要建立一個 Article 資料夾,就可以把需要的頁面放入了,而且這個 Article 資料夾是為了管理方便才加的,如果你的專案夠小甚至可以用前綴來省掉資料夾(ArticleIndex, ArtilceDetail)。
MVC 4 以後 Controller 不需要放在指定位置,但依習慣取代配置,我們通常還是放在那。
雖然 RazorPage 可以用前綴的方式區隔,但實務上真的不建議。
MVC 模式下的列表頁面因為不需要傳回整個文章內容所以增加了 ArticleListViewModel 做為傳遞少量資料的容器,文章內頁的傳遞容器就偷懶直接使用 DB Model。但是你可以看到 RazorPage 並沒有這樣的傳遞容器,這是為什麼呢?因為 RazorPage 每一頁都有自己的 Page Model 所以不需要 ViewModel 這種傳遞用的容器。

該怎麼選?
從這裡看到兩者設計的差異 MVC 完成一個功能會至少產生 Controller , View , Model(ViewModel),而 RazorPage 則是就只有自己本體一頁,並不是說檔案少就比較好,檔案多就比較差,這就和遵循物件導向設計模式的檔案數一定會多過大無畏開發的檔案數,但我們是整天接觸實務的開發者,如果專案還沒長大就把架構想的太大是會造成開發過程複雜化。
RazorPage 的設計很適合敏捷開發與人力不足或經常流動的公司,因為每一個功能都是相對獨立的,抽換簡單,可快速面對市場變化。快速交付持續改善,是現在網路世界的不二法門!
對於 RazorPage 開發有興趣的朋友可以參考 SkillTree 的課程😎

回應討論