###### tags: `MVC` # MVC 架構與說明 ## 介紹 MVC 一種軟體架構模式,把系統分成三個種核心,分別為:Model, View, Controller。 主要將網頁分成邏輯處理(物件操作)、視覺呈現與路由控制(發送、接收請求),各種元件 處理不同的工作,強調職責分離,開發與維護人員可以更快速對於目的與問題,找到該 處理的程式,讓程式的修改與功能擴充簡化,提高程式可用性。 ### Model * 代表資料 * 用類別(Class)描述 * 資料庫操作 ### View * 前端使用者介面(HTML/CSS) * 使用者可以查看資料並且修改 * 使用 Razor 語法可以輕鬆的和 Model 及 Controller 溝通 ### Controller * 路由控制 * 處理使用者的請求 * 透過 View 發送 HTTP Request,經過處理後再返回 View ## 特色 * Model : 包含所有的邏輯、物件,內容豐富。 * Controller : 盡量輕量,這裡盡量不撰寫邏輯與物件,而路由以傳遞資料為主。 * View : 僅呈現,故盡量單純(笨笨)的呈現即可。 ![](https://i.imgur.com/5wOaVhg.png) ### 優點: 1. 使程式結構更加直覺 1. 增加程式可用性 1. 程式方便管理 1. 程式擴充性高 1. 有例於團隊開發 ### 缺點: 1. 不適用於小型專案 1. 管理文件增加 1. 嚴謹的系統架構與規劃 1. 需要重覆的測試 ### MVC在整個網頁系統流程 使用者在網頁(View)表單(請求)送出後,皆會透過 Controller 接收後,決定給哪個 Model 進行 處理。所有需求完成後,Controller 再回傳相對的結果,讓網頁(View)呈現相關資訊。 ![](https://i.imgur.com/xegIZth.png) ## 建立 MVC 專案步驟 ### Step1. 開啟 Visual Studio 2019,建立新的專案 ![](https://i.imgur.com/6QyRkHN.png) ### Step2. 選擇 ASP.NET Web Application ![](https://i.imgur.com/JpIfPOF.png) ### Step3. 設定新專案名稱 ![](https://i.imgur.com/wedOdXY.png) ### Step4. 選擇 MVC ![](https://i.imgur.com/NPtW9UO.png) ### Step5. 檔案結構 * App_Data: 應用程式相關資料(LocalDB, .mdf files, xml)。 * App_Start: 啟動時會執行設定檔案,例如: BundleConfig.cs, FilterConfig.cs and RouteConfig.cs。 * Content: 靜態的檔案(css/images/icons),預設有 bootstrap.css, bootstrap.min.css and Site.css。 * Controllers: 處理用戶的請求並返迴響應。 * Models: 類別檔案包含公開屬性,用來存取資料。 * Scripts: JavaScript 檔案。 * Views: * 所有 .cshtml 檔案 * 每個 Controller 獨立的資料夾,例如: Home * Shared 資料夾包含共用的檔案,例如: _Layout.cshtml * Global.asax: 編寫響應應用程序級別事件而運行的程式碼,例如: * Application_BeginRequest * application_start * application_error * session_start * session_end ![](https://i.imgur.com/6lYxqfh.png)