使用 asp.net mvc 開發spa網站-微軟實戰課程日
DESCRIPTION
此為台灣微軟實戰課程日時由 twMVC 的 demo 以及 study4 的 Sky 聯合主講的「使用 ASP.NET MVC 開發SPA網站」TRANSCRIPT
前端設計與後端設計混合
設計人員可能會看不懂@
與前端資料無法完全分離!!
有多個平台，產生資料的邏輯重複
Application
http://blogs.msdn.com/b/chack/archive/2012/02/28/single-page-application-spa-mvc-4.aspx
JSONController ( MVC Web API )
Controller ( MVC ) View ( MVC )
View HTML & CSS
ViewModelJS
Model( JSON )
RESTful ( Get )
RESTful (Post)
Bin
din
gU
se
RESTful (Delete)
RESTful (Put)
渲染
Post Action
Put Action
Delete Action
Get Action
J
S
M
V
V
M
資料來源
Sky Demo
17
• M
• V
• V M
18
19
20
21
Demo
23
資料來源
JSONController ( MVC Web API )
Controller ( MVC )View ( MVC )
View - HTML & CSS
ViewModel - JS
Model – JS ( JSON )
RESTful ( Get )
RESTful (Post)
Bin
din
gU
se
RESTful (Delete)
RESTful (Put)
渲染
Post Action
Put Action
Delete Action
Get Action
J
S
M
V
V
M資料來源
Sky Demo
Demo
資源 GET PUT POST DELETE
一組資源的URI
http://example.com
/resources/
取出一整組Select
替換一整組Update
創建一整組Insert
刪除整組Delete
單個資源的URI
http://example.com
/resources/142
取出單筆Select
替換單筆Update
創建單筆Insert
刪除單筆Delete
Demo
35
Knockout.js
RequireJS
http://mvc.tw/000t
36
Knockout.js
Breeze.js Bootstrap
http://mvc.tw/000v
37
BACKBONE.js
TypeScript Bootstrap
http://mvc.tw/000q
38
AngularJS
Breeze.js
http://mvc.tw/000r
40
ASP.NET SPA Ember DurandalBreeze/
Kunckout
Breeze/
AngularHot Towel
ToDo sample ★ ★ ★ ★
Bare template ★ ★
Uses Angular ★
Uses Breeze ★ ★ ★
Uses Durandal ★ ★
Uses Ember ★
Uses Knockout ★ ★ ★ ★
Navigation and history★ ★ ★ ★
41
ASP.NET SPA Ember DurandalBreeze/
Kunckout
Breeze/
AngularHot Towel
ToDo sample ★ ★ ★ ★
Bare template ★ ★
Uses Angular ★
Uses Breeze ★ ★ ★
Uses Durandal ★ ★
Uses Ember ★
Uses Knockout ★ ★ ★ ★
Navigation and history★ ★ ★ ★
資料來源
JSONController ( MVC Web API )
Controller ( MVC )View ( MVC )
View - HTML & CSS
ViewModel - JS
Model – JS ( JSON )
RESTful ( Get )
RESTful (Post)
Bin
din
gU
se
RESTful (Delete)
RESTful (Put)
渲染
Post Action
Put Action
Delete Action
Get Action
J
S
M
V
V
M資料來源
Sky Demo
Demo
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 的程式學習筆記
http://aspnetwebstack.codeplex.com/wikipage?title=CORS%20support%20for%20ASP.NET%20Web%20API&referringTitle=Specs
55
56
57
58
59
Blog : http://demo.tc
twMVC: http://mvc.tw
G+: http://demo.tc/+
FB: http://fb.me/demo.fan
Plurk: http://plurk.com/demoshop
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
雲端資源下載• 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
提醒
上滿4堂課 交回問卷 問卷禮 + 抽獎
http://mvc.tw/000p
活動中有知名部落客/IT Pro蛙大與南霸天Jason方丈與您分享
第二屆V-Day虛擬化戰士英雄會5月8日
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032548843&Culture=zh-TW&community=0
• 本投影片所包含的商標與文字皆屬原著作者所有。• 本投影片使用的圖片皆從網路搜尋。• 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。
http://study4.tw http://mvc.tw