使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日

2,688 views

Published on

此為台灣微軟實戰課程日時由 twMVC 的 demo 以及 study4 的 Sky 聯合主講的「使用 ASP.NET MVC 開發SPA網站」

Published in: Technology

使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日

  1. 1. 前端設計與後端設計混合 設計人員可能會看不懂@ 與前端資料無法完全分離!! 有多個平台,產生資料的邏輯重複
  2. 2. Application
  3. 3. http://blogs.msdn.com/b/chack/archive/2012/02/28/single-page-application-spa-mvc-4.aspx
  4. 4. 圖片取自 ASP.NET MVC4 網站開發美學
  5. 5. JSONController ( MVC Web API ) Controller ( MVC ) View ( MVC ) View HTML & CSS ViewModel JS Model ( JSON ) RESTful ( Get ) RESTful (Post) BindingUse RESTful (Delete) RESTful (Put) 渲染 Post Action Put Action Delete Action Get Action J S M V V M 資料來源 Sky Demo
  6. 6. 17
  7. 7. • M • V • V M 18
  8. 8. 19
  9. 9. 20
  10. 10. 21
  11. 11. Demo
  12. 12. 23
  13. 13. 資料來源 JSONController ( MVC Web API ) Controller ( MVC ) View ( MVC ) View - HTML & CSS ViewModel - JS Model – JS ( JSON ) RESTful ( Get ) RESTful (Post) BindingUse RESTful (Delete) RESTful (Put) 渲染 Post Action Put Action Delete Action Get Action J S M V V M資料來源 Sky Demo
  14. 14. Demo
  15. 15. 資源 GET PUT POST DELETE 一組資源的URI http://example.com /resources/ 取出一整組 Select 替換一整組 Update 創建一整組 Insert 刪除 整組 Delete 單個資源的URI http://example.com /resources/142 取出單筆 Select 替換單筆 Update 創建單筆 Insert 刪除 單筆 Delete
  16. 16. Demo
  17. 17. 34 EmberJS http://mvc.tw/000u
  18. 18. 35 Knockout.js RequireJS http://mvc.tw/000t
  19. 19. 36 Knockout.js Breeze.js Bootstrap http://mvc.tw/000v
  20. 20. 37 BACKBONE.js TypeScript Bootstrap http://mvc.tw/000q
  21. 21. 38 AngularJS Breeze.js http://mvc.tw/000r
  22. 22. 39 Breeze.js http://mvc.tw/000s
  23. 23. 40 ASP.NET SPA Ember Durandal Breeze/ Kunckout Breeze/ Angular Hot Towel ToDo sample ★ ★ ★ ★ Bare template ★ ★ Uses Angular ★ Uses Breeze ★ ★ ★ Uses Durandal ★ ★ Uses Ember ★ Uses Knockout ★ ★ ★ ★ Navigation and history ★ ★ ★ ★
  24. 24. 41 ASP.NET SPA Ember Durandal Breeze/ Kunckout Breeze/ Angular Hot Towel ToDo sample ★ ★ ★ ★ Bare template ★ ★ Uses Angular ★ Uses Breeze ★ ★ ★ Uses Durandal ★ ★ Uses Ember ★ Uses Knockout ★ ★ ★ ★ Navigation and history ★ ★ ★ ★
  25. 25. 資料來源 JSONController ( MVC Web API ) Controller ( MVC ) View ( MVC ) View - HTML & CSS ViewModel - JS Model – JS ( JSON ) RESTful ( Get ) RESTful (Post) BindingUse RESTful (Delete) RESTful (Put) 渲染 Post Action Put Action Delete Action Get Action J S M V V M資料來源 Sky Demo
  26. 26. Demo
  27. 27. http://kevintsengtw.blogspot.tw/2011/10/entity-framework-json-3.html#.UYPUocq5L_w http://kevintsengtw.blogspot.tw/2011/10/entity-framework-json-2.html#.UYPUp8q5L_w http://kevintsengtw.blogspot.tw/2011/10/entity-framework-json-1.html#.UYPUq8q5L_w 資料來源mrkt 的程式學習筆記
  28. 28. http://aspnetwebstack.codeplex.com/wikipage?title=CORS%20support%20for %20ASP.NET%20Web%20API&referringTitle=Specs
  29. 29. 55
  30. 30. 56
  31. 31. 57
  32. 32. 58
  33. 33. 59
  34. 34. Blog : http://demo.tc twMVC: http://mvc.tw G+: http://demo.tc/+ FB: http://fb.me/demo.fan Plurk: http://plurk.com/demoshop
  35. 35. Blog : http://blog.sanc.idv.tw FB: http://fb.me/SKY.CHANG.50 Study4.TW: http://www.study4.tw Study4.TW FB: https://www.facebook.com/Study4.tw
  36. 36. 雲端資源下載 • Free Trial Link: • http://www.windowsazure.com/en-us/pricing/free- trial/?WT.mc_id=WWE001_1032548834 • MSDN Subscription Offer: • https://www.windowsazure.com/en-us/pricing/member- offers/msdn-benefits/?WT.mc_id=WWE001_1032548834 • BizSpark Offer: • https://www.windowsazure.com/en-us/pricing/member- offers/bizspark-benefits/?WT.mc_id=WWE001_1032548834 • MPN Offer: • https://www.windowsazure.com/en-us/offers/ms-azr- 0002p/?WT.mc_id=WWE001_1032548834
  37. 37. 64 提醒 上滿4堂課 交回問卷 問卷禮 + 抽獎
  38. 38. http://mvc.tw/000p 活動中有知名部落客/IT Pro蛙大與南霸天Jason方丈與您分享
  39. 39. 第二屆V-Day 虛擬化戰士英雄會5月 8日 https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032548843& Culture=zh-TW&community=0
  40. 40. • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。 http://study4.tw http://mvc.tw

×