Asp.net mvc 6 新功能初探

集英信誠「與大師對談」系列技術論壇
Gelis Wu
ASP.NET MVC 6 新功能初探

Agenda
• 從 ASP.NET vNext 來看.NET 2015
• 為什麼要重新設計 ASP.NET？
• 現有 ASP.NET (問題／限制)
• ASP.NET 5 關鍵性的改進
• ASP.NET 5 的專案結構
• ASP.NET 5 的執行環境
• MVC 6 新增功能
• DI in MVC 6
• 移轉 ASP.NET MVC 5 到 ASP.NET MVC 6？
• 未來技術更多更雜，開發人員因應這股技術浪潮呢？

ASP.NET 5 跟 MVC 6 有什麼關係？

ASP.NET 5 跟 MVC 6 有什麼關係？
• ASP.NET 5 是一種開發模型的轉變
• 目前 ASP.NET 5 只提供 MVC 的框架
• 目前預覽版本裡只有 C# 框架

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 三種專案介紹
• ASP.NET Web Application
 建立 ASP.NET 5 網站應用程式
• ASP.NET 5 Class Library
 建立與 ASP.NET 5 相容的類別庫
• ASP.NET 5 Console Application
 建立使用 K 命令列工具的主控台應用程式

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

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

Current ASP.NET Stack
Windows Server
IIS
.NET Framework
ASP.NET Web
Forms
MVC Web API
System.Web
HTTP
Modules
HTTP
Handlers
Request
Pipeline
Caching
Session
State

現有 ASP.NET (問題／限制)
• 只能 Run 在 IIS
• 與 System.Web 相依
• Web 技術發展速度比 .NET Framework 還快
• 要再優化執行環境有困難
• 無法跨多個平台 (Windows...)
• 不是雲端最佳化...
 Cache & Session 不能夠平行擴充，不符合雲端 Scale out 設計理念

ASP.NET 5 的組成
OS
.NET CLR
ASP.NET
Web API MVC
Web
Pages
Host
IIS Self-hosted
.NET Core CLR
OWIN

Power of Katana
• 新的要求管道(request pipeline)都源自Katana專案,OWIN
 Modularity – 新的模組以更小更輕量化為優先
 Flexibility – 為不同的應用程式加入需要的 Middlewares
 Performance – 所需要的運算資源更小
 Scalability – 根據不同的需求擴展需要的 Middlewares
 Portability – 可以在任何平台執行你的應用程式

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
• 吸引其他平台的開發者

ASP.NET 5 的執行環境
• ASP.NET 5 有真正「跨平台」的執行環境
 Full .NET CLR
 就是原本的.NET Framework 4.5/4.6
 Core CLR
 KRE 是執行環境
 將.NET Framework 組件 Packages 化化
 Cross-Platform
 真正跨多平台
 官方會推出跨平台的KRE

ASP.NET 5 (Code / Build / Debug) to Deploy & Run

ASP.NET 5 的專案結構 (1)
• (你的專案).kproj
• Dependency
 Bower
 Bower 是 Twitter 所推出的一種解決安裝、管理、打包 .js/JavaScript、CSS ，
與管理與相依性的工具。
 安裝 Bower 需要 npm 執行引擎
 更詳細關於 Bower 相關資訊可到官網：http://bower.io/
 NPM (Node Package Manager)
 Node.js 的套件管理員，如果你是前端工程師應該很熟悉，因為你可以透過
bower它來進行前端 CSS 與 JS 的安裝，再使用 grunt 進行自動化的打包與壓縮
前端 CSS 與 JS的作業。

ASP.NET 5 的專案結構 (2)
• wwwroot
 存放所有網站使用到的靜態檔案，如：圖片、CSS、JavaScript 檔案
 解決了以往程式檔案與靜態檔案放在一起的問題
 同時，它也是程式執行的起點 (根)
• Config.json
 取代以前 web.config 設定 ConnectionString與AppSetting
• Project.json
 取代以前 web.config，定義專案使用到的組件相依性
• Gruntfile.js
 透過它，在工作執行器裡自動化編譯CoffeeScript、TypeScript、打包CSS/JS等作業
• Package.json
 管理 npm 的套件清單，這裡你會常看到在這裡 grunt 工作執行器等套件

Demo：
使用 ASP.NET 5 Empty專案
建立一個 MVC6 應用程式

什麼是 Grunt
• 以 Node.js 為基礎所開發的命令列工具
• 將一些
• 並且將這些工作由 task runner來依序處理

安裝需要的 Grunt 的 Plug-In 套件
• 定義好需要的 Grunt 的 Plug-In 套件

安裝 Grunt 命令列工具
• Grunt 也是建構在 Node.js 上
npm install –g grunt-cli命令：

執行 grunt task 輸出 .js/.css 檔案
• 建立基本的 gruntfile.js 檔案

執行 grunt task 輸出 .js/.css 檔案
• 使用命令列工具 grunt

使用 Task Runner Explorer 輸出 .js/.css
• 在 Visual Studio 2015 的選單 View –> Other Windows –> Task
Runner Explorer

所謂的 K？
• 用來管理 ASP.NET 5 的執行環境的工具
• 可分為三類：
 KVM (K Version Manager)
 KRE (K Runtime Environment)
 KPM (K Package Manager)
 K

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

安裝 KRE
• 要安裝 KRE 你得先安裝 KVM
• 安裝 KVM 可透過 PowerShell 命令來安裝
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object
net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/master/kvminstall.ps1'))"

• 再使用 kvm 來安裝 kre
kvm install latest

KRE (K Runtime Emvironment)
• .NET Core CLR 的執行環境
• 背後是由 KLR.EXE 來負責
• KLR 會帶起一個載入器 Loader，由 project.json 內
指定的 Runtime 來決定運行的平台。

KPM (K Package Manager)
• 套件管理工具
• 伺服器端的套件還是以 NuGet 為主

kpm 是 Microsoft.Framework.PackageManager
• 還原應用程式本身的組件
kpm restore
• 製作應用程式的 NuGet Package
kpm build
• 封裝應用程式
kpm pack
常用命令

ASP.NET 5 with MVC 6 新增功能
1. VCs (View Components) 頁面檢視元件
2. (Injecting a service into a view) 服務檢視注入
3. TagHelper 標籤補助方法

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

(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 標籤補助方法
• 取代原本的 HtmlHelper 自定義 HTML 標籤的方式
• 定義標籤輸出
@Html.Label(“UserName”, “UserName：”, new { @class = "col-md-2 control-label" })
[HtmlElementName("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 中不變的技術
Razor

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 的註冊

移轉 ASP.NET MVC 5 到 ASP.NET
MVC 6？有移轉問題？

MVC 5 移轉到 MVC 6 的方式
• 如果你的應用程式沒有考慮跨其它平台 Linux、UNIX、MAC OS 等
• 你並不需要做移轉這件事，可繼續執行在.NET Framework 4.6 的
Full .NET CLR 中
• 若真要移轉，你得改變程式裡，用到與 System.Web 相依的部分
• 移轉 ASP.NET MVC 5 改變幅度最小
• 步驟
 改使用 project.json 加入相關參考
 改使用 config.json 設定 ConnectionString
 在 Startup.cs 加入需要使用的 Middleware 服務，註冊需要的介面
 改用 bower 安裝 bootstrap & jquery 前端元件
 透過 K 來進行 Code-First 的 add migration 作業

對於技術只是工作？熱情？
• 你對於自己的工作是不是充滿熱情？
• 對於吸收新知是不是充滿興趣？
• 你是不是偶而會了解產業脈動？市場需求？不要只是看技術資訊。
• 技術或許更多更雜
 但『服務』、『人』才是重點
 眼光要遠、洞察力、投資報酬率？
 多與其他的開發人員互動 (twMVC, Study4, SQL PASS...)
• 回到技術面，平台不再是問題
 多了解其他平台吧 Linux, Unix, OS X, AIX 等等
 了解一些前端的開發技術吧，比如早就跨多個平台的 JavaScript/HTML5, 以
及 AngularJS
 未來，服務會是重點
 多了解雲端的開發吧

謝謝您的參與及鼓勵
期待明年再相逢!!

相關連結
• ASP.NET 5 相關連結
http://www.asp.net/vnext
http://katanaproject.codeplex.com/
http://blogs.msdn.com/b/dotnet/archive/2014/12/04/introduci
ng-net-core.aspx
http://owin.org/
https://msdn.microsoft.com/en-us/magazine/dn879354.aspx

Summary
• 不一定只能 Run 在 IIS
• 目前內含MVC 6 框架，沒有 WebForm 的框架
• 移除掉原本與Windows & IIS 綁的太緊的組件
• Run Any Host, Any Platform
• DI 相依性注入
• 使用新的 Roslyn (羅斯林) 編譯器
• 開源 (Open Source)，並發布在 GitHub 平台
• 引進 Bower & Grunt
• 雲端最佳化 (.NET Core)

Asp.net mvc 6 新功能初探

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Asp.net mvc 6 新功能初探

Similaire à Asp.net mvc 6 新功能初探 (20)

Plus de Gelis Wu

Plus de Gelis Wu (20)

Asp.net mvc 6 新功能初探

Notes de l'éditeur