ASP.NET Core MVC 2.2
從開發到測試
聖殿祭司。奚江華

個⼈人背景簡介
著有ASP.NET 2.0、3.5、4.5、4.6等熱⾨門𣈱銷書籍，以
及ASP.NET MVC 5.x範例例完美演繹
歷任台灣微軟MSDN、TechEd、TechDay研討會講師
曾數屆當選微軟MVP
國內各⼤大上市公司及⼤大專院校之培訓講師
曾發表⽂文章刊於ITHOME電腦週刊

ASP.NET Core MVC 2.2課程
聖殿祭司的課程簡介

https://www.codemagic.com.tw/
https://www.facebook.com/CodeMagicTw/

Bootstrap 在MVC中的整合應⽤用
Chart.js / JSON與Core Web API整合
Razor Pages新型態開發專案
Tag Helpers與View Components
Entity Framework Core資料庫存取
Unit Test單元測試
Routing路路由實戰案例例
將ASP.NET Core MVC部署到Azure雲端
ASP.NET Core MVC 2.2課程綱要
.NET Core跨平台開發環境與CLI⼯工具
Web Hosting主機設定與管理理
⽤用Configuration框架管理理組態設定
IoC Container與Dependency
Injection
⽤用Middleware中介軟體處理理HTTP
Pipeline
Dev, Staging及Production
多重環境的應⽤用
⽤用Logging API記錄系統資訊

Agenda(1)
.NET Core基礎資訊, .NET Core vs. .NET Framework
⽤用CLI tools管理理你的專案
ASP.NET Core 2.x版本差異異
MVC 5遷移之結構變更更
以Card⼈人物牌卡為例例
Routing路路由

Agenda(2)
Unit Testing單元測試
Dependency Injection
ASP.NET Core 2.2新鮮事

.NET Core基礎資訊

跨平台 Windows平台
.NET Core .NET Framework
ASP.NET Core ASP.NET
ASP.NET Core MVC ASP.NET MVC
.NET Core與.NET名詞對比

兩兩種.NET Core開發途徑
Visual Studio 2017 & 2019
CLI + ⽂文字編輯器 ( Visual Studio Code, vim, Atom…)
Visual Studio
2017/2019
Visual Studio
for Mac
Visual Studio
Code
.NET Core
CLI tools

內建Fundamentals基礎服務

ASP.NET Core四個靈魂⼈人物
Web Host：負責應⽤用程式啟動/⽣生命週期管理理
Configuration：作為組態管理理系統
Dependency Injection：注入相依性服務
Middleware：組成HTTP Pipeline，處理理請求

.NET Core特⾊色與賣點
Cross-platform
Consistent across architecture
Command-line tools
Flexible deployment
Compatible
Open source
Supported by Microsoft

.NET的野⼼心與企圖⼼心
DESKTOP WEB CLOUD MOBILE GAMING IoT AI
.NET

.NET Core vs.
.NET Framework
怎麼選？

.NET Core / .NET Framework

Choosing .NET Core
Cross-platform
Targeting microservices
Using Docker containers
High-performance and scalable
Side-by-side .NET versions

Choosing .NET Framework
Your app uses third-party .NET libraries or NuGet
packages not available for .NET Core.
Your app uses .NET technologies that aren't available
for .NET Core.
Your app uses a platform that doesn’t support .NET
Core.

ASP.NET Core 2.x版本差異異

三種ASP.NET Core選擇
ASP.NET Core MVC 2.0 / 2.1 / 2.2 ？
ASP.NET Core 2.0不考慮
jQuery Validation v1.14.0
ASP.NET Core 2.1
Bootstrap 3.3.7 + jQuery
ASP.NET Core 2.2
Bootstrap 4.1.3 + jQuery 3.3.1

ASP.NET Core 2.0, 2.1, 2.2
三者看似相同的⼩小改版，怎麼選？
ASP.NET Core 2.0：Execution Performance
Microsoft.AspNetCore.All ( metapackage )
ASP.NET Core 2.1：Build & Execution Performance
ASP.NET Core 2.2：Functional ，APIs Performance
ASP.NET Core 2.1 & 2.2
Shared Framework — Microsoft.AspNetCore.App, *.All

Runtime Package Store
ASP.NET Core 2.0
/usr/local/share/dotnet/store/x64/netcoreapp2.0
ASP.NET Core 2.1 & 2.2
/usr/local/share/dotnet/shared/Microsoft.AspNetCore.app/

ASP.NET Core MVC 2.1樣板

ASP.NET Core MVC 2.2樣板

MVC 5遷移之結構變更更
從MVC 5移轉到ASP.NET Core 2.1

Web Root
Content Root

MVC5遷移後哪些東⻄西消失？
Global.asax檔 ➔ Startup.cs
Web.config檔 ➔ appsettings.json (組態值, 資料庫連線)
Content, fonts資料夾移⾄至➔ wwwroot資料夾
App_Start資料夾消失了了
BundleConfig.cs檔( Bundle & Minification )
FilterConfig.cs檔 ( Filtering )
RouteConfig.cs檔 ( 路路由 ) ➔ Main()

MVC 5哪些機制沿⽤用?
Controllers ( ViewData, ViewBag, Model )
ActionResult ➔ IActionResult
Models, Model Annotation Model Validation
Model Binding
Razor Views, Partial View( .cshtml ), but Tag Helpers
Scaffolding CRUD（Model ➔ Controller & Views）

MVC 5哪些保留留，但改變了了？
NuGet package & Reference在專案中位置和形式改變
Routing路路由設定位置改變了了
Filter設定位置改變了了
Scaffolding CRUD
Tag Helpers為主 ，Html Helpers為輔
EF - Dependency Injection, Options Pattern
Action - IActionResult, Async
web.config <connectionString> ➔ appsettings.json

ASP.NET Core新增了了哪些?
.NET Core SDK , CLI命令
ASP.NET Core Fundamentals
四⼤大⽀支柱 Hosting, Configuration, Dependency Injection, Middleware
Tag Helpers ( 變成Razor View的主⾓角 )
View Components ( View可直接存取資料庫 )
_ViewImport.cshtml替Views加上共⽤用的命名空間參參考
Logging

以Card⼈人物牌卡為例例
從MVC 5移轉得到體悟

MVC 5 App的組成
圖片, css, js
Model
Controller
View,Partial View
DbContext
資料庫Connection
EF程式

移轉項⽬目(1)
Content(css, js, image , fonts) ➔ wwwroot
Controller ➔ ActionResult : IActionResult
Model (沒有變化)
Views ➔
Razor View, Partial View ( Tag Helpers)
_ViewImports.cshtml ( View參參考的命名空間 )
變更更所有專案的namespace命名空間名稱

移轉項⽬目(2)
Bundling & Minification Removed
@Styles.Render(…) , @Scripts.Render(…) Dead
_Layout.cshmtl
@Style.Render(…), @Script.Render(…) Removed
@RenderSection() is alive
加入ASP.NET Core Environment

Partial View部分檢視異異動
舊語法：
@Html.Partial("_CardPartial", model)
新語法：
<partial name="_CardPartial" model="model" />
@await Html.PartialAsync("_CardPartial", model)
@{await Html.RenderPartialAsync("_CardPartial", model); }

以⼈人物牌卡為例例
從哪跌倒，再從哪站起來來

Routing路路由

Routing Types
Convention Route
Attribue Route

Unit Testing單元測試

.NET Core內建單元測試框架
dotnet new
dotnet new mstest
Templates Short Name Language Tags
-----------------------------------------------------------------------
Unit Test Project mstest [C#], F#, VB Test/MSTest
NUnit 3 Test Project nunit [C#], F#, VB Test/NUnit
xUnit Test Project xunit [C#], F#, VB Test/xUnit

VS 2017單元測試專案樣板

MSTest
using Microsoft.VisualStudio.TestTools.UnitTesting;
namespace CoreRazor.MSTest
{
[TestClass]
public class UnitTest1
{
[TestMethod]
public void TestMethod1()
{
}
}
}

NUnit
using NUnit.Framework;
namespace Tests
{
public class Tests
{
[SetUp]
public void Setup()
{
}
[Test]
public void Test1()
{
Assert.Pass();
}
}
}

xUnit
using Xunit;
namespace CoreRazor.xUnit
{
public class UnitTest1
{
[Fact]
public void Test1()
{
}
}
}

3A原則 (AAA)
Public void TestMethod()
{
//Arrange
…
//Act
…
//Assert
…
}
初始化、配置、設定
動作(執⾏行行)
斷⾔言(評估執⾏行行結果預期)

Unit Test — Bad Naming
Public void Test_SqrtValue()
{
//Arrange
Var Calc = new Calc();
//Act
Var sqrtValue = Calc.GetSqrt(4);
//Assert
Assert.Equal(2, sqrtValue);
}
初始化
動作(執⾏行行)
斷⾔言(評估執⾏行行結果預

Unit Test — Good Naming
Public void GetSqrt_SingleNumber_ReturnrSqrtValue()
{
//Arrange
Var Calc = new Calc();
//Act
Var sqrtValue = Calc.GetSqrt(4);
//Assert
Assert.Equal(2, sqrtValue);
}
MethodName_TestScenario_ExpectedBehavior

三個測試相關⼯工具
Test Explorer
Live Testing即時測試
Code Coverage程式碼覆蓋率

單元測試的運⽤用

Dependency Injection
相依性注入

What’s Dependency ?
Dependency中⽂文是依賴
“依賴”是指⼀一個object需要另⼀一個object物件
例例如⼀一個⼈人需要⽔水，因⽽而對⽔水產⽣生依賴關係
在Class類別中使⽤用依賴物件，常⽤用new Instance
FubonBankServices service = new FubonBankServices()

但～相依特定實作是不好的
FubonBankServices service = new FubonBankServices()
EsunBankServices service = new EsunBankServices()
相依特定實作，⼀一旦替換實作，所有類別程式必須修改
在專案中⼀一堆類別程式初始FubonBankServices，若若
FubonBankSevices需要組態，會在專案的各⾓角設定組態
未實作interface介⾯面，導致單元測試難以Mocking或Stubing

如何解決直接相依性問題？
利利⽤用IoC控制反轉技巧，解耦直接相依性
⽤用interface介⾯面抽象化特定實作，依賴介⾯面，不依賴實作
Services繼承並實作interface介⾯面
在ASP.NET Core中Startup類別中註冊Services服務
在app程式中以Dependency Injection注入Service服務
Classes, Controllers, Views…

定義interface介⾯面：IBankService
public interface IBankService
{
string BankId { get; } //銀行代碼
string BankName { get }; //銀行名稱
bool Withdraw(decimal dollars); //提款
bool Deposit(decimal dollars); //存取
decimal AccountBalance(int depositorId); //銀行餘額
}

Services繼承並實作interface介⾯面
public class FubonBankService : IBankService
{
public string BankId { get; private set; }
public string BankName { get; private set; }
public FubonBankService()
{
BankId = "012";
BankName = "台北富邦銀行";
}
…
}
public class EsunBankService : IBankService
{
public string BankId { get; private set; }
public string BankName { get; private set; }
public EsunBankService()
{
BankId = "808";
BankName = "玉山銀行";
}
...
}
富邦銀⾏行行繼承介⾯面 ⽟玉⼭山銀⾏行行繼承介⾯面

在IoC container註冊服務
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddTransient<IBankService, FubonBankService>();
}
...
}
介⾯面 實作Lifetime模式

在Controller使⽤用DI注入服務
public class BankServicesController : Controller
{
private readonly IBankService _bankService;
public BankServicesController(IBankService bankService)
{
_bankService = bankService;
}
public IActionResult InjectAction([FromServices] IBankService myBankService)
{
var bankModel = myBankService;
return View(bankModel);
}
}
在建構式注入服務
在Action注入服務
Service看不⾒見見特定實作名稱
套⽤用Attribute

在View直接以@inject注入服務
@inject IBankService BankService
<ul>
<li>銀行代碼 : @BankService.BankId</li>
<li>銀行名稱 : @BankService.BankName</li>
<li>存款餘額 : @BankService.AccountBalance(10872)</li>
</ul>
2.注入Service服務實例例
1.Inject指⽰示詞
3.使⽤用Service服務

註冊服務的三種Lifetime指令
AddScoped⽅方法—Scoped lifetime service
are created once per request
AddTransient⽅方法 — Transient lifetime service
are created each time they're requested
AddSingleton⽅方法 — Singleton lifetime service
are only created at the first request time

DI可應⽤用到哪些類型程式？
App Startup ( Startup.cs )
Controllers / Action
Views
Custom Classes , Services
Custom Middleware Components

DI相依性注入的運⽤用

ASP.NET Core 2.2新鮮事

Better integration with popular Open API (Swagger) libraries including design-time
checks with code analyzers
Introduction of Endpoint Routing with up to 20% improved routing performance in
MVC
Improved URL generation with the LinkGenerator class & support for route
Parameter Transformers (and a post from Scott Hanselman)
New Health Checks API for application health monitoring
Up to 400% improved throughput on IIS due to in-process hosting support
Up to 15% improved MVC model validation performance
Problem Details (RFC 7807) support in MVC for detailed API error results
Preview of HTTP/2 server support in ASP.NET Core
Template updates for Bootstrap 4 and Angular 6
Java client for ASP.NET Core SignalR
Up to 60% improved HTTP Client performance on Linux and 20% on Windows
http://bit.ly/2sn6oWT

.NET Core Roadmap
.NET Core 2.2 2018 /12⽉月正式版
Visual Studio 2019
• 2018 /12⽉月預覽版
• 2019上半年年 Final正式版
•
.NET Core 3.0
• 2018 /12⽉月預覽版
• 2019下半年年 Final正式版
Entity Framework Core 3.0 with .NET Core 3.0

The End