Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Asp.net mvc 概觀介紹

3,954 views

Published on

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

Published in: Technology
  • Be the first to comment

Asp.net mvc 概觀介紹

  1. 1. Asp .Net MVC ALAN TSAI 2014-07-16
  2. 2. Agenda  為什麼要用MVC?  MVC 基本概念  Asp .Net MVC vs Asp.net webform  針對每一個部分做介紹  Model  View  Controller  工具介紹、技巧
  3. 3. 為什麼要用MVC?
  4. 4. Asp .Net Webform 的崛起  Asp .Net Webform 的起源  優點  不需要很懂Html。  不需要很懂整個Http運作的概念。
  5. 5. Asp .Net Webform 的問題是什麼?  缺點  成也蕭何敗蕭何  每一個Request很重  SoC:完全沒有 Separation Of Concern  DRY:Don’t Repeat Yourself  如何製作API文件?  Class Diagram?  如何測試程式邏輯?
  6. 6. Model View Controller Controller 輕 Model 重 View 笨 • 商業邏輯 • 處理儲存資料(DAL) • 畫面上面顯示的資料 來源 • 決定要呼叫那些商業邏輯 • 決定要顯示哪一個View • 決定要帶給View什麼 Model • 定義畫面要顯示的模板
  7. 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. 8. Demo – 3分鐘建立CRUD功能
  9. 9. Convention Over Configuration
  10. 10. Model
  11. 11. Model 的職責 Controller 輕 Model 重 View 笨 • 商業邏輯 • 處理儲存資料(DAL) • 畫面上面顯示的資料 來源 • 決定要呼叫那些商業邏輯 • 決定要顯示哪一個View • 決定要帶給View什麼 Model • 定義畫面要顯示的模板
  12. 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. 13. ViewModel  Model代表DB的樣子。  ViewModel則是畫面要顯示的內容。  不是所有資料都是從畫面輸入取得。  ViewModel最好除了Property之外什麼都不要有  ViewModel資料轉入Model可以用AutoMapper。 Model 重 View 笨 View Model
  14. 14. 資料驗證 Data Annotation
  15. 15. 資料驗證 不只是前端  後端也會在ModelBinding的時候做:
  16. 16. 支持那些Data Annotation  http://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx
  17. 17. 顯示用的Annotation
  18. 18. 顯示用的Annotation  http://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx
  19. 19. Controller
  20. 20. Controller 的職責 Controller 輕 Model 重 View 笨 • 商業邏輯 • 處理儲存資料(DAL) • 畫面上面顯示的資料 來源 • 決定要呼叫那些商業邏輯 • 決定要顯示哪一個View • 決定要帶給View什麼 Model • 定義畫面要顯示的模板
  21. 21. Controller 和 Action  Controller只是普通的Class繼承System.Web.Mvc.Controller  名稱都是{name}Controller – 在URL對應的時候值對應{name}的部分  例如HomeController -> Home  Action 則是Controller裡面的方法  用來接受傳進來的資料並且決定要返回什麼。
  22. 22. ActionResult  Action返回的BaseClass  http://msdn.microsoft.com/zh- tw/library/system.web.mvc.actionresult(v=vs.118).aspx
  23. 23. Action 傳遞資料到View的方法  Action return的時候可以傳入一個Model - StrongType  就是自己定義的一個Class  也就是ViewModel  可以使用ViewBag(ViewData)來傳入一些通用資料  就是一個Dictionary  ViewBag和ViewData是一樣的來源,ViewBag使用Dynamic包一層  TempData  存在Session,第一次被讀取之後就清空  適合做Alert訊息的儲存媒介
  24. 24. ActionFilter  和Servlet裡面的Filter一樣概念  http://www.dotnetexpertguide.com/2013/02/aspnet-mvc-action-filter-life- cycle.html  可以被註冊在3個不同層級:  Global  Controller  Action
  25. 25. ModelBinding  傳統做法:  有ModelBinding:
  26. 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. 27. RouteConfig  App_Start/RouteConfig.cs - 設定網站的路由對應:  可以設定每一個部分的預設值和對應的Constraint:
  28. 28. 對應Action的Attribute  可以指定某一個Action是對應到那個HttpRequest。  如果不給,預設是HttpGet  假設在建立一個方法也叫做 Create(string id),可以Compile 過,但是在Runtime會出問題。  沒法判斷Create()和 Create(string id)的差異
  29. 29. ValidateAntiForgeryToken  資安  避免掉CSRF(Cross Site Request Forgery)  在View裡面也需要加
  30. 30. View
  31. 31. View 的職責 Controller 輕 Model 重 View 笨 • 商業邏輯 • 處理儲存資料(DAL) • 畫面上面顯示的資料 來源 • 決定要呼叫那些商業邏輯 • 決定要顯示哪一個View • 決定要帶給View什麼 Model • 定義畫面要顯示的模板
  32. 32. Razor  檔案結尾是.cshtml  請不要使用.aspx (傳統那種)
  33. 33. Razor 語法  單行程式碼 – 以 @做開頭  如果是一系列的程式碼(code block) – 以@{ } 在裡面的都是程式碼  如果在一系列程式碼想要輸出內容可以用 @: - 單行 <text></text> - 多行  更多請參考:http://www.asp.net/web-pages/overview/getting- started/introducing-razor-syntax-(c)
  34. 34. View的組成  View裡面有一個參數叫做Layout  用來指定Master Page是那一頁  在_ViewStart.cshtml會指定預設  在View下面的Shared資料夾是共通會查詢的
  35. 35. View如何定義模板  在Asp .Net Webform會定義  Asp .Net MVC使用:  下圖表示有一個區塊叫做“scripts”,在內頁不一定(false)要有這個區塊的內容。  然後在內頁使用:
  36. 36. View如何定義模板  假設輸入的內容不在任何 @section 裡面  會出現在Mater 模板裡面的 @RenderBody
  37. 37. 強型別(Strong Type)的View  當Controller 回傳View的時候,可以帶上Model  在View裡面可以定義此Model是什麼形態  這樣就可以有強型別(Strong Type)的View
  38. 38. HtmlHelper  這些是方便建立對應的Html  有2種格式:  {name}(弱性別) – 例如TextBox  {name}For (強型別)– 例如TextBoxFor
  39. 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. 40. Html.Raw  Razor 預設輸出都是有受到HtmlEncode。  用Html.Raw可以輸出純Html內容。  請搭配AntiXss避免Xss疑慮。
  41. 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. 42. Template概念  兩種Template  DisplayTemplates – Html.DisplayFor  EditorTemplates – Html.EditorFor  會依照以下內容的值去找對應的Template  [UIHint]  [DataType]  資料本身的Type
  43. 43. Html.DisplayFor Template  資料夾必須為 DisplayTemplates  放在View裡面的Shared下面表示全域  放在個別Action的View下面表示針對某個Action
  44. 44. Html.EditorFor Template  資料夾必須為 EditorTemplates  放在View裡面的Shared下面表示全域  放在個別Action的View下面表示針對某個Action
  45. 45. Url.*  當需要某個action的連接的時候,請不要hard code連接  使用Url.* helper  自動代入和Route有關
  46. 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. 47. Bundling And Minification  Bundling 就是把一堆js/css捆成一包  減少request的來回  Minification  減少css和js所需要的空間  先在BundleCollection註冊ScriptBundle和StyleBundle  要使用的時候在用 @Styles.Render 和 @Scripts.Render
  48. 48. 資源、工具、開發技巧、Library
  49. 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. 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. 51. SignalR  及時動態資訊  能夠自動偵測使用WebSocket或者Long Polling  VS 2013 的Browser Link就是使用此技術  請參考:  官網: http://www.asp.net/signalr  教學影片: http://www.asp.net/signalr/videos
  52. 52. MVA 學習.Net的好地方  Microsoft Virtual Academy (MVC) 微軟虛擬學院  http://www.microsoftvirtualacademy.com/  不只有開發相關,如果對Sql或者Windows Server有興趣裡面都有  大部分是英文,不過中文內容也慢慢多,加上有些英文影片有中文字母
  53. 53. Nuget  管理Library Package  預設有安裝在VS 裡面  可以動下載缺少的Dll  官網  https://www.nuget.org/  中文介紹(有點舊,不過概念都一樣)  http://blog.darkthread.net/post-2011-03-12-nuget.aspx
  54. 54. Visual Studio  Go to View  在Action裡面點右鍵快速定位View  Go to Controller  在View裡面點右鍵  Snippet  Mvcaction4  Mvcpostaction4
  55. 55. Web Essentials 2013  快速找到頁面  直接修改頁面內容  直接刷新頁面  http://vswebessentials.com/
  56. 56. Automapper  ViewModel和Model直接對應  直接的ModelBinding有資安疑慮  https://github.com/AutoMapper/AutoMapper/wiki/Getting-started  設定參考:http://kevintsengtw.blogspot.tw/2013/04/automapper- configuration.html
  57. 57. AntiXss - Microsoft Web Protection Library  https://wpl.codeplex.com/  Server.HtmlEncode 是用黑名單方式處理  AntiXss使用白名單
  58. 58. Json.Net  把資料以Json格式輸出  http://james.newtonking.com/json  Documentation  http://james.newtonking.com/json/help/index.html
  59. 59. Linq  Linq是C#裡面非常非常重要的功能  Linq 101 Sample  http://code.msdn.microsoft.com/101-LINQ-Samples-3fb9811b  LinqPad  http://www.linqpad.net/  此工具也有範例和教學在裡面,可以直接嘗試效果  .Net 開發著必備
  60. 60. Q & A 謝謝大家

×