ASP.NET 5 新功能與變革Gelis Wu

關於我• 連續四屆微軟最有價值專家 MVP

(2011~2014)• 集英信誠資深 .NET 開發顧問• 部落客，點部落 (Gelis 技術隨筆 )• 在 2000 年早期致力於 Win32 底層 COM+ 與

分散式應用的開發， 2002 年開始轉戰 .NET 平台

• 熟悉 C# 、 ASP.NET 、 MVC 、 Web 平台技術開發、與各項微軟開發的 Solution ， UML與 OOAD 塑模化設計、系統分析與設計等

經歷• twMVC 社群講師• Study.4 社群講師• 企業 Visual Studio 2013/C# 課程講師• 企業 IIS 7.5/8.0/8.5 訓練講師

講授過課程• [.NET 技術研討 (LINQ 與架構開發 )]• [ASP.NET MVC 4 RC 新增功能介紹 ]• [ASP.NET MVC 4 Web API 開發簡介 ]• [ASP.NET MVC 4 Web API 全攻略 ]• [ASP.NET MVC 4 新增功能介紹 ]• [ASP.NET MVC 基礎 ]• [CSharp 4.0 LINQ 與泛型應用 ( 簡介與開發 )]• [HTML5 課程 ]• [IIS 7.0 應用程式開發實務 ]• [Visual Studio 2010 UML]• [Visual Studio 2012 與 ASP.NET 4.5 ( 新功能與開發介紹 )]• [Visual Studio 2013 新功能介紹 ]• [ 如何培養架構性思考 ( 談軟體架構師必經之路 )]• [ 如何將現有 ASP.NET Web Form 網站轉為 ASP.NET MVC]

Agenda 從 Build 和 Ignite 兩大活動來看微軟的幾項變革 了解 ASP.NET 5 為什麼要重新設計 ASP.NET? 現有 ASP.NET ( 問題／限制 ) ASP.NET 5 關鍵性的改進 ASP.NET 5 的執行環境簡介 ASP.NET 5 的專案結構 真正的跨平台 (Cross Platform) MVC 6 新增功能 DI in ASP.NET 5 技術更多更雜，開發人員該如何因應？

從 Build 和 Ignite 兩大活動來看微軟的幾項變革

從 Build 和 Ignite 兩大活動來看微軟的多項變革 Office 釋出 iOS 版本 擁抱開源，釋出 .NET 核心程式碼 開發可在 Linux, OS X 執行的 .Net Core Runtime Visual Studio Code 打破 Windows 平台獨尊的局勢 透過打開自家產品的大門，轉而變成採取開放、利他的新戰略 改變 Win10 銷售和更新方式 Cortana 、 Sway 、 Delve 、 Power BI 跨多種用途的商務流

程，整合行動、社交、協作和智慧型分析技術

了解 ASP.NET 5

ASP.NET 5 的幾項變革完全的模組化

地端與雲端開發無縫接軌

開放原始碼

更快更短的部署週期

選擇你自己的編輯器

真正的跨平台

執行速度更快

ASP.NET 的發展歷史 1996 – ASP 2002 – ASP.NET Web Form, Web Services 2008 – ASP.NET MVC 1 2010 – ASP.NET MVC 2 2011 – ASP.NET MVC 3, Web Pages 2012 – ASP.NET MVC 4, Web API 2013 – ASP.NET MVC 5, SignalR 2015 – ASP.NET 5, MVC 6

ASP.NET 5 專案範本介紹 Empty

Web API

Web Site

為什麼要重新設計 ASP.NET?

所有的 .NET Framework

現有 ASP.NET ( 問題／限制 )

Current ASP.NET Stack

IIS

.NET Framework

ASP.NET WebForms

MVC Web API

Syst

em

.WebHTTP

ModulesHTTP

HandlersRequest Pipeline

CachingSession State

現有 ASP.NET ( 問題／限制 ) 只能 Run 在 IIS 與 System.Web 相依 Web 技術發展速度比 .NET Framework 還快 要再優化執行環境有困難 無法跨多個平台 (Linux 、 Unix 、 OS X...) 不是雲端最佳化 ...

Cache & Session 不能夠平行擴充，不符合雲端 Scale out 設計理念

ASP.NET 5 關鍵性的改進

ASP.NET 5 的組成

OS

.NET CLR

ASP.NET

Web API MVC Web Pages

Host

IIS Self-hosted

.NET Core CLR

OWIN

ASP.NET 5 關鍵性的改進 OWIN, bye bye system.web 跨平台 (cross-platform) .NET Framework 不再包山包海 ( 輕量化 ) .NET Framework 會 Packages 化 易於被安裝 ( 可攜性提高 ) .NET Core CLR 沒有 GAC 開放 (Open Source) 、容易開發、新的專案結構 雲端最佳化 MVC6, POCO Controller, DI 吸引其他平台的開發者

跨平台編輯器 Visual Studio Code

跨平台編輯器 OmniSharp 已有廣大的使用者

官方免費開發工具 Visual Studio Community 2013/2015 學生或五人以下團隊可以免費使用 功能相當於 Visual Studio 2013/2015 Profesional

ASP.NET 5 的執行環境簡介

所謂的 DNX 執行環境？ 用來管理 ASP.NET 5 的執行環境的工具 可分為三類：

DNVM (.NET Version Manager) DNX (.NET Execution Environment) DNU (.NET Development Utility)

DNVM (.NET Version Manager) .NET Core Runtime 的版本管理工具 因為同一台可以安裝各種版本的 DNX 執行環境 支援 x86/x64 與 .NET CLR/.NET Core CLR

dnvm list

DNX (.ET Execution Environment) .NET Core CLR 的跨平台執行環境 dnx 會帶起一個載入器 Loader ，由 project.json

來決定運行的 Runtime。

安裝 DNX 要安裝 DNX 你得先安裝 DNVM 安裝 DNVM 可透過 PowerShell 命令來安裝

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{$Branch='dev';iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1'))}"

安裝 DNX 再使用 dnvm 來安裝 dnx

dnvm install latest

DNU (.NET Development Utility) 套件管理工具 伺服器端的套件還是以 NuGet 為主

DNU 就是個批次檔 其實是由 DNX呼叫 Microsoft.Framework.PackageManager.dll

ASP.NET 5 執行環境的種類 ASP.NET 5 有真正「跨平台」的執行環境

Full .NET CLR 就是原本的 .NET Framework 4.5/4.6

Core CLR DNX 是執行環境 將 .NET Framework 組件 Packages 化

Cross-Platform 真正跨多平台 (目前使用 Mono) 官方會推出跨多個平台的 .NET Core 5

ASP.NET 5

.NET Core 模型

ASP.NET 5 的專案結構

ASP.NET 5 的專案結構 (1) ( 你的專案 ).xproj 相依性 (Dependency)

Bower Bower 是 Twitter 所推出的一種解決安裝、管理、打包 .js/JavaScript 、

CSS ，與管理與相依性的工具。 安裝 Bower 需要 npm 執行引擎 更詳細關於 Bower 相關資訊可到官網： http://bower.io/

NPM (Node Package Manager) Node.js 的套件管理員，如果你是前端工程師應該很熟悉，因為你可以透過

bower它來進行前端 CSS 與 JS 的安裝，再使用 grunt 或 gulp 進行自動化的打包與壓縮前端 CSS 與 JS 的作業。

ASP.NET 5 的專案結構 (2) wwwroot

存放所有網站使用到的靜態檔案，如：圖片、 CSS 、 JavaScript 檔案 解決了以往程式檔案與靜態檔案放在一起的問題 同時，它也是程式執行的起點 (根 )

Config.json 取代以前 web.config 設定 ConnectionString 與 AppSetting

Project.json 取代以前 web.config ，定義專案使用到的組件相依性

Gruntfile.js 與 Gulpfile.js 透過它，在工作執行器裡自動化編譯 CoffeeScript 、 TypeScript 、打包 CSS/JS 等作業

Package.json 管理 npm 的套件清單，這裡你會常看到在這裡 grunt或 gulp 工作執行器等套件

global.json 在這裡的配置會複寫整個方案的設定

啥 !!~ 熟悉的

web.config 不見了

Demo從無到有建立一個 ASP.NET 5 應用程式

什麼是 bower ？ Bower 是 Twitter

所推出的一種解決安裝、管理、打包 .js/JavaScript 、 CSS ，與管理與相依性的工具。

安裝 Bower 需要 npm 執行引擎 而 npm 是 Node.js 的套件（ package）管理工具 更詳細關於 Bower 相關資訊可到官網： http://bower.io/

Bower 安裝套件是透過 git 來下載

所以必須安裝 git 才可以使用 Bower

什麼是 git

• 它是一種版本控制系統• 它走分散式的架構

• GitHub 本身就是走 git • VSO 與 TFS 目前都已經支援

安裝 bower 命令列工具 開啟 Node.js Command prompt npm install bower –g

天啊~ 怎麼這麼多指令？

別擔心，我們有地表最強開發工具…

又回到指令一統江湖的時代 別擔心，在 VS2015裡操作，並不需要記憶這些指令

使用還原封裝即可

什麼是 Grunt 以 Node.js 為基礎所開發的命令列工具 將一些重複性的工作自動化 精簡 CSS 程式或 JS 檔案的大小 並且將這些工作由 task runner 來依序處理 必須在 package.json 引入需要的 Grunt 的 Plug-In 套件

但… 聽說 Grunt 現在很少人用？

現在很多人用 gulp

什麼是 Gulp ？ 也是以 Node.js 的串流基礎所開發的工具 不需像 Grunt 需指定其來源與目的路徑 只需要將檔案串流輸入到外掛 (Plug-In) ，最終輸出結果

Gulp 常用外掛 Plug-In 縮小化 (minify)CSS (gulp-minify-css) JSHint (gulp-jshint) 圖片壓縮 (gulp-imagemin) 即時重整 (LiveReload) (gulp-livereload) 移除檔案 (gulp-rimraf ) 圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache) 編譯 Sass (gulp-ruby-sass) Autoprefixer (gulp-autoprefixer) 更動通知 (gulp-notify)………

安裝 Gulp 的外掛 Plug-In 定義需要的 Gulp 外掛

Visual Studio 2015 RC 會在背景自動安裝外掛

安裝 Gulp 命令列工具 想在命令列裡操作 gulp 必須使用 npm 安裝 gulp

下面的命令則會將 gulp 安裝到本地專案內

工作執行器總管 (Task Runner Exeplorer) 可定義 Task 在專案 [建置後 ] 或 [建置前 ]

執行 真正的自動化

管理 Client Side 相依性 Client Side Dependency Management

使用 bower.json 來定義需要安裝的 Client Side 套件

管理 Server Side 相依性 Server Side Dependency Management

Demo建立 Bower & gulp如何使用 _Layout.cshtml 頁面

真正的跨平台 (Cross Platform)

真正跨平台 (Cross Platform) Windows

Full .NET .NET Core 5

OS X Mono .NET Core 5

Linux/Ubuntu Mono .NET Core 5

在 Ubuntu 執行 ASP.NET 5 Ubuntu Server 的 ASP.NET 5 安裝步驟 1. 更新 Ubuntu Server

$ apt-get update$ apt-get upgrade

2. 安裝 Mono 4.0.1$ apt-get install mono-complete

完成後就可以測試一下 Mono 的版本是否 v4.0.1　（是目前最新的版本了）：$ mono -V

通常安裝完後，可再執行一次 apt-get update 看看是否還有可更新的套件。

不過 Mono4.0.1在 Ubuntu上執行 dnvm似乎有

問題

啥…

在 Ubuntu 執行 ASP.NET 5 安裝 libuv 是一種支援 multi-platform 與 asynchronous 的

KestrelHttpServer 網頁開發伺服器$ sudo apt-get install automake libtool curl$ curl -sSL https://github.com/libuv/libuv/archive/v1.4.2.tar.gz | sudo

tar zxfv - -C /usr/local/src$ cd /usr/local/src/libuv-1.4.2$ sudo sh autogen.sh$ sudo ./configure$ sudo make $ sudo make install$ sudo rm -rf /usr/local/src/libuv-1.4.2 && cd ~/$ sudo ldconfig

在 Ubuntu 執行 ASP.NET 5 安裝 DNVM 命令 (Linux/Ubuntu)

$ curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh

注意畫面上會出現 'source /usr/bin/... ' 等訊息，這是表示您還需要設定環境參數的意思，可直接執行這一段 Source 敘述即可。

裝完 DNVM 必須再讓 Mono 同步一下$ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys

3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF$ echo "deb http://download.mono-project.com/repo/debian wheezy

main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list$ sudo apt-get update$ sudo apt-get install Mono-Complete

在 Ubuntu 執行 ASP.NET 5 安裝 nodejs

$ apt-get install nodejs 安裝 npm

$ sudo apt-get install npm 安裝 git

$ apt-get install git 從 github 下載一個 HelloWeb, HelloMvc 來測試看看

$ git clone https://github.com/aspnet/Home.git 先使用 dnu restore 下載需要的 .NET Framework

$ dnu restore 執行 ASP.NET 5 應用程式

$ dnx . Kestrel

若命令無法使用，可到 /usr/bin 下面，查看 dnvm

或 kvm 等命令是否有執行檔在這個路徑下

Demo

MVC 6 新增功能

頁面檢視元件VCs (View Components)

VCs (View Components) 頁面檢視元件 它可以解決我們以前用 Partial View 不容易解決的問題 類似小型 Controller 更元件化

服務檢視注入(Injecting a service into a view)

(Injecting a service into a view) 服務檢視注入 在 ASP.NET 5 中大量地使用到 DI (Dependency Injection) 概念 只需撰寫如下的程式碼，可在 View 中任意注入此服務類別：

public class StatisticsService { public async Task<int> GetCount() { return await Task.FromResult(1); }

public async Task<int> GetCompletedCount() { return await Task.FromResult(2); }

public async Task<double> GetAveragePriority() { return await Task.FromResult(0.0); } }

(Injecting a service into a view) 服務檢視注入 從 View 中載入服務類別的方式

使用服務類別的方式

並記得在 Startup.cs 中的 ConfigureService() 註冊該服務類別

服務類別必須是： Public 類別 非巢狀類別 非抽象類別

TagHelper 標籤補助方法

TagHelper 標籤補助方法 (1) TagHelper 可以上我將原本 HtmlHelper寫法

改為 Html 自定義屬性方式

TagHelper 標籤補助方法 撰寫自己的 TagHelper 標籤的方式

在 _GlobalImport.cshtml 宣告這個 TagHelper

[TargetElement("myLabel")] public class MyLabelTagHelper : TagHelper { public override void Process(TagHelperContext context, TagHelperOutput output) { output.TagName = ""; StringBuilder sb = new StringBuilder(); sb.AppendFormat("<label id={0} name={0}>{1}</label>", "myLabel", " 我的 LABEL");

output.Content = sb.ToString(); } }

MVC 6 中不變的技術Web Pages MVC Web API

Razor

HTML Helpers HTML Helpers

Controllers

Actions

Filters

Model Binding

Dependency Resolver

Controllers

Actions

Filters

Model Binding

Dependency Resolver

DI in ASP.NET 5

ASP.NET 5 內建的 DI (Dependency Injection) 一切的初始化工作都由 Startup.cs 開始 Startup

ConfigureService()

Configure()

Per Request Scope 根據請求 (Web Request) 建立所需要的 Middleware

Instance

ASP.NET 5 有四種 DI 作法 代表不同等級的物件生命週期

1. Instance ：不管任何時候，針對特定物件，總是回傳給你最初建立的物件實體。

2. Transient ：每次叫用時，都重新 new 新的物件給你。 3. Singleton ：對於目前的容器而言，幾乎就是全域物件。 4. Scoped ：針對程式碼特定範圍內，等於 Singleton 物件。

Microsoft.Framework.DependencyInjection

內建 DI 由 Microsoft.Framework.DependencyInjection 所提供的

不過目前內建的 DI 容器稍嫌陽春 如果建構式有多個參數，內建的 DI 可能就無法滿足 可 System.IServiceProvider  這個抽象層介面 可參考：

https://github.com/aspnet/Home/issues/218

https://robinsedlaczek.wordpress.com/2014/11/22/dependency-injection-in-asp-net-vnext/

https://github.com/aspnet/DependencyInjection/find/dev

使用 ASP.NET 5 內建的 DI 加入 ICustomer 介面

加入實作 ICustomer 的 CustomerService 類別

記得在 Startup.cs 裡，加入對 ICustomer 與 CustomerService 的註冊

DemoASP.NET 5 裡使用 DI

透過 IOptions 注入 AppSettings 在 Startup 時透過

Configuration().AddJsonFile(“config.json”) 讀取進來 在 View 上面使用 @inject Ioptions<AppSettings> [ 變數 ]

Demo如何取得 AppSettings 的值？

將 MVC 5 移轉到 ASP.NET 5

MVC 5 移轉到 ASP.NET 5 的方式 如果你的應用程式沒有考慮跨其它平台 Linux 、 UNIX 、 OS X 等 你並不需要做移轉這件事，可繼續執行在 .NET Framework 4.6 的

Full .NET CLR 中 若真要移轉，你得改變程式裡，用到與 System.Web 相依的部分 移轉 ASP.NET MVC 5 改變幅度最小 步驟

改使用 project.json 加入相關參考 改使用 config.json 設定 ConnectionString 與 AppSettings 等 在 Startup.cs 加入需要使用的 Middleware 服務，註冊需要的介面 改用 bower 安裝 bootstrap & jquery 前端元件 透過 dnvm 來進行 Code-First 的 add migration 作業

在技術多變的時代開發人員該如何因應？

對於技術只是工作？熱情？ 你對於自己的工作是不是充滿熱情？ 對於吸收新知是不是充滿興趣？ 你是不是偶而會了解產業脈動？市場需求？不要只是看技術資訊。 技術或許更多更雜

但在未來『服務』、 『人』才是重點 眼光要遠、足夠的洞察力、投資報酬率？ 多與其他的開發人員互動 (twMVC, Study4, SQL PASS...)

回到技術面，平台不再是問題 多了解其他平台吧 Linux, Unix, OS X, AIX 等等 ( 指令的使用跑不掉… ) 了解一些前端的開發技術吧，比如早就跨多個平台的 JavaScript/HTML5, 以

及 AngularJS 未來，服務會是重點 所以多了解雲端的開發吧

ASP.NET 5 相關連結 The ASP.NET Site http://www.asp.net/vnext

Introduction the ASP.NET 5 https://

msdn.microsoft.com/en-us/magazine/dn879354.aspx

The Visual Studio Blog http://blogs.msdn.com/b/visua

lstudio/

ASP.NET 5 Documentation http://docs.asp.net/en/latest/

Github for ASP.NET Home https://github.com/aspnet/Hom

e/

MSDN 台灣部落格 http://blogs.msdn.com/b/msdnt

aiwan/

聯絡資訊 Gelis 技術隨筆

在開發的領域，學海無涯，因此在這裡紀錄著我的學習與成長的過程，並時時刻刻提醒自己得要更努力。

http://www.dotblogs.com.tw/gelis/Default.aspx

ASP.NET MVC 開發社團 https://www.facebook.com/groups/361804473860062/

Q & A