ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
1 like2,140 views
本文介绍了 ASP.NET MVC 4 RC 的新功能，包括 ASP.NET Web API、移动项目模板、异步控制器支持、数据库迁移及捆绑与最小化功能。文档还详细描述了如何将现有的 ASP.NET MVC 3 项目升级到 MVC 4，并提供了相关的开发环境建议和步骤。最后，文章通过示例展示了如何使用这些新特性来提升开发效率。
![ 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一
除掉一些不必要 [字元] 與 [空白]
使用方式..
Bundling and Minification
76](https://image.slidesharecdn.com/asp-130719132605-phpapp02/85/ASP-NET-MVC-4-twMVC-4-76-320.jpg)
![ 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一
除掉一些不必要 [字元] 與 [空白]
使用方式..
Bundling and Minification
77](https://image.slidesharecdn.com/asp-130719132605-phpapp02/85/ASP-NET-MVC-4-twMVC-4-77-320.jpg)
![ 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一
除掉一些不必要 [字元] 與 [空白]
使用方式..
Bundling and Minification
78](https://image.slidesharecdn.com/asp-130719132605-phpapp02/85/ASP-NET-MVC-4-twMVC-4-78-320.jpg)
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
- 1. ASP.NET MVC 4 RC 新增功能介紹 ASP.NET MVC 4 就快出來了，你跟上了嗎？
- 2. 中文姓名：吳俊毅 英文姓名：Gelis Wu Email: [email protected] MSN：[email protected] Blog：http://www.dotblogs.com.tw/gelis/ 專長：.NET 相關 Solution、Web 應用、分散式應用程式 開發、Architecture Design、系統分析／設計。 About Me MVP Adward 2011/2012 Visual C# 2
- 4. 雖然MVC 4 有些新增功能到了RC的時候被移除掉了，不過 它還是可圈可點之處啦。 感覺 MVC 4 RTM 好像拖了很久！不過開發人員是辛苦的， 所以我們也不要太計較。 雖然讓我們等了很久，不過我們相信，我們的等待是值得的 RTM正式版已於2012/8/15上市了 寫在前面 4
- 5. 所使用的開發環境 如何將 MVC3 的專案升級成 MVC4 ASP.NET MVC 4 RC 新增功能介紹 大綱 5
- 6. 所使用的開發環境 如何將 MVC3 的專案升級成 MVC4 ASP.NET MVC 4 RC 新增功能介紹 大綱 6
- 7. Windows 7 Home Premium Visual Studio 2010 Ultimate &.NET Framework 4.0 Visual Studio 2012 Ultimate RC & .NET Framework 4.5 RC 在Visual Studio 2012 RC 中使用的版本已經是MVC 4.0 RC的 版本 建議使用 Windows Platform Installer 4.0 來安裝。 當然也可以下載Visual Studio 2010使用的 MVC 4.0 RC 版本 或者使用8/15最新Release的Visual Studio 2012 RTM 所使用的開發環境 7
- 8. 所使用的開發環境 如何將 MVC3 的專案升級成 MVC4 ASP.NET MVC 4 RC 新增功能介紹 大綱 8
- 9. 要將 ASP.NET MVC3 轉成 MVC4 絕招、第一式、乾坤大挪 移。 所謂的乾坤大挪移就是 COPY 因此我們首先得建立一個空的ASP.NET MVC 4.0 的專案 第一式、乾坤大挪移 9
- 13. 首先先建立好一個空的ASP.NET MVC 4.0的應用程式。 步驟一、先搬Model 13
- 14. 首先先建立好一個空的ASP.NET MVC 4.0的應用程式。 步驟一、先搬Model 如果Namespace有變 動，記得要修改。 14
- 21. 步驟三、續搬View(2) 21
- 22. MVC 4 中新增兩個 appSeettings 的屬性值 MVC 3 相關參考版本 MVC 4 相關參考版本 步驟四、確認 web.config 22
- 24. 所使用的開發環境 如何將 MVC3 的專案升級成 MVC4 ASP.NET MVC 4 RC 新增功能介紹 大綱 24
- 25. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification ASP.NET MVC 4 RC 新增功能介紹 25
- 26. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification ASP.NET MVC 4 RC 新增功能介紹 26
- 27. 同 WCF Data Service ，且支援RESTful介面，但是它更簡化，更簡 單，易於實作。 只支援HTTP協定，透過 GET/POST 方式提供遠端使用XML或JSON資料格 式進行呼叫與使用。 更容易讓多種裝置使用：如平板、智慧型裝置、桌上型電腦、其他平台 服務、瀏覽器… 支援非同步執行特性，有更加之延展性 支援 ASP.NET MVC 的 Routing 功能 強行別的HttpRequestMessage與HttpResponseMessage，因此模型繫 結與驗證更加容易。 認識 ASP.NET Web API 27
- 28. Web API vs. WCF Service vs. WCF Data Service 28
- 29. ASP.NET 4.5 Web API 架構 29
- 30. 使用 Visual Studio 2012 RC 的 Web API 樣板建立 Web API 應用程式。 使用 jQuery 取得資料。 Demo 1 30
- 31. 範例實作、從無到有，建立一個 CRUD 應用程式 Demo 2 31
- 32. 使用 SQL Express Vistual Studio 2012 RC 會提示資料庫不相容，手動升 級即可。 Demo 2 (續) 32
- 33. 使用 SQL Express Vistual Studio 2012 RC 會提示資料庫不相容，手動升 級即可。 Demo 2 (續) 33
- 34. 使用 SQL Express Vistual Studio 2012 RC 會提示資料庫不相容，手動升 級即可。 Demo 2 (續) 34
- 35. 使用 SQL Express Vistual Studio 2012 RC 會提示資料庫不相容，手動升 級即可。 Demo 2 (續) 35
- 36. 當你沒有引用 JSON.NET 物件時，無法掛載應用程式 Self-Host 掛載 Web API (1) 36
- 37. 當你沒有引用 JSON.NET 物件時，無法掛載應用程式 Self-Host 掛載 Web API (1) 37
- 38. 必須以系統管理員權限執行，否則…… Self-Host 掛載 Web API (2) 38
- 39. 將 EDM Model 包裝成 Class Library 建立 Self-Host Console 專案 將 MyCusAPIController.cs 檔案加入Self-Host Console 專案中 Self-Host 掛載 Web API (3) 39
- 40. Seft-Host 基本必須安裝的套件 Self-Host 掛載 Web API (4) 40
- 41. Seft-Host 基本必須安裝的套件 Self-Host 掛載 Web API (4) 41
- 42. 撰寫 Self-Host 掛載程式碼 Self-Host 掛載 Web API (5) 42
- 43. Demo… Self-Host 掛載 Web API (6) 43
- 44. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification Enhancements to Default Project Templates 44
- 45. 45
- 46. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 46
- 47. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 47
- 48. 判別是否使用手持智慧裝置上網 使用 檔名 來辨別要顯示的檔案 從mobile的MVC專案複製相關的 檔案，並將檔案名稱修改為 XXX.mobile.cshtml mobile的jQuery相關檔案也必 須複製過來。 Display Modes 48
- 49. 屬於 mobile 使用的 jQuery 檔案可透過 NeGet 來安裝 Display Modes (2) 49
- 50. 若您還要區分不同的掌上型裝置檢視不同的View時，可以在 Global.asax.cs 加入如下敘述 Display Modes (3) 50
- 51. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Azure SDK Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 51
- 52. 讓掌上型智慧裝置使用者也可以選擇使用PC版本檢視網頁 目前Yahoo、MSN 等大型入口網站皆提供此功能。 透過 User Agent 判斷，因此可以做到特定平台使用特定的 View 通常與 Display Modes 一起使用。 jQuery Mobile, the View Switcher, and Browser Overriding 52
- 53. 使用方式，在Views/Shared的底下放置 _ViewSwitcher.cshtml檔案，並撰寫如下內容： jQuery Mobile, the View Switcher, and Browser Overriding (2) 53
- 54. 接著撰寫對應的 ViewSwitcherController 記得在 _Layout.mobile.cshtml 加上 jQuery Mobile, the View Switcher, and Browser Overriding (3) 54
- 55. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 55
- 56. 新增可支援非同步作業傳回值的 Task 類別 在需要非同步執行的方法中使用 async 關鍵字 在實際需要等待傳回值的方法前使用 await 關鍵字來等待結果回傳。 新版非同步程式撰寫支援 public async Task<ActionResult> MyCustomers() { var myApi = new HttpClient(); myApi.BaseAddress = new Uri("http://localhost:1168"); Task<HttpResponseMessage> response = myApi.GetAsync("api/MyCusAPI/"); IEnumerable<Customers> result = await response.Result.Content.ReadAsAsync<IEnumerable<Customers>>(); return View(result); } 56
- 57. 新增可支援非同步作業傳回值的 Task 類別 在需要非同步執行的方法中使用 async 關鍵字 在實際需要等待傳回值的方法前使用 await 關鍵字來等待結果回傳。 新版非同步程式撰寫支援 public async Task<ActionResult> MyCustomers() { var myApi = new HttpClient(); myApi.BaseAddress = new Uri("http://localhost:1168"); Task<HttpResponseMessage> response = myApi.GetAsync("api/MyCusAPI/"); IEnumerable<Customers> result = await response.Result.Content.ReadAsAsync<IEnumerable<Customers>>(); return View(result); } 57
- 58. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 58
- 59. Code-First 功能再延伸 資料表Table不需要重新建立，動態加入新欄位 設定更簡單，更易於使用 Database Migrations 59
- 60. 使用 Basic 範本這 樣就不需要手動使用 NuGet加入jQuery & jQuery UI & jQuery Validation 等套件。 如何建立Database Migrations的應用程式1 60
- 61. 在 Models 資料夾下面建立 Products 類別 (資料表) 如何建立Database Migrations的應用程式2 61
- 62. 建立 DbContext 類別 如何建立Database Migrations的應用程式3 62
- 63. 編譯後、新增一個 ProductsController 如何建立Database Migrations的應用程式4 63
- 64. 編譯後、新增一個 ProductsController 如何建立Database Migrations的應用程式4 64
- 65. 編譯後、新增一個 ProductsController 如何建立Database Migrations的應用程式4 65
- 66. 預設VS2012 會幫你將資料儲存到 如何建立Database Migrations的應用程式5 <connectionStrings> <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)v11.0;Initial Catalog=aspnet- Mvc4DatabaseMigrationApp2-20120729210048;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|aspnet- Mvc4DatabaseMigrationApp2-20120729210048.mdf" /> </connectionStrings> 66
- 67. 程式立即 可以執行 Demo… 如何建立Database Migrations的應用程式6 67
- 68. 程式立即 可以執行 Demo… 如何建立Database Migrations的應用程式6 68
- 69. 程式立即 可以執行 Demo… 如何建立Database Migrations的應用程式6 69
- 70. Data Migration 的主要功能為，在不重建、清除資料的情況下，動態 刪減欄位。 透過Package Manager Console下Cmdlet指令來完成 首先須先開啟Migration功能： 70 如何建立Database Migrations的應用程式7
- 74. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 74
- 75. ASP.NET Web API Enhancements to Default Project Templates Mobile Project Template Display Modes jQuery Mobile, the View Switcher, and Browser Overriding Task Support for Asynchronous Controllers Database Migrations Empty Project Template Add Controller to any project folder Bundling and Minification 75
- 76. 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一 除掉一些不必要 [字元] 與 [空白] 使用方式.. Bundling and Minification 76
- 77. 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一 除掉一些不必要 [字元] 與 [空白] 使用方式.. Bundling and Minification 77
- 78. 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一 除掉一些不必要 [字元] 與 [空白] 使用方式.. Bundling and Minification 78
- 79. 使用預設的BundleTable的壓縮功能 79 Bundling and Minification (2)
- 80. 不使用BundleTable的壓縮功能 80 Bundling and Minification (3)
- 81. Demo… Bundling and Minification 81
- 82. Blog: http://www.dotblogs.com.tw/gelis/ MSN: [email protected] Facebook: http://fb.me/gelis.wu 聯絡資訊 82
- 83. 83
- 84. 官網：http://mvc.tw 臉書：http://fb.me/twmvc G+ ：http://mvc.tw/+ 84 twMVC