ASP.NET MVC設計實例
前文我們介紹了MVC設計模式實現基本原理及組成，其基本組成主要包括控制器、視圖、模板等部分。目前絕大多數Web端程序設計語言已經支持MVC設計模式，進行Web應用程序開發，本文主要以ASP.NET為例對MVC模式顯示進行簡單說明。
開發工具
1、開發平臺環境
本文選擇MVC實現編程語言為C#程序設計語言，所使用的的應用架構為.NET集成開發環境。因此開發工具選擇使用了微軟公司開發的Visual Studio集成開發工具與環境。Microsoft Visual Studio Express是Visual Studio的輕量級版本，在ASP.NET應用開發方面硬件需求較低。本例使用版本為Microsoft Visual Studio Express 2012版本，軟件運行起始頁如下圖所示：
Microsoft Visual Studio Express開發工具
2、MVC版本
ASP.NET MVC 是微軟公司開發的Web應用程序框架Framework，用於實現基於MVC模式的Web應用程序開發，其最新版本為ASP.NET Core MVC。本例使用Visual Studio Express版本為2012，安裝MVC版本為MVC4。
asp.net mvc4
3、Razor佈局頁面
在進行Web應用程序開發過程中，對於不同頁面共同部分，如頁頭、頁腳等部分，為避免重複編碼，一般使用頁面母版或者佈局頁面形式對重複部分進行模板化設計。在ASP.NET Web開發過程中也提供了類似模板的功能，即Razor佈局頁面。
Razor佈局頁面
Razor佈局模式下，頁面共有模板部分與內容部分是分離的，主要採用以下標記對內容與模板結合進行說明：
a.@RenderBody（）：視圖內容需要在@RenderBody（）部分呈現出來。
b.@RenderSection（）：在模板中定義節，視圖對應部分內容在節標記處呈現。
c.@RenderPage（）：模板鏈接呈現一個頁面。
4、Pure前端框架
本例設計使用雅虎公司提供的輕量級前端響應式頁面設計、佈局框架進行進行頁面開發。使用方法較為簡單，只需要在MVC模式下的模板頁面中引入對應CSS樣式文件即可。引入方式描述如下圖：
Pure前端框架使用
開發實例
為演示ASP.NET下MVC開發過程及工作基本原理，本例使用Pure前端響應式框架技術進行前端頁面佈局設計，使用ASP.NET MVC進行了Demo的設計與開發。Demo首頁面實現效果如下所示：
首頁面設計運行效果
在線考試作答頁面運行實際效果如下圖：
考試頁面設計及運行效果
考試成績顯示頁面運行效果如下圖：
成績顯示頁面設計及運行效果
本例設計實現主要由三個頁面組成，分別為登錄頁面、在線考試頁面、成績顯示頁面。設計實現過程描述如下：
1、定義頁面模板
本例三個頁面具有共同部分進行抽取，構成頁面模板，模板名稱_IndexLayout.cshtml。模板定義描述如下：
頁面模板定義
2、定義視圖
本例實現效果主要頁面包括三個不同頁面，因此需要基於模板定義三個不同視圖。在業務邏輯操作完成之後可使用視圖進行輸出顯示。三個視圖分別為exam.cshtml考試頁面、Index.cshtml首頁視圖、GetScore.cshtml結果頁面。考試頁面視圖定義描述如下：
考試頁面視圖
考試成績顯示頁面視圖定義如下所示：
返回頁面結果視圖
在線考試首頁面視圖定義如下所示：
首頁面視圖
3、業務邏輯Model模型類定義
本案例業務邏輯是將前端獲取的用戶提交數據進行分析。為演示我們直接在業務邏輯實現方法內部定義答案數組，通過答案數組與獲取的用戶作答結果數組進行對比分析，計算成績。該類定義描述如下：
業務邏輯模型類
4、定義控制器及方法
前端業務請求按照Home/Index格式進行求請發送，服務器端通過控制器接收用戶請求，Home為控制器名稱，Index為對應方法。本例使用默認HomeController控制器，對該控制器添加新方法，分別用於實現點擊考試按鈕響應及考核結束按鈕響應。方法描述如下：
控制器方法定義
使用Pure+ASP.NET+MVC進行網頁設計與實現整體案例分析及實現效果描述如上所示，本案例提供完成參考代碼，如有需要請關注之後私信索取。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回覆。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：
閱讀更多 kid編程 的文章
