Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ASP.NET MVC 6 新功能探索

10,850 views

Published on

這是 Will 保哥在「2015 微軟實戰課程日」演講主題【ASP.NET MVC 6 新功能探索】的簡報。

Published in: Software
  • Login to see the comments

ASP.NET MVC 6 新功能探索

  1. 1. ASP.NET MVC 6 新功能探索 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. ASP.NET MVC 6 的三個新功能 New Features in the ASP.NET MVC 6
  3. 3. ASP.NET MVC 6 新功能 ( 1 / 3 ) • 檢視頁面元件 (View Components) (VCs) – 用來解決 Partial View 不容易解決的呈現問題 – 主要還是以 Views 為中心思考,但更加元件化 – 類似一個 mini-controller,因為他有自己的 View • 相關連結 – View components and Inject in ASP.NET MVC 6
  4. 4. ASP.NET MVC 6: 檢視頁面元件 Demo: View Components
  5. 5. ASP.NET MVC 6 新功能 ( 2 / 3 ) • 服務注入 – 可自由注入任意服務類別到 View 中使用 – 建立任意服務類別 (Service class) • 公開類別 • 非巢狀類別 • 非抽象類別 – 從 View 載入服務類別 • @inject TodoList.Services.StatisticsService Statistics – 使用服務類別 • @await Statistics.GetCount() – 在 Startup.cs 的 ConfigureServices() 註冊服務類別 • services.AddTransient<TodoList.Services.StatisticsService>();
  6. 6. ASP.NET MVC 6: 服務注入 Demo: The @inject
  7. 7. ASP.NET MVC 6 新功能 ( 3 / 3 ) • 標籤輔助方法 (TagHelpers) – 用來幫你自訂伺服器標籤的輔助方法 – 範例程式 https://github.com/aspnet/Mvc/tree/dev/samples/TagHelperSample.Web https://github.com/DamianEdwards/TagHelperStarterWeb – Taylor Mullen discusses Tag Helpers on Web Camps TV http://channel9.msdn.com/Shows/Web+Camps+TV/Create-your-own-Domain-Specific- Language-in-ASPNET-with-TagHelpers
  8. 8. ASP.NET MVC 6: 標籤輔助方法 Demo: The TagHelpers
  9. 9. ASP.NET 5 與 .NET Core 簡介 ASP.NET 5 and .NET Core Introduction
  10. 10. ASP 開發技術的歷史 • 1996 – Active Server Pages (ASP) • 2002 – ASP.NET • 2008 – ASP.NET MVC • 2010 – ASP.NET Web Pages • 2012 – ASP.NET Web API, SignalR • 2014 – ASP.NET 5
  11. 11. ASP.NET 5 是甚麼? • 一個重新設計的 ASP.NET 框架 ( 目前 ASP.NET 5 還處於預覽階段 ) • 一個精鍊的、可重組的框架, 用來建構網站與雲端應用程式。 • ASP.NET 5 完全開放原始碼, 並且發布於 GitHub 平台。
  12. 12. ASP.NET 5 的特性 ( 1 / 3 ) • ASP.NET 5 有真正「跨平台」的執行環境 – Full .NET CLR (Common Language Runtime) • 完整的 .NET 執行環境 ( 即 .NET 4.5 / 4.6 ) – Core CLR (針對雲端執行環境最佳化過的執行環境) • 將部分 Full CLR 拆解成各自獨立的 NuGet 套件 • 個別的套件可以個別更新,更新速度更快 • 所有的套件都將隨著專案部署 (伺服器不用預裝) – Cross-Platform CLR • 微軟將會官方支援 Linux 與 Mac OS X 執行環境 • 短期內可透過 Mono 執行 ASP.NET 5 • ASP.NET 5 有個完全模組化的 HTTP 要求管線 – 很多事情都跟你想像的不一樣了! 13
  13. 13. ASP.NET 5 的特性 ( 2 / 3 ) • ASP.NET 5 有個全新的設定檔管理機制 – 開發環境設定 config.json – 正式環境設定 global.json、環境變數、自動覆寫 config.json – 專案設定 project.json • ASP.NET 5 有個全新的 Session State 管理機制 – 會依據執行環境自動判斷 Session State 該寫到哪裡去 ( Cloud First ) – 所有寫進 Session 的物件都將需要「強制」序列化 ( Cloud First ) • ASP.NET 5 有個全新的 Cache 管理機制 – 全自動管理,無須再額外設定 ( Cloud First ) • ASP.NET 5 有個全新的追蹤機制 – 支援一個共用的追蹤堆疊 (Tracing Stack) – 從最底層一直追蹤到 ASP.NET Web Form, ASP.NET MVC, ASP.NET Web API, ... 通通都可以用。
  14. 14. ASP.NET 5 的特性 ( 3 / 3 ) • ASP.NET 5 提供統一 ASP.NET 框架的開發模型 – MVC、Web API 與 Web Pages 都將採用相同的開發流程、介面、類別 – 開發模型 (programming model) != 應用程式介面 (API) • ASP.NET 5 開發過程完全不需要手動執行建置動作 – 採用全新 Rosyln 編譯器平台,所有編譯動作在背景完成 – Rosyln = 編譯即服務 ( Compile-as-a-Service ) • ASP.NET 5 與 .NET Framework 的連結是綁在一起的 – ASP.NET 5 可以用 .NET 4.5.x、.NET 4.6 甚至是 .NET Core 都可自由選 擇 – 未來不用再等 Microsoft 每個數月才做一次大更新,也降低了套件相依性 • ASP.NET 5 可以更加彈性的執行在任意 Host 環境 – 依然可以跑在 IIS 上 – 也可以跑在自訂的 Console 應用程式或 Windows 服務裡 (self-host) • ASP.NET 5 在 GitHub 上開放原始碼!
  15. 15. ASP.NET 5 與舊版的相容性 • ASP.NET 4.5 (ASP.NET MVC 5) 以前的網 站 – 可以不用重寫! – 依然可以跑在 .NET Framework 4.6 上! – 請記得: • ASP.NET 5 是一種開發模型的轉變! • 如果想用到 ASP.NET 5 的新功能特性 – 必須微調部分程式碼與專案架構才能用!
  16. 16. 什麼是 "k"? • 一套用來管理 ASP.NET 5 執行環境的工具 – KVM = K Version Manager • 用來管理 KRE 的工具 • kvm list • kvm use default – KRE = K Runtime Environment • 一個 .NET 版本就是一個 KRE • klr 執行 KRE 的主要程式 • k 方便執行 klr 的批次檔 • kpm KRE 的套件管理員
  17. 17. 主要資料夾 • C:Userswill.kre – 所有 KRuntime 的根目錄 • C:Userswill.krealias – 儲存 KRuntime 版本的別名 (類似git的ref) • C:Userswill.krebin – kvm 工具所在路徑 • C:Userswill.krepackages – 每個 KRE 的存放目錄 • C:Userswill.kpmpackages – K Package Manager (裡面都是 NuGet 套件) – 以前NuGet套件放在方案的packages目錄下,現在集中放在這裡!
  18. 18. Visual Studio 2015 開發環境介紹 Visual Studio 2015 Development Environment
  19. 19. ASP.NET 5 專案範本類型 • ASP.NET Web Application – 建立 ASP.NET 5 網站應用程式 • ASP.NET 5 Class Library – 建立與 ASP.NET 5 相容的類別庫 • ASP.NET 5 Console Application – 建立可被 "k" 呼叫的主控台應用程式
  20. 20. ASP.NET 5 專案範本 • ASP.NET Web Application 的專案範本 – 上一版有的範本現在還是都有 • Empty, Web Forms, MVC, Web API, Single Page Application, Azure Mobile Service – 新版多了兩個 ASP.NET 5 範本 ( 不能勾選核心參考 ) • ASP.NET 5 Empty • ASP.NET 5 Starter Web
  21. 21. 全新的專案結構 • 新的專案檔 – *.kproj • 新的資料夾 – wwwroot • 所有靜態檔案 • 新的檔案 – global.json – project.json – config.json • 相依性與參考 – Dependencies • NPM • Bower – References • ASP.NET 5.0 • ASP.NET Core 5.0 • 自動管理套件相依性
  22. 22. 新的專案檔類型 *.kproj • 採用 MSBuild 第 14 版 • 不再需要明確列出加入專案的檔案清單 ( 版控時也將會減少大量的合併衝突機會 ) • 預設在目錄中的專案,都會自動被加進專案 ( 直接把檔案放進目錄即可 ) • 可在 project.json 的 exclude 排除不要編譯 的檔案或目錄
  23. 23. 新的靜態檔案專用資料夾 • wwwroot – 注意:這個目錄才是你的網站根目錄 – 只要是靜態檔案都全部集中在這裡 • JavaScript, Images, CSS, … – 更清楚的關注點分離 • 完整切割前、後端程式碼,目錄結構更乾淨 • 更容易與前端開發流程整合 – 編譯 CoffeeScript 或 TypeScript 到 JavaScript – 編譯 LESS 或 Sass 到 CSS – 最小化與合併 JavaScript 或 CSS 檔案 – 最佳化圖片檔案
  24. 24. NuGet 套件與相依性管理 25
  25. 25. NuGet 套件與相依性管理 • 新的 NuGet 套件管理員 – 支援預覽變更功能 (Preview) – 套件管理主控台依然可用 – 也可手動修改 project.json 的 dependencies • 不再有「加入參考」等動作 – 所有套件相依性的安裝或移除都是自動完成的!
  26. 26. 其他套件與相依性管理 • 整合 Bower 套件管理員 – A package manager for the web – bower_components • 整合 NPM (Node.js) 套件管理員 – npm is the package manager for something – node_modules • 整合 Grunt / Gulp 工作執行器 – The JavaScript Task Runner – gruntfile.js – [View] -> [Other Windows] -> [Task Runner Explorer] – Using Grunt and Bower in Visual Studio 2015
  27. 27. 關於專案中的 *.json 檔案 • project.json – 主要的專案設定檔 – NuGet 套件與相依性都列在這裡 • package.json – 別誤會,這跟之前的 packages.config 完全無關 – 這是 npm 的套件清單 • bower.json – 這是 Bower 的套件清單 • gruntfile.js – 這是 Grunt 的定義檔
  28. 28. 管理 BOWER 套件 Demo: bower install requirejs
  29. 29. 切換不同的 .NET 核心 • 切換目標 KRE 版本 – [專案屬性] -> [Application] -> [Target KRE version] • C# 編輯器中可切換不同 .NET 核心 – API Portability Analyzer - Alpha
  30. 30. 發佈 ASP.NET 5 網站到 Azure WS • 發布流程跟以前一模一樣 • 查看部署後的目錄結構
  31. 31. ASP.NET MVC 6 與 ASP.NET Web API ASP.NET MVC 6 and ASP.NET Web API
  32. 32. ASP.NET MVC 5 與 ASP.NET Web API 2
  33. 33. ASP.NET Web API 哪裡不一樣了? • MVC + Web API + Web Pages = ASP.NET MVC 6! • Web API 的 API 被犧牲了! – 預設採用跟 ASP.NET MVC 一樣的 Routing, Filters, Model Binding, … etc. – 類別不需要再繼承 ApiController 直接繼承 Controller 即可 不繼承 Controller 一樣可用 (透過 DI/IoC 機制)
  34. 34. ASP.NET 5 從核心方面的改變 • 什麼!Global.asax 沒了? • 什麼!Web.config 沒了? – ASP.NET 5 採用全新設計的 HTTP 要求管線 • 只剩 Startup.cs 來定義應用程式特性 – Startup() • 用來設定參數來源 – ConfigureServices() • 使用 ASP.NET 5 內建的 DI 機制進行服務註冊 – Configure() • 當 ConfigureServices() 執行完後會執行這個方法
  35. 35. Startup() • AddJsonFile("config.json") – 從 config.json 讀取參數 • AddEnvironmentVariables() – 從環境變數取得參數(用冒號分隔名稱) • AddIniFile("App_Dataconfig.ini") – 從 INI 設定檔讀取參數 • AddXmlFile("App_Dataconfig.xml") – 從 XML 設定檔讀取參數 • AddCommandLine(args) – 從命令列參數取得參數
  36. 36. ConfigureServices() • AddEntityFramework() – 加入 Entity Framework 服務 • AddIdentity() – 加入 ASP.NET Identity 服務 • AddMvc() – 加入 ASP.NET MVC / ASP.NET Web API 服務 • AddWebApiConventions() – 加入相容於舊版 ASP.NET Web API 的服務 – 需安裝 Microsoft.AspNet.Mvc.WebApiCompatShim (即 NuGet 套件)
  37. 37. Configure() 1/2 • loggerfactory.AddConsole() – 設定 Logger ( ASP.NET 5 全新設計 ) • app.UseBrowserLink() – 使用 Browser Link • app.UseErrorPage() – 使用錯誤畫面 ( ASP.NET 5 全新設計 ) • app.UseDatabaseErrorPage() – 使用資料庫錯誤畫面 • app.UseErrorHandler("/Home/Error") – 將錯誤導向到指定路徑 (Controller/Action)
  38. 38. ASP.NET MVC 6 錯誤追蹤頁面 Demo
  39. 39. Configure() 2/2 • app.UseStaticFiles() – 使用靜態檔案讀取 ( wwwroot ) • app.UseIdentity() – 使用 ASP.NET Identity 進行身分驗證 • app.UseMvc() – 使用 ASP.NET MVC / ASP.NET Web API – 包含完整路由設定也定義在此
  40. 40. 開始使用 ASP.NET MVC 6 • 安裝 Microsoft.AspNet.Mvc 套件(NuGet) • 在 Startup.cs 新增 Mvc 服務 (DI/IoC) – 定義在 ConfigureServices() 方法中 – 範例程式 • services.AddMvc(); • services.Configure<MvcOptions>(options => { options.Filters.Add(...); }); • 設定 ASP.NET MVC 路由 – 定義在 Configure() 方法中
  41. 41. ASP.NET MVC 6 哪裡不一樣了? • 全新的 DI 引擎 – 不用繼承 Controller 也可以執行 • 新的 Routing 風格 routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); • 關於 ViewEngines – 不支援 WebFormViewEngine • Visual Studio 改用 Roslyn 編譯器 – 就算編輯 C# 檔案,不用編譯就能執行 – 將 Ctrl+F5 改成 Ctrl+Alt+Enter 吧!  • 新增 3 個功能
  42. 42. ASP.NET MVC 6 什麼是不變的 • Controllers • ActionResults • Filters • Routing • Model binding • Views (Razor)
  43. 43. 使用 ASP.NET MVC 6 的注意事項 • 少用 HttpContext.Current – 因為全新的 HTTP Request pipeline – 許多 API 都被移入 Middleware 了! • 少用 HttpModules 或 HttpHandlers – 因為全新的 HTTP Request pipeline – 許多 API 都被移入 Middleware 了!
  44. 44. 在 Core CLR 執行環境下的變化 • 以前的 ngen 要改用 crossgen – crossgen = CoreCLR Native Image Generator • 不再有 GAC 的概念!
  45. 45. 總結 Summary
  46. 46. • ASP.NET 5 這次真的打掉重練 – ASP.NET 5.0 事實上跑在 .NET 4.5 CLR 上面 – ASP.NET 5.0 自己是一個 Process Container – ASP.NET 5.0 是個開發模型(Programming Model) – ASP.NET 5.0 與 ASP.NET Core 5.0 開發模型相 同 – ASP.NET 5.0 須跑在一個支援 KRuntime 的環境 – ASP.NET 5.0 改用全新的專案架構 (*.kproj) • ASP.NET MVC 6 – 核心觀念與架構都沒變,僅新增幾個小功能 • 建議多學點前端工程的技能 (大勢所趨)
  47. 47. 聯絡資訊 • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享 – http://blog.miniasp.com/ • Will 保哥的技術交流中心 (臉書粉絲專頁) – http://www.facebook.com/will.fans • Will 保哥的噗浪 – http://www.plurk.com/willh/invite
  48. 48. ASP.NET MVC 6 相關連結 http://bit.ly/aspnetmvc6

×