11/29 台北,12/06 高雄,12/20 台中
進入 ASP.NET MVC 5 的世界
小朱

MS MVP on Windows Azure
台灣微軟資深講師
Agenda
• 由 Web Form 開發人員的觀點看 MVC。
• ASP.NET MVC 概觀。

• MVC5 值得關注的新玩意。
• One ASP.NET
• MVC5 新功能
• Web API 2 新功能
• ASP.NET I...
課程目標
• 經過本課程後,您可以…
• 說明 MVC 的概念。

• 了解 ASP.NET MVC 的架構。
• 了解 One ASP.NET 的概念。
• 了解 MVC 5, Web API 2 的新功能。

• 了解 ASP.NET Id...
MVC 是啥?
• 一種程式設計典範。
• 1970 年代就有了。

• 不是用來找你麻煩的。
• 更清楚的程式職責。
• 可測試性 (Testability)。

• 習慣的改變。
• 這是 Web Form 開發人員進
階的關卡。
Web Form 的角度…
• MVC 應用程式沒有控制項。
• ASP.NET Web Form 有一堆控制項。

• 必須聽命於控制項。

• MVC 的職責分明。
• ASP.NET Web Form 的職責混合 (Page_Load O...
什麼是 ASP.NET MVC?
• 以 ASP.NET 技術實作的 MVC Pattern。
• 2007 年底開始研發,2009 年才釋出首版。

• 最新版為 5.0。

• 職責分明
• Model, View, Controller,...
為什麼要用 ASP.NET MVC?
• 習慣取代配置 (Convention over Configuration)。
• 依規則配置程式即可。

• 輕量化:
• 拋棄肥大的 ViewState。
• 套版時比 Web Form 更快更輕鬆...
習慣取代配置
• 專案結構
• 東西該擺哪就擺哪。

• 容易尋找。

• 命名規則
• Controller 的命名一定要有

“Controller”。
• 共用的 View 一定要用 “_” 開頭。
demo
• MVC 5 專案
Model
• Model 是資料來源地。
• 資料庫,資料存取層或資料服務。

• 不是一定要用 Entity Framework!
• ADO.NET DataSet/DataTable 一樣能用。
• POCO 隔離法 (將資料結構和資料...
Controller
• 接取要求訊息,查詢或繫結 Model,將結果丟給 View。
• 必須繼承自 Controller 類別。

• 定義動作 (Action)
• 處理要求。
• 決定回傳的類型。
• 一般 View
• 檔案下載
• ...
Controller 與 Model 互動
• Model Binding
• 參數的值,由 MVC 核心自動由要求接取。

• 預設 binding 已可支援多數需求。

• Model Validation
• 由 Model 端定義驗證規...
demo
• 簡單的 Controller/Model 互動。
View
• 接取 Controller 的資料,呈現給使用者。
• 沒有 Designer,只有 HTML Editor。
• 套版容易。
• 必須要了解 HTML 的結構。
• 在 HTML 內套用資料。
View
• 資料來源
• Model: 由 Controller 中的 View() 方法的參數值取得。

• ViewBag: 由 Controller 定義屬性資訊後取得。
• ViewDataDictionary: 由 Controll...
View
• HTML Helpers
• 輔助產生 HTML tags。
• 表單宣告 (Html.BeginForm())。
• 表單控制項 (Html.DropDownList(), Html.CheckBox(),
Html.TextB...
demo
• 簡單的 Controller/Model/View 互動。
ASP.NET Routing
• MVC 運作順暢的核心元件。
• 由 URL 決定跑哪個 controller, 哪個 action。

• 有預設值。
http://www.adworks.com/photo/display/1
Defa...
ASP.NET Routing
ASP.NET Routing
• 可變長度的 URL 參數
• query/{queryname}/{*queryvalues}
Area
• 更大型的 Web 應用。
• 以 Area 來切份系統區塊。
• 每個 Area 下有各自的 controller, view, model 等。
• 由 Routing 來決定進入哪個 area。
demo
• ASP.NET Routing
ASP.NET MVC 5
• 改變不小,但其實也不大。
• One ASP.NET

• Scaffolding, 驗證過濾器, 屬性路由, …
• Web API 2
• ASP.NET Identity
One ASP.NET
One ASP.NET
One ASP.NET
One ASP.NET
• 未來只會有一個 ASP.NET Core Service
• 不論是 Web Form, MVC, Web API, SPA 等都以同一個基

礎發展。
• 所有 ASP.NET 內的核心功能,Web Form, M...
OWIN (Open Web Interface for .NET)
• One ASP.NET 的基石。
• 中間層軟體的規格 (Middleware)。
• 定義向上 (framework) 的介面。
• 定義向下 (host) 的功能。
...
MVC 5 Scaffolding
• 翻譯成 “支架”。
• 所有 ASP.NET MVC 該有的元件都能在此找到。
• 簡化新增 Controller 和 View 的流程。
• 支援 Model scaffolding,自動產生相應欄位。...
demo
• MVC 5 Scaffolding
MVC 5 的過濾器
• 驗證過濾器 (Authentication Filter)
• 針對特定的 Controller/Action 或整個網站設定驗證的處

理方式。
• 實作 IAuthenticationFilter 介面。
• 繼承...
demo
• MVC 5 Authentication Filter
• MVC 5 Overridable Action Filter
Web API 2
• Web API 是類似 MVC 架構的 RESTful API 實作應用。
• 一樣有 Controller,但繼承自 ApiController。
• 一樣使用 ASP.NET Routing。
• 需要加入 Web ...
demo
• 基本的 Web API
• Web API Attribute Routing
• Web API CORS
ASP.NET Identity
• 全新的 ASP.NET 內建驗證與授權機制。
• 以 Entity Framework Code-First 方式編寫。

• 允許自訂欄位。
• 這是 ASP.NET Membership 被罵最慘的項目...
自訂會員資料欄位
注意:要先有資料庫。
1.

啟用 Database Migration (Enable-Migration)

2.

修改 Models/IdentityModel.cs ,加入新欄位。

3.

在 Database M...
demo
• ASP.NET Identity
• Facebook 驗證
• 自訂會員欄位。
總結
• ASP.NET MVC 是未來中大型應用程式的主流
• 不會也沒必要取代 Web Form。

• 但它的彈性比 Web Form 強太多了。

• MVC 5, Web API 2 等讓實作 MVC / Web API 的應
用程式...
References
• ASP.NET MVC: http://asp.net/mvc
• ASP.NET Web API: http://asp.net/web-api

• What’s new in Visual Studio 2013...
學習 MVC,你可以選擇…
• 由 6 位 MVP 合作執筆。
• 其中三位是 twMVC 社群

創始人。

• 台灣唯一有介紹 Web
API 且內容超過 200 頁

的中文書。
• 台灣最暢銷的 ASP.NET
MVC 中文書。
Introduction to ASP.NET MVC and MVC 5 Features
Upcoming SlideShare
Loading in …5
×

Introduction to ASP.NET MVC and MVC 5 Features

1,946 views
1,763 views

Published on

Published in: Technology

Introduction to ASP.NET MVC and MVC 5 Features

  1. 1. 11/29 台北,12/06 高雄,12/20 台中
  2. 2. 進入 ASP.NET MVC 5 的世界 小朱 MS MVP on Windows Azure 台灣微軟資深講師
  3. 3. Agenda • 由 Web Form 開發人員的觀點看 MVC。 • ASP.NET MVC 概觀。 • MVC5 值得關注的新玩意。 • One ASP.NET • MVC5 新功能 • Web API 2 新功能 • ASP.NET Identity
  4. 4. 課程目標 • 經過本課程後,您可以… • 說明 MVC 的概念。 • 了解 ASP.NET MVC 的架構。 • 了解 One ASP.NET 的概念。 • 了解 MVC 5, Web API 2 的新功能。 • 了解 ASP.NET Identity 的架構。
  5. 5. MVC 是啥? • 一種程式設計典範。 • 1970 年代就有了。 • 不是用來找你麻煩的。 • 更清楚的程式職責。 • 可測試性 (Testability)。 • 習慣的改變。 • 這是 Web Form 開發人員進 階的關卡。
  6. 6. Web Form 的角度… • MVC 應用程式沒有控制項。 • ASP.NET Web Form 有一堆控制項。 • 必須聽命於控制項。 • MVC 的職責分明。 • ASP.NET Web Form 的職責混合 (Page_Load Only…) • 要付出很多的心血才能職責分明。 • MVC 不好學。 • 其實是因為積習難改。
  7. 7. 什麼是 ASP.NET MVC? • 以 ASP.NET 技術實作的 MVC Pattern。 • 2007 年底開始研發,2009 年才釋出首版。 • 最新版為 5.0。 • 職責分明 • Model, View, Controller,之間互不相依。 • 比 Web Form 更高的彈性。 • 相容於現有的 ASP.NET 基本功能。 • 可客製化程度更高。
  8. 8. 為什麼要用 ASP.NET MVC? • 習慣取代配置 (Convention over Configuration)。 • 依規則配置程式即可。 • 輕量化: • 拋棄肥大的 ViewState。 • 套版時比 Web Form 更快更輕鬆。 • 強型別的支援 (coding by Intellisense)。 • 物件導向的強化: • 職責分明。 • 更具彈性。 • 可測試。
  9. 9. 習慣取代配置 • 專案結構 • 東西該擺哪就擺哪。 • 容易尋找。 • 命名規則 • Controller 的命名一定要有 “Controller”。 • 共用的 View 一定要用 “_” 開頭。
  10. 10. demo • MVC 5 專案
  11. 11. Model • Model 是資料來源地。 • 資料庫,資料存取層或資料服務。 • 不是一定要用 Entity Framework! • ADO.NET DataSet/DataTable 一樣能用。 • POCO 隔離法 (將資料結構和資料存取行為分離)。 • 特定行為的 Model • ViewModel - 給特定的 View 使用。 • 在 Controller 內做 Model 與 ViewModel 的資料交換。
  12. 12. Controller • 接取要求訊息,查詢或繫結 Model,將結果丟給 View。 • 必須繼承自 Controller 類別。 • 定義動作 (Action) • 處理要求。 • 決定回傳的類型。 • 一般 View • 檔案下載 • 重導向 • …
  13. 13. Controller 與 Model 互動 • Model Binding • 參數的值,由 MVC 核心自動由要求接取。 • 預設 binding 已可支援多數需求。 • Model Validation • 由 Model 端定義驗證規則。 • 由 ModelState.IsValid 確認資料的完整與有效性。 • 伺服器端檢查 • ModelState.AddModelError() 新增驗證錯誤。
  14. 14. demo • 簡單的 Controller/Model 互動。
  15. 15. View • 接取 Controller 的資料,呈現給使用者。 • 沒有 Designer,只有 HTML Editor。 • 套版容易。 • 必須要了解 HTML 的結構。 • 在 HTML 內套用資料。
  16. 16. View • 資料來源 • Model: 由 Controller 中的 View() 方法的參數值取得。 • ViewBag: 由 Controller 定義屬性資訊後取得。 • ViewDataDictionary: 由 Controller 定義屬性資訊後取得, 屬於鍵值對資料。 • 強型別的 Model 資源。 • @model 定義型別。
  17. 17. View • HTML Helpers • 輔助產生 HTML tags。 • 表單宣告 (Html.BeginForm())。 • 表單控制項 (Html.DropDownList(), Html.CheckBox(), Html.TextBox(), …) • 產生連結參數 (Html.ActionLink())。 • 部份檢視 (Html.RenderAction(), Html.RenderPartial())。
  18. 18. demo • 簡單的 Controller/Model/View 互動。
  19. 19. ASP.NET Routing • MVC 運作順暢的核心元件。 • 由 URL 決定跑哪個 controller, 哪個 action。 • 有預設值。 http://www.adworks.com/photo/display/1 Default Route Controller Action ID
  20. 20. ASP.NET Routing
  21. 21. ASP.NET Routing • 可變長度的 URL 參數 • query/{queryname}/{*queryvalues}
  22. 22. Area • 更大型的 Web 應用。 • 以 Area 來切份系統區塊。 • 每個 Area 下有各自的 controller, view, model 等。 • 由 Routing 來決定進入哪個 area。
  23. 23. demo • ASP.NET Routing
  24. 24. ASP.NET MVC 5 • 改變不小,但其實也不大。 • One ASP.NET • Scaffolding, 驗證過濾器, 屬性路由, … • Web API 2 • ASP.NET Identity
  25. 25. One ASP.NET
  26. 26. One ASP.NET
  27. 27. One ASP.NET
  28. 28. One ASP.NET • 未來只會有一個 ASP.NET Core Service • 不論是 Web Form, MVC, Web API, SPA 等都以同一個基 礎發展。 • 所有 ASP.NET 內的核心功能,Web Form, MVC, Web API, SPA 等都支援,不分類型。 • Visual Studio 內的範本更乾淨。 • 開發人員可基於 ASP.NET Core Service 開發新服務類型。
  29. 29. OWIN (Open Web Interface for .NET) • One ASP.NET 的基石。 • 中間層軟體的規格 (Middleware)。 • 定義向上 (framework) 的介面。 • 定義向下 (host) 的功能。 • 微軟的 OWIN 實作:Katana Project。 • Web API 2 和 ASP.NET Identity 的基礎之一。 • 可支援 IIS hosting 或 Self-hosting 能力。 • NuGet-enabled。
  30. 30. MVC 5 Scaffolding • 翻譯成 “支架”。 • 所有 ASP.NET MVC 該有的元件都能在此找到。 • 簡化新增 Controller 和 View 的流程。 • 支援 Model scaffolding,自動產生相應欄位。 • 在 Web Form 應用程式中加入 MVC 功能。 • 最小相依。 • 完全相依。
  31. 31. demo • MVC 5 Scaffolding
  32. 32. MVC 5 的過濾器 • 驗證過濾器 (Authentication Filter) • 針對特定的 Controller/Action 或整個網站設定驗證的處 理方式。 • 實作 IAuthenticationFilter 介面。 • 繼承自 ActionFilterAttribute 類別。 • 可覆寫式過濾器 (Overridable Action Filter) • 藉由覆寫來取消特定 Action Filter 的行為。
  33. 33. demo • MVC 5 Authentication Filter • MVC 5 Overridable Action Filter
  34. 34. Web API 2 • Web API 是類似 MVC 架構的 RESTful API 實作應用。 • 一樣有 Controller,但繼承自 ApiController。 • 一樣使用 ASP.NET Routing。 • 需要加入 Web API Package (NuGet)。 • 支援更豐富的 HTTP 訊息處理能力。 • Web API 2 支援了… • 屬性路由 (attribute routing)。 • CORS 的支援。 • 更多… (可參考 What’s New in Visual Studio 2013)。
  35. 35. demo • 基本的 Web API • Web API Attribute Routing • Web API CORS
  36. 36. ASP.NET Identity • 全新的 ASP.NET 內建驗證與授權機制。 • 以 Entity Framework Code-First 方式編寫。 • 允許自訂欄位。 • 這是 ASP.NET Membership 被罵最慘的項目之一… • 支援不同的驗證方式 (Windows, Forms, ADFS)。 • 支援 OAuth • Facebook, Google, Microsoft Account, Twitter • 由 OWIN 所內建。
  37. 37. 自訂會員資料欄位 注意:要先有資料庫。 1. 啟用 Database Migration (Enable-Migration) 2. 修改 Models/IdentityModel.cs ,加入新欄位。 3. 在 Database Migration 中加入新欄位的變更 (Add-Migration)。 4. 更新資料庫 (Update-Database)。 5. 修改 Models/AccountViewModels.cs,加入新欄位的部份。 6. 修改 Views/Register.cshtml,加入新欄位的部份。 7. 修改 AccountController.Register() ,加入新欄位的部份。 8. 執行程式。 http://www.itorian.com/2013/11/customize-users-profile-in-aspnet.html
  38. 38. demo • ASP.NET Identity • Facebook 驗證 • 自訂會員欄位。
  39. 39. 總結 • ASP.NET MVC 是未來中大型應用程式的主流 • 不會也沒必要取代 Web Form。 • 但它的彈性比 Web Form 強太多了。 • MVC 5, Web API 2 等讓實作 MVC / Web API 的應 用程式有了更多的選擇。 • ASP.NET Identity 提供了全新的會員管理架構,並支 援多種驗證方法。
  40. 40. References • ASP.NET MVC: http://asp.net/mvc • ASP.NET Web API: http://asp.net/web-api • What’s new in Visual Studio 2013: http://www.asp.net/visualstudio/overview/2013/release-notes • MSDN 台灣部落格上有許多的精采文章。 • twMVC: http://mvc.tw
  41. 41. 學習 MVC,你可以選擇… • 由 6 位 MVP 合作執筆。 • 其中三位是 twMVC 社群 創始人。 • 台灣唯一有介紹 Web API 且內容超過 200 頁 的中文書。 • 台灣最暢銷的 ASP.NET MVC 中文書。

×