Embed Size (px)
DESCRIPTION
原本對企業內部分享的資料，粗淺地介紹如何快速上手與體驗MVC4的優點。
Citation preview
How to ASP.NET MVC4
201408 Training MaterialDaniel.Chou
下午好，有準備咖啡了嗎 ?
希望不會 zzzZZZ…
時間關係這次 MVC 中先不著墨在
Model….
DEMO Project:• 歡迎下載使用，有任何建議或問題請不吝指教。• https://github.com/danielchou/MVC4Demo
Agenda
• Why MVC?• How to install?• Start MVC Project
– URL 發動 !– Routing 解析– Controller 決定流程– Action 決定轉出格式– View 輕薄的外衣。
• Q&A
ASP.NET MVC 其實就是優點• ASP.NET MVC gives you a powerful, patterns-based way to
build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards.– Patterns-base 習慣大於配置– SoC ”關注點分離 !”，流程與 UI分離。– Enjoyable(?)、 agile 開發更快速– TDD-friendly 單元、整合、自動測試架構。– Latest web standards.符合最新網頁標準
ASP.NET MVC 優點• 很容易：
– 開發行動裝置。– 建構 HTTP API網站。– AJAX實作。– 整合前端程式框架， jQuery、 Knockout、 AngularJS。– 分工、平行開發– 擴充架構、維護
• 特色：– 沒有 PostBack– 開放原始碼– Layout套版沒有伺服器控制項的羈絆– 支援多種 ViewEngine– Routing支援– 網頁流量低、執行速度快。
ASP.NET MVC 缺點• 以下都不能：
– ViewState– Page Trace– ASP.NET Event Model– Server Control (GridView, FormView,….)
• 較辛苦，對有些人要重頭學起。– HTTP 我怎會不懂 ?– 熟悉 JavaScript… 很難 debug耶 ?– 網頁 HTML基本組成 我又不是美工 ?– 不再拖拉開發 寫得怎可能比我用拉的快 ??
– 前端 ?後端 ? ….?
MVC 其實容易卡在“基礎“
只是還原網頁開發應有的樣子
網頁標準－ Http Method• 80 port、瀏覽器發出要求。
– GET– POST– PUT– DELETE– HEAD– CONNECT– …
– Ref • http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
網頁標準－ Http Method － Rest 架構• 80 port、瀏覽器發出要求。
– GET 查詢。– POST 修改。– PUT 新增。– DELETE 刪除。 – HEAD– CONNECT
網頁標準－ Http Status Code• 解析網頁狀態很重要的 !
– 200： OK，伺服器成功傳回網頁– 301：Moved Permanently ，永久轉址。– 304： Not Modified，未修改 (Cached)– 400： Bad Request，伺服器無法解讀該要求的語法。– 403： Forbidden，權限有問題。– 404： Not Found，找不到檔案。– 500： Internal Server Error，伺服器遭遇錯誤。– ……….
– Ref:• http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html• https://support.google.com/webmasters/answer/40132?hl=zh-Hant
Chrome Devtool• Or Firebug、 Fiddler….
– JS除錯、效能調教、資料查看、 Ajax、 JSON– 不熟悉的可來這邊免費上課
• http://discover-devtools.codeschool.com/
ASP.NET Webform 為何以前不用懂這些 ?• 歷史淵源的• 網頁程式剛崛起• 大家習慣Winform開發，事件驅動• 在無狀態的Web上硬是模擬出狀態 (ViewState)
學這麼多永遠學不完阿
討論一下你的學習 c/p 值• 微軟
• MVC2 2010• MVC3 2011• MVC4 2012• MVC5 2013• vNext 2014• 真是沒完沒了… .XD (我會建議選取部分使用… .)
• 網頁開放標準– Javascript EMCAcript6– CSS CSS3– HTML(4) HTML5
• JSP,PHP,Ruby,Python…甚至 mobile也利用這些標準
User 的需求、喜好永遠推動新技術的產生
當系統功能日益龐大複雜…
MVC 架構分工、維護、擴充
會讓你蠻開心的
MVC 就是切三層，各司其職• Model資料 要厚肥• Controller 流程 要清楚• View 外皮 要簡單
MVC 實務上的架構是這樣…• Model
– Repository 資料倉儲– Service 商業邏輯– Interface 介面層
• Controller• View
– Helpers– JS
• KnockoutJS、 AngulerJS
應該切入正題了…
Agenda
• Why MVC?• How to install? • Start MVC Project
– URL 發動 !– Routing 解析– Controller 決定流程– Action 決定轉出格式– View 輕薄的外衣。
• Q&A
Which version?• VS2010 MVC4 今天介紹這個• VS2012 MVC5
– .NetFramework 4.5+– Visual Studio 2012
• VS2014 MVC6 – vNext– No more System.Data, lighter...– Linux、MAC、 RaspbarryPi… available.– Azure Cloud
ASP.NET MVC4 features.• 對行動裝置平台支援更好，更加開放標準 !!
– ASP.NET web API– Project templates enhancements– Mobile project template– JQuery mobile and View switcher– Bundling and minification JS,CSS– OAuth, OpenID
MVC4 tools update for VS2010• http://www.microsoft.com/en-us/download/details.aspx?id=30683
新增專案
Create a new project
• 預設是這些– Empty– Basic– Internet App– Intranet App– Mobile App– Web Api
• 還有很多其他…– SingalR(Real-Time)
• By NeGet install.
ASP.NET Family
現在你可以做到這樣…
PHPNodeJS Django
Portable、Mobile Devise
預設登入功能• 自動產生MSSQL.EXPRESS• Responsive Website
– 考慮平板裝置模板。– MVC5支援 Bootstrap。
看一下產生了哪些檔案 ?• 參考 HomeControlls對應的 ViewPage
DEMONew a MVC4 project.
可收工了…
No, 只是先幫你 Scalffolding…
該怎改起 ?
Agenda
• Why MVC?• How to install?• Start MVC Project
– URL 發動 !– Routing 解析– Controller 決定流程– Action 決定轉出格式– View 輕薄的外衣。
• Q&A
MVC 資料流向
1
2 3 4
5
HTTP Request.
• 先討論 Controller怎接收 URL?
1
其實中間有個 RoutingManager 會幫你處理 .
Routing Manager
你組出的 URL 是不一樣的。• Webform的網址
– http://Server/Products/ProductDetails.aspx?kind=sport&id=3• MVC的網址
– http://Server/Products/Details/sport/3 – Why Rewrite Routing
• URL更直覺、有意義、更易 SEO!• Webform也做得到，但你不會想這樣做。• IIS改裝後會不穩定、效能差。
• 其實MVC網站各種 URL都可以解析得出來 !
RoutingTable !!!
從 Global.asax –RoutingConfig開始
– 初始化就產生了。– System.Web.Routing;– App_Start/RouteConfig.cs.– 但 Global.asax 在MVC6之後消失了
APP_Start 內其他類別的作用 ?• AuthConfig.cs
• 跟 Google、 FB、 Twitter、MS認證接通。• BundleConfig.cs
• 壓縮 js、 css檔案、最小化，網站效能更好。• FilterConfig.cs
• 註冊過濾器，讓程式碼共用更簡單。• WebApiConfig.cs
• WebApi routing path設定。• More…
再回到 Routes.MapRoute
• 網址樣式解說：• name:可設定多組 route(樣式 ),但名稱需要唯一• url: 除了controller,action不變之外，其他可自訂• defaults:傳入的網址或比對不到就以此決定， id沒有設定也會通過。
• 比對順序條件– 由上至下。– 對了才會 mapping到 controller內。
Route 比對順序
• 如果遇到下列網址，該如何比對 ?– http://localhost/– http://localhost/About– http://localhost/Account/Register
Route 比對順序
• 將 Pitfall routing打開，測試看看。– http://localhost/ Home/Index OK– http://localhost/About/ Home/AboutOK– http://localhost/Account/Register Hom/Account/Register 404? 找不到了
靈活設計你的 URL
• 不用費心自己處理解析 mapping的問題。• NuGet上有很多知名的 Routing的套件。
– http://www.codeproject.com/Articles/641783/Customizing-Routes-in-ASP-NET-MVC
How to Debug Routing?• 新手很需要這工具 !• NuGet a RouteDebugger
– Current Version 2.1.4– https://www.nuget.org/packages/routedebugger/
How to Debug Routing?• 長在你頁面最下方。• Dev時可觀察• Release移除。
Demo-Route
Agenda
• Why MVC?• How to install?• Start MVC Project
– URL 發動 !– Routing 解析– Controller 決定流程 – Action 決定轉出格式– View 輕薄的外衣。
• Q&A
Controller ：負責控制流程• 直接產生， ex:ProductionController
– Scaffold選項。
假設為 ProductController• 繼承 Controller• Index ActionResult預設會產生。
– 預設為 [HTTPGet]– 這時候還沒有 ViewPage。
ActionResult 之間資料傳遞• 種類：
– ViewData• 最主要的方式• 只活在同一個 Action內。
– ViewBag• 同 ViewData• 支援物件式寫法， this.ViewBag.Title=“Hello, ViewBag”;
– TempData• 可活在同一個 Request, 可跨 Action傳遞。
• 可從 Controller內丟到 ViewPage外面。• 上面的雖好用，但建議用強型別 (物件 )傳遞資料。
ActionResult 接收表單資料• 同樣可以用 Request物件• 建議用強型別 (物件 )傳遞資料。• DefaultModelBinder類別
– 自動化資料轉換– 又稱為“Model Binding”– 可重複使用
就這樣很簡單，看你 Controller 怎設計而已
DEMO
ViewData 拋到 ViewPageDefaultModelBinder
Agenda
• Why MVC?• How to install?• Start MVC Project
– URL 發動 !– Routing 解析– Controller 決定流程– ActionResult 決定轉出格式– View 輕薄的外衣。
• Q&A
Controller 與 View 中間還有個 Action
• 嚴格說 View只是一個 ActionResult其中一個可轉化的選項。
ActionResult
ActionResult 超好用 !• ActionResult 格式 產出什麼 ?
– ViewResult HTML– PartialViewResult HTML– ContentResult 純文字– EmptyResult 空白內容– FileResult File(Img,PDF,….)– HttpStatusCodeResult Http Response Status– JavaScriptResult Javascript– JsonResult JSON– RedirectResult 轉址– RedirectToActionResult 轉到某個 Action
參考 AccountController 的 Action Filter
Action Filter• 屬性類別 (Attribute Class)
– 可套用到 Controller層級。– Action方法執行過程中，增加固定動作。– 程式碼更乾淨，好維護 !
• 依照實作介面可區分為：– Action Filter– Result Filter– Authorize Filter– Exception Filter
Agenda
• Why MVC?• How to install?• Start MVC Project
– URL 發動 !– Routing 解析– Controller 決定流程– ActionResult決定轉出格式– View 輕薄的外衣
• Q&A
DEMO
自訂 CROS Attribute.改造我的 JSONResult.
ViewPage 如何新增 ?• 按右鍵出現加入檢視。• 主版頁面
自動產生 Views/Production/Index.cshtml• @： Razor符號
– 新 ViewEngines, MVC3開始支援。– 簡潔、速度快、易學– 可通透到 Server端 C# code，但注意效能。– Layout套用主版面
_Layout.cshtml– 共用 template、主版頁面都放在 Views/Shared內。– @RenderBody() 由內往外執行
Web Helpers• 取代 ASP.NET Server控制項• 內建、第三方、擴充自建。• 內建舉例如下：
– @Html.TextBoxFor(m=>m.Birthday)– @Html.HiddenFor(m=>m.ID)– @Html.ActionLink(“linkText”,”Action”,”Controller”,new{});– @Html.Partial(“ViewPageName”,Model);– ….太多了
DEMO
Razor 運算式
流程、 UI 可以分工了 !!關注點分離 SoC
Seperation of Concern
佈署注意事項• .Net Framework 4+，注意獨立安裝程式。• IIS中新增萬用字元對應 (因為不在用副檔名對應了 )
• Windows 2003 sp2 + IIS 6.0也可，請參照：• http://danielchou4.blogspot.tw/search/label/ASP.NET%20MVC
M 、 V 、 C 每一塊都可著墨很多，
但 Routing 最重要 !
Q & A
