ASP.NET MVC 快速入門

ASP.NET Model-View-Control的作業方式:

  • View – 負責顯示畫面設計,並且顯示Control所提供的資訊,如果不需要畫面的資訊(如:XML,JSON String),Controller可以直接回傳,不需另外設計View。
  • Controller – 負責畫面與商業邏輯之間的串接,依據User Request URL,ASP.NET會依據Route Rule分配給對應的Controller的指定Method處理,該Method可以依據輸入的參數與HttpGet/HttpPost行為,來決定是否呼叫Model進行Business運作,以及決定套用哪個View來進行顯示。
  • Model – 負責商業邏輯處理的資料集(Model)與服務(Services),UI上資料填入Model後會由Controller呼叫相對應的Services並回傳資料提供給Controller進行View的串接。

MVC作業方式的優劣:

優點:
  • 適合單元測試,Model/View/Controller的功能切割明確,彼此的相依性低,容易分工作業與單獨測試
  • 網頁設計回歸傳統Html Design,與ASP.NET相依性較低,移植系統較傳統ASP.NET Web Form複雜度降低
  • 無法採與傳統ASP.NET Web Form 以Postback方式處理UI互動,減少畫面閃爍與ViewState資料保存的現象,降低網頁Size。
缺點:
  • 小功能強迫切割會造成過於繁瑣,且當View/Controller/Model彼此相依資料複雜時,彼此傳遞的資料格式會十分複雜與繁瑣。
  • UI互動依賴傳統Javascript設計,Javascript撰寫會較為複雜,無法如ASP.NET Web Form可以拉到後端處理。
  • 無法使用ASP.NET Web Form的元件(DataGrid、GridView),類似功能的開發效率會降低,須以傳統網頁設計的方式實作。

ASP.NET MVC目錄規則:


以登入畫面為例:


範例中需實作項目共有:

  1. View – LogOn.aspx
  2. Control – AccountController.cs
  3. Model – LogonModel.cs
  4. Services – AccountServices.cs

以VS2010實做上述功能順序如下(我的習慣順序):

  1. 新增AccountController.cs (View的新增依賴Controller,所以先新增Controller)
  2. AcounntController內新增Logon Method
  3. 由Logon Method產生View (LogOn.aspx)
  4. 自行於Model目錄下新增Model相關cs:LogonModel.cs/AccountServices.cs (Model在View Design前新增比較方便)
  5. 將View的Model從預設Dynamic改為LogonModel
  6. 設計View UI讓HTML元件與Model資料的綁定
  7. LogonMethod於HttpGet時的輸入參數改為LogonModel.cs
  8. 實作AccountServices.ValidateUser邏輯 
  9. 實作AccountController.Logon邏輯
  10. 完成

上述順序實作順序之畫面:

1. 新增AccountController.cs (View的新增依賴Controller,所以先新增Controller)

於Controller目錄下Add->Controller 
Controller Name取名為Account,後面Controller為必需名稱,是否直接新增Create/Update/Delete/Details Method這次先不需要)
2. AcounntController內新增Logon Method 

AccountController.cs內預設只有Index Method,分別設計兩個同名LogOn Method Method提供HttpGet/HttpPost兩種狀態分開處理,此時UserModel尚未定義。
3. 由Logon Method產生View (LogOn.aspx) 

在Method上按右鍵會有[Add View …]選項,點選後會自動產生對應的View於Controller目錄下。

此次未採用MasterPage,因此Select master page必須取消勾選。

[Add]後,於Views/Account下,產生LogOn.aspx的View。
4. 自行於Model目錄下新增Model相關cs:LogOnModel.cs/AccountServices.cs (Model在View Design前新增比較方便)

LogonModel.cs,自訂欄位UserName/Password

AccountServices.cs,提供ValidateUser Method
5. 將View的Model從預設Dynamic改為LogonModel

原本View的資料參數為dynamic

調整為自訂的Model物件
6. 設計View UI讓HTML元件與Model資料的綁定

依照ASP.NET MVC Binding語法設計UI,MVC 3.0有Razor語法,上面為原本的基本語法
7. LogonMethod於HttpGet時的輸入參數改為LogonModel.cs

此為LogOn Submit後訊息處理窗口。
8. 實作AccountServices.ValidateUser邏輯 

可延伸與後端資料庫做整合。
9. 實作AccountController.Logon邏輯

依據輸入內容呼叫登入檢查並依據結果只配對應View
10. 完成

預設畫面

登入完成

登入失敗

ASP.NET MVC結合三層式架構(USL/BLL/DAL)


展示層由原本View+Control實現,Model由TO取代,Services由BLL取代,並直接呼叫DAL處理。

專案Sample,Web內無Model目錄,Controller直接呼叫BLL

沒有留言:

橫式廣告