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

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. 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

17. 17

18. • M
• V
• V M
18

19. 19

20. 20

21. 21

22. Demo

23. 23

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

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. 資料來源
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

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

55. 55

56. 56

57. 57

58. 58

59. 59

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