ASP.NET 5 快速入門 (2015.12)

小朱

歡迎大家進入真正的 Web 程式設計世界

何謂真正的 Web 程式設計世界？• 一切功能都能用程式碼決定，不需要再接觸 UI 。• 例如…那個有點討人厭的 IIS Manager…

• 套件的相依性 (Dependency) 能用程式碼決定，也不需要再接觸 UI 。• 例如…加入參考和管理 NuGet 套件這件事。• 連前端應用程式框架也可以用程式碼或指令來處理。

• Web 應用程式不再相依於特定環境。• 這表示，不只 Windows ，連 Linux, Mac 也能夠跑才算。

ASP.NET 5 是 Microsoft 技術中第一個符合這些條件的平台。

ASP.NET 5• 第一個使用程式碼決定功能的 Web 開發平台。• 第一個不再相依於 IIS 的 Web 開發平台。• 第一個不再受限於 Windows 的 Web 開發平台。• 第一個將前端程式納入指令管理的 Web 開發平台。

ASP.NET 5 vs. Pre-ASP.NET 5

ASP.NET 5 vs. ASP.NET 4-了解其中的差異，以消除莫名的恐懼。

程式設計模型

架構

工具

部署

由程式碼決定應用程式應有的功能。

ASP.NET 5 ASP.NET 4-

由安裝 IIS 所設定的模組功能決定。具有強大彈性的 Package-based 相依，且只有超輕量的 Runtime 。 相依於大包的 .NET Framework 裡面的 System.Web.dll 。Visual Studio, Visual Studio Code, Sublime 或其他 Open Source 工具。

Visual Studio (Web Form)Visual Studio, VS Code (MVC)

IIS 只是附加， ASP.NET 5 預設使用 Kestrel Server 。 原則上只能掛在 IIS 上，目前只有 Web API 具有 Self-hosting 的能力。

ASP.NET 5 vs. ASP.NET 4- Web Form了解其中的差異，以消除莫名的恐懼。

程式設計模型

架構

前端介面

MVC-based, 沒有 Web Form

ASP.NET 5 ASP.NET 4-Web Form

Web Form 程式設計模型Controller, Model,View: View Component, Tag Helpers

Page, Master PageUser Control, Custom Control

VC, Tag Helpers: C#View: Razor

Control-based HTML/CSS/JavaScript Render

ASP.NET 5 版本系統• 目前的版本： v1.0.0-rc1-final

• Microsoft.AspNet.* : v1.0.0-rc1-final ( 非 MVC 的 ASP.NET 套件 )• Microsoft.AspNet.Mvc.*: v6.0.0-rc1-final (ASP.NET MVC 6 套件 )• EntityFramework.*: v7.0.0-rc1-final (Entity Framework 7 套件 )• Microsoft.Extensions.*: v1.0.0-rc1-final (ASP.NET 組態與記錄等擴充功能的套件 )• Microsoft.Dnx.*: v1.0.0-rc1-final (.NET Execution Environment 的相關套件 )

• 未來其他的套件 ( 例如 .NET Core 的功能套件 ) 也將使用相似的命名規則。

選擇正確的版本

開發中版本http://github.com/aspnet

官方版本http://asp.net/vnext ( 入口 )http://get.asp.net ( 取得工具 )http://docs.asp.net ( 文件 )

ASP.NET 的基石： .NET Execution Environment• 最早的命名是 Project K 。• 負責管理 .NET 5 以上版本的執行時期環境。• 幾個重要的指令：• dnx: 執行 .NET 的程式。• dnu: DNX 工具，用來還原專案使用的 NuGet 套件。• dnvm: DNX 版本管理工具，可安裝指定或最新版的 DNX

Runtime 。

DNX 4.5.1 vs. DNX Core 5.0

ASP.NET 5 專案系統DNX 4.5.1• 以 .NET Framework 為基礎• 可使用目前以 .NET 為主的元件與 DLLs• 無法跨平台

DNX Core 5.0• 以 .NET Core 5 為基礎• 無法使用非以 .NET Core 開發的元件與 DLLs• 可以跨平台 • 目前 .NET Framework 內的核心組件已有超過 90% 移轉到 .NET Core ，預計在 1.0

release 前全部完成。

ASP.NET 5 相依管理 (Dependency)• ASP.NET 5 使用 NuGet 套件化管理，原則上不再有『加入參考』這件事。• 加入參考，由 GUI 轉換成編輯

project.json 內的 dependencies 設定。• 不再只鎖定固定版本，可依需求選擇特定版本的版本。• 每次修改 dependencies 儲存後都會自動同步套件，部署時亦然。

ASP.NET 5 相依管理 (Dependency)• 針對特定平台的相依性， project.json 提供了 frameworks 處理這個問題。

• dnx451 .NET Framework 4.5.1• dnxcore50 .NET Core 5.0

如何取得 ASP.NET 5 的開發工具 ?

• 微軟幫你準備好了 Microsoft ASP.NET and Web Tools for ASP.NET 5 (RC)

• 安裝 Visual Studio 2015 Update 1 後，自動就有這工具了。

其他的平台，可到 https://get.asp.net/ 取得必要的工具

專案範本產生器 (Visual Studio)Web 專案範本 Class Library, Console 專案

專案範本產生器 (for Windows, Linux, Mac)• 以 node.js 開發• 跨平台的 Generator• 不需要 GUI 就能產生以資料夾為主的專案範本• Windows 10 作業系統暫時無法使用它，因為它使用的引擎在

Windows 10 上有問題…

專案結構• 參考 : Platform-Specific 組件參考• wwwroot: 網站根目錄• 相依性 : 前端套件相依性• Startup.cs• project.json• appsettings.json• global.json

Startup.cs• 一切都由此開始。• 由程式碼定義功能。

• app.UseStaticFiles(); (Microsoft.AspNet.StaticFiles 套件 )• app.UseDeveloperExceptionPage(); (Microsoft.AspNet.Builder 套件 )• app.UseDirectoryBrowser(); (Microsoft.AspNet.Builder 套件 )• app.UseDatabaseErrorPage(); (Microsoft.AspNet.Builder 套件 )• app.UseIISPlatformHandler(); (Microsoft.AspNet.IISPlatformHandler 套件 )• app.UseMvc(); (Microsoft.AspNet.Mvc 套件 )

• 服務相依性 (Service Dependency)• services.AddMvc();• services.AddTransient<ISmsSender, AuthMessageSender>();

project.json• 取代了 Web.config• 應用程式的定義在此設定。• 套件相依性

(dependencies)• 平台相依性

(frameworks)• 環境參數 (commands)• 建置時排除資源

(exclude)• 發行時排除資源

(publishExclude)• 觸發使用 dnu 執行指令的事件 (scripts)

appsettings.json• 取代了 Web.config 內的設定相關功能。• ConnectionStrings• AppSettings• 其他設定值

• 必須在 Startup.cs 中導入ConfigurationBuilder 的設定，才會生效。

global.json• 用以鎖定方案層級的 DNX 版本與相關設定。• 需要加在方案層級內。

整合前端框架gulp.js: JavaScript-based Task Management

bower.js: Package Management for Web

整合前端框架

ASP.NET MVC 6•其實沒有什麼太大變化，但不是沒有變化 。• ActionResult 類別改成 IActionResult 介面。•加入新的 View Component 能力，比 Partial View 更強的 Programmable View 。• Visual Studio 2015 一樣支援 Scaffold 功能。•Web API 與 MVC 核心完全整合。•MVC 6 需要的功能一樣要用程式碼定義 ( 例如 ASP.NET Identity, CORS 等 )•支援除錯時期的 Edit-and-Continue

View Component (VC)• View Component 是進階版本的 Partial View 。• 你也可以將它視為極簡的 Controller + View 。• Partial View 要以 Razor 來寫，而 View Component 可由 C# +

Razor 來開發，將資料處理和實際顯示的程式碼進一步切開。• View Component 的 View 檔案放在標準的 View 路徑下的

Components/[VC]/[Viewname].cshtml ，預設的名稱是 default.cshtml ，不過也可以自己決定命名。• 引用端使用 @Component.Invoke() 呼叫 VC 。

Tag Helper•標籤自造者 (Tag Maker)• 自造標籤，或是在現有標籤內加入自己需要的特徵。

• 加入 Microsoft.AspNet.Mvc.TagHelper 的套件。•繼承自 TagHelper 類別。• 覆寫 ProcessAsync() 方法。• 使用 GetChildContentAsync() 取得標籤內的內容。• 產生輸出的 HTML 內容。

<tagMaker>Data Content</tagMaker><div attrMaker=“data”>Data Content</div>

Hosting 的改變• ASP.NET 5 除非使用 IIS Platform Handler ，否則預設使用

Kestrel Server 作為 Hosting 的基底。• Kestrel Server (Microsoft.AspNet.Server.Kestrel) 支援跨平台的 Hosting 。• Kestrel Server 直接支援 IIS-based hosting 以及 Self-

hosting 兩種方式。

IIS Platform Handler

IIS Platform HandlerHTTP.SYS

Web AppWeb App

aspnet_wp aspnet_wp

Web App

Kestrel Server

Web App

Kestrel Server

IIS Hosting Mode (ASP.NET 4-) IIS Platform Handler (ASP.NET 5)

結語• ASP.NET 5 是 Microsoft 第一個真正的 Web 應用開發的平台。•豐富的套件支援 ( 前端 + 後端 ) ， Visual Studio 便利的專案管理方式，使生產力大增。• ASP.NET 5 跨平台的願望正式實現。• 不過…要先習慣沒有 Web.config 的世界

References• ASP.NET Official: http://asp.net/vnext • Documentation: http://docs.asp.net • Web Team Blog: http://blogs.msdn.com/webdev • ASP.NET GitHub: http://github.com/aspnet