ASP.NET MVC 一教就上手
建置Windows Azure雲端聊天室
Sky Chang

天空的垃圾場
AGENDA
 ASP.NET MVC基本架構
 Real Time架構 SignalR
 使用Knockout.js架構JavaScript的MVVM

 將程式雲端上,使用微軟的Windows Azure
ASP.NET MVC基本架構
偉大的ASP.NET程式
我是一隻
ASP.Net包山包
地也包海
使用者
介面

商業邏輯

介面邏輯

SQL
ASP.NET CODEBEHIND

這樣就夠了嗎!?
ASP.NET的缺點
 因為有ViewState所以傳輸上過於笨重
 渲染出來的HTML過於複雜
 測試性不佳 ( 可以用MVP架構改進 )
什麼是MVC
 他是UI層(展示層)的Design Patten(設計樣式)。
 他是由Model、View、Controller所組成。
 分離原本複雜的關係。
MODEL
 MODEL
 通常為資料模型,也可以是一個DTO
 通常裡面會放許多的商業邏輯。

 View
 頁面,HTML、CSS、JavaScript皆屬於此區塊
 於此頁面撰寫顯示邏輯是合理的

 Controller
 決定運作的流程
 負責決定顯示哪一個View
 負責控制Model的傳遞
MVC 優點是什麼
 三者有點黏,又不會太黏
 Model、Controller、View,三者之間可以某種程度的獨立開發
 支援標準的HTML語法

 不在使用PostBack (沒有ViewState),所以傳輸很輕量
 容易測試的架構
那ASP.NET MVC是什麼?
 MVC是一個設計樣式的名詞,而ASP.NET MVC是擁有實作此設計樣式的
Framework的產品。
ASP.NET MVC 流程

• 使用者請求
• 決定導向
Controller

Request

Controller
• Controller流
程
• 決定View

• 取得傳遞進
來之資料
• 顯示資料

View
網址的不同
ASP.NET

ASP.NET MVC
ASP.NET MVC 網址對應關係
優點
 擁有更佳的SEO
 安全性提高
 更加清晰的網址關係
實戰 ASP.NET MVC
 建立一個About介紹頁
 建立一個Index主頁
 主頁要建立一個Textbox

 主頁要建立一個Button
 主頁要放置一個ul標籤
ASP.NET SIGNALR
Real Time Web
時代的進步
HTTP底下的模擬 POLLING
ASP.NET SIGNALR
 封裝所有複雜的處理邏輯
 快速的實現Real Time Web
HOW WORK
 Server Sent Events
 Forever Frame
 WebSocket

 Long Polling
LONG POLLING
 Cleint進行連線後就不中斷
 當Server返回時,會在建立新的連線
FOREVER FRAME
 在DOM產生一個隱藏的iframe
 利用此iframe和Server進行連線
 使用HTTP1.1的chunked encoding機制進行傳送
SERVER SENT EVENTS
 HTML5
 定義了API來打開一個HTTP連接
 通過該連接能夠獲得Server Push

 新的HTML元素EventSource
 新的MIME類型 text/event-stream
WEBSOCKET
 HTML5
 不是建立在HTTP之上
 將已經存在的HTTP連接轉換為 WebSocket連接

 直接在TCP之上定義了協議
 WebSocket定義了API和相應的協議
 WebSocket API規範中包含一個新的HTML元素:WebSocket
SIGNALR兩種模式 –
PERSISTENT CONNECTION & HUB
 persistent connection
 持久連線
 進行廣播

 HUB
 類似RPC
 Client可以呼叫Server的Function
 Server可以呼叫Client的Function
實戰!! SIGNALR HUB
 Install-Package Microsoft.AspNet.SignalR -pre
KNOCKOUT.JS
JavaScript的MVVM架構
KNOCKOUT.JS
 實作了JavaScript的MVVM架構
 利用了Binding的機制,自動更新
 建構於jQuery之下
MVVM架構
 View
 就是html區塊

 ViewModel
 View和Model的黏合劑,負責處理View的一切顯示邏輯
 也負責將拿到的Model,顯示到View

 Model
 資料模型

 View知道ViewModel,ViewModel不知道View
 ViewModel知道Model,Model不知道ViewModel
HTML和JS的關係
實戰!! 使用KNOCKOUT.JS
 將原本的程式碼改成MVVM架構
WINDOWS AZURE
Web Site
WINDOWS AZURE WEB SITE
 雲端的Web Server服務
 支援.NET 4.5、NODE.JS、PHP等眾多程式語言
 可以利用VS2012、FTP等工具佈署

 !!SignalR要加上long polling!!
實戰!! 佈署到WINDOWS AZURE WEB SITE
 將現有程式碼佈署到Windows Azure Web Site
恭喜大家
遺珠之憾
 ASP.NET MVC的Model沒有實作
 SignalR只用到Web
 KO.js只使用到最簡單的應用

 Windows Azure還有VM、Cloud Service更強大的應用
Q&A
天空的垃圾場 blog.sanc.idv.tw

Asp.Net MVC 一教就上手