前陣子 ASP.NET Blazor 的出現，在整個 ASP.NET 市場投下震撼彈。只要你會寫 C# / ASP.NET Core，不需要撰寫 JavaScript 也可以成為一個「前端工程師」。這話說起來有點奇怪，但確實如此，由於 WebAssembly 的出現，讓後端開發者也能用熟悉的程式語言與框架，開發出即時互動的 SPA 網站應用程式。本次演說，將帶來 .NET 最新最夯的 Blazor 框架，讓你迅速了解如何利用 Blazor 打造即時互動的網站應用程式。

1. 多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/

2. 簡介 Blazor 開發框架

3. • Blazor .NET C#
HTML browser WebAssembly
• Blazor SPA
.NET Core C# Razor
C#
主流瀏覽器
• Blazor 技術可實現以 C# 進行全端 Web 開發！

4. .cs
.cshtml
瀏覽器端
WebAssembly
(mono.wasm)
.NET
(mscorlib.dll,
System.Core.dll,…)
App.dll
編譯成 .NET 組件

6. • 純前端 SPA 應用程式
• 前後端分離整合架構 共用 .NET Standard 標準類別庫
• 純後端 SPA 應用程式

7. Browser
UI thread
Blazor

8. Browser
UI Web Worker
Blazor

9. dotnet.exe
Blazor
ELECTRON
IPC

10. Browser dotnet.exe
ASP.NET Core
Blazor
SignalR

11. 第一次 Blazor 就上手

12. .NET Core 2.1 SDK
Blazor CLI templates
• dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Visual Studio 2017
ASP.NET 與網頁程式開發
Blazor Language Services

13. • Ctrl-F5 目前還不支援在 Visual Studio 2017 中偵錯

16. • 目前無法在 Visual Studio 2017 中對 Blazor 應用程式進行偵錯
• 但是可以在 Google Chrome 瀏覽器中偵錯 (實驗階段)

26. Blazor 元件化架構

27. NavMenu
<div class="sidebar">
<NavMenu />
</div>

30. Blazor 資料繫結

31. • @Name
• <p style="background-color: @Background;">Notification</p>
• <p class="note @((IsActive ? "highlight" : ""))">Notes</p>
• <button onclick="@ChangeValues">Change</button>
• <button onclick="@(() => ChangeValues())">Change</button>
• @functions {
private void ChangeValues() {
}
}

32. • <input type="text" bind="@Name" />
• <input type="number" bind="@Age" />
• <input type="checkbox" bind="@IsAdmin" />
• <select id="select-box" bind="@TypeOfEmployee">
<option value=@MyType.Employee>@MyType.Employee.ToString()</option>
<option value=@MyType.Contractor>@MyType.Contractor.ToString()</option>
<option value=@MyType.Intern>@MyType.Intern.ToString()</option>
</select>
bind onchange
bind onchange

34. <SurveyPrompt Title="How is Blazor working for you?" />
[Parameter]

35. <ChildComponent OnSomeEvent=@ChildEventClicked />
<button onclick=@OnClick>請按我(子元件)</button>
@functions {
[Parameter] Action string OnSomeEvent { get; set; }
void OnClick()
{
OnSomeEvent?.Invoke("Clicked!");
}
}

37. Blazor 路由機制

38. Ctrl-T Counter
[Microsoft.AspNetCore.Blazor.Components.RouteAttribute("/counter")]

39. @page "/hello-planet/{Planet}"
<h1>Hello @Planet!</h1>
@functions {
[Parameter] public string Planet { get; set; }
protected override void OnInit()
{
Console.WriteLine(Planet);
}
}

40. <NavLink href="/hello-universe">Hello Universe</NavLink>
@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper
UriHelper
@functions {
private void Navigate() {
UriHelper.NavigateTo("/hello-world");
}
}

41. Blazor 與 HttpClient

42. @inject HttpClient Http
@functions {
private async Task PrintWebApiResponse()
{
var res = await Http.GetStringAsync("/api/Customer");
var data = await res.Content.ReadAsStringAsync();
Console.WriteLine(data);
}
}

43. 偵錯方法

44. --remote-debugging-port=9222 53211

45. 未來規劃

50. https://blazor.net
Blazor JavaScript interop
https://learn-blazor.com/
https://github.com/aspnet/blazor
https://github.com/mono/mono
https://blazor.net/community
https://gitter.im/aspnet/blazor
https://www.youtube.com/watch?v=61qmX5eAPwI

51. http://blog.miniasp.com/
http://www.facebook.com/will.fans
http://www.plurk.com/willh/invite
https://twitter.com/Will_Huang

52. 多奇數位創意
Angular Taiwan

53. www.dotnetconf.net