asp.net mvc 一教就上手
DESCRIPTION
2012/11/25 Study4.TW Sky -Asp.Net MVC 一教就上手TRANSCRIPT
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 程式
使用者介面
商業邏輯 介面邏輯
SQL
我是一隻ASP.Net 包山
包地也包海
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流程
• 決定 View
Controller • 取得傳遞進
來之資料• 顯示資料
View
網址的不同
ASP.NET
ASP.NET MVC
ASP.NET MVC 網址對應關係
優點
擁有更佳的 SEO
安全性提高 更加清晰的網址關係
實戰 ASP.NET MVC
建立一個 About 介紹頁 建立一個 Index 主頁 主頁要建立一個 Textbox
主頁要建立一個 Button
主頁要放置一個 ul 標籤
ASP.NET SIGNALRReal 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.JSJavaScript 的 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 AZUREWeb 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