針對寫asp.net webform 的人介紹asp.net mvc 介紹為什麼使用mvc。 Asp .Net MVC 在 Model View Controller 3個部分開發的時候會用到的內容。 和一些常用的工具、套件、方法。

1. Asp .Net MVC
ALAN TSAI
2014-07-16

2. Agenda
 為什麼要用MVC？
 MVC 基本概念
 Asp .Net MVC vs Asp.net webform
 針對每一個部分做介紹
 Model
 View
 Controller
 工具介紹、技巧

3. 為什麼要用MVC？

4. Asp .Net Webform 的崛起
 Asp .Net Webform 的起源
 優點
 不需要很懂Html。
 不需要很懂整個Http運作的概念。

5. Asp .Net Webform 的問題是什麼？
 缺點
 成也蕭何敗蕭何
 每一個Request很重
 SoC：完全沒有 Separation Of Concern
 DRY：Don’t Repeat Yourself
 如何製作API文件？
 Class Diagram？
 如何測試程式邏輯？

6. Model View Controller
Controller
輕
Model
重
View
笨
• 商業邏輯
• 處理儲存資料(DAL)
• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯
• 決定要顯示哪一個View
• 決定要帶給View什麼
Model
• 定義畫面要顯示的模板

7. Asp .Net MVC
 Open Source - http://aspnetwebstack.codeplex.com/
 V1.0 (2009年) ~ V5.2(2014年4月) – 差不多1年1版
 整個脫離了Asp .Net – 現在只要是支援OWIN的Server都可以架設
 衍生出很多不同的Framework
 Web Api 專門用來開發RESTFul
 SignalR – 用來開發及時訊息

8. Demo – 3分鐘建立CRUD功能

9. Convention Over Configuration

10. Model

11. Model 的職責
Controller
輕
Model
重
View
笨
• 商業邏輯
• 處理儲存資料(DAL)
• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯
• 決定要顯示哪一個View
• 決定要帶給View什麼
Model
• 定義畫面要顯示的模板

12. DAL (Data Access Layer)
 搭配Entity Framework
 EF 6 之後開放原始碼：https://entityframework.codeplex.com/
 不會直接使用DbContext，而是會使用
Repository Pattern + Unit of Work
 EF可以參考官網：
 http://msdn.microsoft.com/en-US/data/ee712907

13. ViewModel
 Model代表DB的樣子。
 ViewModel則是畫面要顯示的內容。
 不是所有資料都是從畫面輸入取得。
 ViewModel最好除了Property之外什麼都不要有
 ViewModel資料轉入Model可以用AutoMapper。
Model
重
View
笨
View
Model

14. 資料驗證 Data Annotation

15. 資料驗證 不只是前端
 後端也會在ModelBinding的時候做：

16. 支持那些Data Annotation
 http://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx

17. 顯示用的Annotation

18. 顯示用的Annotation
 http://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx

19. Controller

20. Controller 的職責
Controller
輕
Model
重
View
笨
• 商業邏輯
• 處理儲存資料(DAL)
• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯
• 決定要顯示哪一個View
• 決定要帶給View什麼
Model
• 定義畫面要顯示的模板

21. Controller 和 Action
 Controller只是普通的Class繼承System.Web.Mvc.Controller
 名稱都是{name}Controller – 在URL對應的時候值對應{name}的部分
 例如HomeController -> Home
 Action 則是Controller裡面的方法
 用來接受傳進來的資料並且決定要返回什麼。

22. ActionResult
 Action返回的BaseClass
 http://msdn.microsoft.com/zh-
tw/library/system.web.mvc.actionresult(v=vs.118).aspx

23. Action 傳遞資料到View的方法
 Action return的時候可以傳入一個Model - StrongType
 就是自己定義的一個Class
 也就是ViewModel
 可以使用ViewBag（ViewData）來傳入一些通用資料
 就是一個Dictionary
 ViewBag和ViewData是一樣的來源，ViewBag使用Dynamic包一層
 TempData
 存在Session，第一次被讀取之後就清空
 適合做Alert訊息的儲存媒介

24. ActionFilter
 和Servlet裡面的Filter一樣概念
 http://www.dotnetexpertguide.com/2013/02/aspnet-mvc-action-filter-life-
cycle.html
 可以被註冊在3個不同層級：
 Global
 Controller
 Action

25. ModelBinding
 傳統做法：  有ModelBinding：

26. ModelBinding 決定那些要做Binding
 可以設定BindAttribute的Include和Exclude達到White/Black List的效果。
 這邊有Security 疑慮
 使用ViewModel可以避免掉
 http://odetocode.com/blogs/scott/archive/2012/03/12/complete-guide-to-mass-
assignment-in-asp-net-mvc.aspx
 http://blog.kkbruce.net/2011/10/aspnet-mvc-model-binding6.html#.U8OdmvmSxYQ

27. RouteConfig
 App_Start/RouteConfig.cs - 設定網站的路由對應：
 可以設定每一個部分的預設值和對應的Constraint：

28. 對應Action的Attribute
 可以指定某一個Action是對應到那個HttpRequest。
 如果不給，預設是HttpGet
 假設在建立一個方法也叫做
Create(string id)，可以Compile
過，但是在Runtime會出問題。
 沒法判斷Create()和
Create(string id)的差異

29. ValidateAntiForgeryToken
 資安
 避免掉CSRF（Cross Site Request Forgery）
 在View裡面也需要加

30. View

31. View 的職責
Controller
輕
Model
重
View
笨
• 商業邏輯
• 處理儲存資料(DAL)
• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯
• 決定要顯示哪一個View
• 決定要帶給View什麼
Model
• 定義畫面要顯示的模板

32. Razor
 檔案結尾是.cshtml
 請不要使用.aspx (傳統那種)

33. Razor 語法
 單行程式碼 – 以 @做開頭
 如果是一系列的程式碼(code block) – 以@{ } 在裡面的都是程式碼
 如果在一系列程式碼想要輸出內容可以用
@: - 單行
<text></text> - 多行
 更多請參考：http://www.asp.net/web-pages/overview/getting-
started/introducing-razor-syntax-(c)

34. View的組成
 View裡面有一個參數叫做Layout
 用來指定Master Page是那一頁
 在_ViewStart.cshtml會指定預設
 在View下面的Shared資料夾是共通會查詢的

35. View如何定義模板
 在Asp .Net Webform會定義
 Asp .Net MVC使用：
 下圖表示有一個區塊叫做“scripts”，在內頁不一定(false)要有這個區塊的內容。
 然後在內頁使用：

36. View如何定義模板
 假設輸入的內容不在任何 @section 裡面
 會出現在Mater 模板裡面的 @RenderBody

37. 強型別(Strong Type)的View
 當Controller 回傳View的時候，可以帶上Model
 在View裡面可以定義此Model是什麼形態
 這樣就可以有強型別(Strong Type)的View

38. HtmlHelper
 這些是方便建立對應的Html
 有2種格式：
 {name}(弱性別) – 例如TextBox
 {name}For (強型別)– 例如TextBoxFor

39. HtmlHelper
 盡量使用有帶For的Helper
 能夠和Model所設定的Annotation對應
 在ModelBinding不容易出現問題
 有一個參數可以代入這個html的attribute
 假設attribute是class，在使用上要加上@
 常用的Html可以寫成自己的HtmlHelper
 http://www.asp.net/mvc/tutorials/older-versions/views/creating-custom-html-helpers-cs
 http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-
Application

40. Html.Raw
 Razor 預設輸出都是有受到HtmlEncode。
 用Html.Raw可以輸出純Html內容。
 請搭配AntiXss避免Xss疑慮。

41. Html.Partial 和 Html.Action
 常用頁面可以抓出來做成一個通用的頁面
 如果通用頁面的內容比較靜態
 呼叫Html.Partial來使用頁面內容 (Model等資訊是由呼叫頁面傳過去)
 常見的有網頁的header和footer
 通常view的名字前面會加下底線(_)
 如果通用頁面內容需要經過處理
 使用Html.Action (Model資訊是在Action的時候建立)
 有一個叫做Html.Render{name}（例如RenderAction/RenderPartial）的對應方法 – 產出一樣，
差別在Render{name}直接寫入畫面，而{name}則是返回一個string。

42. Template概念
 兩種Template
 DisplayTemplates – Html.DisplayFor
 EditorTemplates – Html.EditorFor
 會依照以下內容的值去找對應的Template
 [UIHint]
 [DataType]
 資料本身的Type

43. Html.DisplayFor Template
 資料夾必須為 DisplayTemplates
 放在View裡面的Shared下面表示全域
 放在個別Action的View下面表示針對某個Action

44. Html.EditorFor Template
 資料夾必須為 EditorTemplates
 放在View裡面的Shared下面表示全域
 放在個別Action的View下面表示針對某個Action

45. Url.*
 當需要某個action的連接的時候，請不要hard code連接
 使用Url.* helper
 自動代入和Route有關

46. Area
 把網站在切割
 可以獨立拆出來成為一個Project
 http://kevintsengtw.blogspot.tw/2013/07/aspnet-mvc-area-
backend.html#.U8ZEzfmSxYQ
 對於把Area獨立抽出來作為一個專案感興趣可以看
 http://elegantcode.com/2012/04/06/mvc-portable-areas/

47. Bundling And Minification
 Bundling 就是把一堆js/css捆成一包
 減少request的來回
 Minification
 減少css和js所需要的空間
 先在BundleCollection註冊ScriptBundle和StyleBundle
 要使用的時候在用 @Styles.Render 和 @Scripts.Render

48. 資源、工具、開發技巧、Library

49. Asp .net Mvc 資源
 官網 – 非常豐富
 http://www.asp.net/
 http://www.asp.net/mvc - mvc相關
 教學影片
 http://pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m1-
intro&mode=live&clip=0&course=mvc4-building
 MvcMusicStore - sample
 http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-1

50. Web API
 專門用來做RESTFul Service
 可以依照註解產生api文件：
 http://www.dotblogs.com.tw/jasonyah/archive/2013/11/23/how-to-automatically-generate-
webapi-documentation.aspx
 請參考：
 官網：http://www.asp.net/web-api
 教學影片：
http://www.asp.net/web-api/videos
 http://pluralsight.com/training/Player?author=jon-flanders&name=aspnetwebapi-m1-
introduction&mode=live&clip=0&course=aspnetwebapi

51. SignalR
 及時動態資訊
 能夠自動偵測使用WebSocket或者Long Polling
 VS 2013 的Browser Link就是使用此技術
 請參考：
 官網： http://www.asp.net/signalr
 教學影片： http://www.asp.net/signalr/videos

52. MVA 學習.Net的好地方
 Microsoft Virtual Academy (MVC) 微軟虛擬學院
 http://www.microsoftvirtualacademy.com/
 不只有開發相關，如果對Sql或者Windows Server有興趣裡面都有
 大部分是英文，不過中文內容也慢慢多，加上有些英文影片有中文字母

53. Nuget
 管理Library Package
 預設有安裝在VS 裡面
 可以動下載缺少的Dll
 官網
 https://www.nuget.org/
 中文介紹（有點舊，不過概念都一樣）
 http://blog.darkthread.net/post-2011-03-12-nuget.aspx

54. Visual Studio
 Go to View
 在Action裡面點右鍵快速定位View
 Go to Controller
 在View裡面點右鍵
 Snippet
 Mvcaction4
 Mvcpostaction4

55. Web Essentials 2013
 快速找到頁面
 直接修改頁面內容
 直接刷新頁面
 http://vswebessentials.com/

56. Automapper
 ViewModel和Model直接對應
 直接的ModelBinding有資安疑慮
 https://github.com/AutoMapper/AutoMapper/wiki/Getting-started
 設定參考：http://kevintsengtw.blogspot.tw/2013/04/automapper-
configuration.html

57. AntiXss - Microsoft Web Protection
Library
 https://wpl.codeplex.com/
 Server.HtmlEncode 是用黑名單方式處理
 AntiXss使用白名單

58. Json.Net
 把資料以Json格式輸出
 http://james.newtonking.com/json
 Documentation
 http://james.newtonking.com/json/help/index.html

59. Linq
 Linq是C#裡面非常非常重要的功能
 Linq 101 Sample
 http://code.msdn.microsoft.com/101-LINQ-Samples-3fb9811b
 LinqPad
 http://www.linqpad.net/
 此工具也有範例和教學在裡面，可以直接嘗試效果
 .Net 開發著必備

60. Q & A
謝謝大家