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-

了解其中的差異，以消除莫名的恐懼。

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

由安裝 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

Web Form 程式設計模型

Controller, Model,
View: View Component, Tag Helpers

Page, Master Page
User 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 Handler

HTTP.SYS

Web App

Web 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