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

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

Transcript

5. 前端設計與後端設計混合 設計人員可能會看不懂@ 與前端資料無法完全分離!! 有多個平台，產生資料的邏輯重複
10. Application
14. http://blogs.msdn.com/b/chack/archive/2012/02/28/single-page-application-spa-mvc-4.aspx
15. 圖片取自 ASP.NET MVC4 網站開發美學
16. JSON Controller ( MVC Web API ) Controller ( MVC ) View ( MVC ) View HTML & CSS ViewModel JS Model ( JSON ) RESTful ( Get ) RESTful (Post) Binding Use RESTful (Delete) RESTful (Put) 渲染 Post Action Put Action Delete Action Get Action J S M V V M 資料來源 Sky Demo
18. • M • V • V M 18
22. Demo
25. 資料來源 JSON Controller ( MVC Web API ) Controller ( MVC ) View ( MVC ) View - HTML & CSS ViewModel - JS Model – JS ( JSON ) RESTful ( Get ) RESTful (Post) Binding Use RESTful (Delete) RESTful (Put) 渲染 Post Action Put Action Delete Action Get Action J S M V V M 資料來源 Sky Demo
28. Demo
30. 資源 GET PUT POST DELETE 一組資源的URI http://example.com /resources/ 取出一整組 Select 替換一整組 Update 創建一整組 Insert 刪除 整組 Delete 單個資源的URI http://example.com /resources/142 取出單筆 Select 替換單筆 Update 創建單筆 Insert 刪除 單筆 Delete
33. Demo
34. 34 EmberJS http://mvc.tw/000u
35. 35 Knockout.js RequireJS http://mvc.tw/000t
36. 36 Knockout.js Breeze.js Bootstrap http://mvc.tw/000v
37. 37 BACKBONE.js TypeScript Bootstrap http://mvc.tw/000q
38. 38 AngularJS Breeze.js http://mvc.tw/000r
39. 39 Breeze.js http://mvc.tw/000s
40. 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 ★ ★ ★ ★
41. 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 ★ ★ ★ ★
43. 資料來源 JSON Controller ( MVC Web API ) Controller ( MVC ) View ( MVC ) View - HTML & CSS ViewModel - JS Model – JS ( JSON ) RESTful ( Get ) RESTful (Post) Binding Use RESTful (Delete) RESTful (Put) 渲染 Post Action Put Action Delete Action Get Action J S M V V M 資料來源 Sky Demo
47. Demo
53. 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 的程式學習筆記
54. http://aspnetwebstack.codeplex.com/wikipage?title=CORS%20support%20for %20ASP.NET%20Web%20API&referringTitle=Specs
61. Blog : http://demo.tc twMVC: http://mvc.tw G+: http://demo.tc/+ FB: http://fb.me/demo.fan Plurk: http://plurk.com/demoshop
62. 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
63. 雲端資源下載 • 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
64. 64 提醒 上滿4堂課 交回問卷 問卷禮 + 抽獎
65. http://mvc.tw/000p 活動中有知名部落客/IT Pro蛙大與南霸天Jason方丈與您分享
66. 第二屆V-Day 虛擬化戰士英雄會5月 8日 https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032548843& Culture=zh-TW&community=0
67. • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。 http://study4.tw http://mvc.tw