Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)

1,951 views

Published on

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

Published in: Technology
  • Be the first to comment

使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)

  1. 1. 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. 簡介 Blazor 開發框架
  3. 3. • Blazor .NET C# HTML browser WebAssembly • Blazor SPA .NET Core C# Razor C# 主流瀏覽器 • Blazor 技術可實現以 C# 進行全端 Web 開發!
  4. 4. .cs .cshtml 瀏覽器端 WebAssembly (mono.wasm) .NET (mscorlib.dll, System.Core.dll,…) App.dll 編譯成 .NET 組件
  5. 5. • 純前端 SPA 應用程式 • 前後端分離整合架構 共用 .NET Standard 標準類別庫 • 純後端 SPA 應用程式
  6. 6. Browser UI thread Blazor
  7. 7. Browser UI Web Worker Blazor
  8. 8. dotnet.exe Blazor ELECTRON IPC
  9. 9. Browser dotnet.exe ASP.NET Core Blazor SignalR
  10. 10. 第一次 Blazor 就上手
  11. 11. .NET Core 2.1 SDK Blazor CLI templates • dotnet new -i Microsoft.AspNetCore.Blazor.Templates Visual Studio 2017 ASP.NET 與網頁程式開發 Blazor Language Services
  12. 12. • Ctrl-F5 目前還不支援在 Visual Studio 2017 中偵錯
  13. 13. • 目前無法在 Visual Studio 2017 中對 Blazor 應用程式進行偵錯 • 但是可以在 Google Chrome 瀏覽器中偵錯 (實驗階段)
  14. 14. Blazor 元件化架構
  15. 15. NavMenu <div class="sidebar"> <NavMenu /> </div>
  16. 16. Blazor 資料繫結
  17. 17. • @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() { } }
  18. 18. • <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
  19. 19. <SurveyPrompt Title="How is Blazor working for you?" /> [Parameter]
  20. 20. <ChildComponent OnSomeEvent=@ChildEventClicked /> <button onclick=@OnClick>請按我(子元件)</button> @functions { [Parameter] Action string OnSomeEvent { get; set; } void OnClick() { OnSomeEvent?.Invoke("Clicked!"); } }
  21. 21. Blazor 路由機制
  22. 22. Ctrl-T Counter [Microsoft.AspNetCore.Blazor.Components.RouteAttribute("/counter")]
  23. 23. @page "/hello-planet/{Planet}" <h1>Hello @Planet!</h1> @functions { [Parameter] public string Planet { get; set; } protected override void OnInit() { Console.WriteLine(Planet); } }
  24. 24. <NavLink href="/hello-universe">Hello Universe</NavLink> @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper @functions { private void Navigate() { UriHelper.NavigateTo("/hello-world"); } }
  25. 25. Blazor 與 HttpClient
  26. 26. @inject HttpClient Http @functions { private async Task PrintWebApiResponse() { var res = await Http.GetStringAsync("/api/Customer"); var data = await res.Content.ReadAsStringAsync(); Console.WriteLine(data); } }
  27. 27. 偵錯方法
  28. 28. --remote-debugging-port=9222 53211
  29. 29. 未來規劃
  30. 30. 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
  31. 31. http://blog.miniasp.com/ http://www.facebook.com/will.fans http://www.plurk.com/willh/invite https://twitter.com/Will_Huang
  32. 32. 多奇數位創意 Angular Taiwan
  33. 33. www.dotnetconf.net

×