Blazor - Full-stack web development with C# and WebAssembly

Blazor คือ Single-Page Web App Framework (SPA) พัฒนาด้วย .NET (C#) แล้วเอาไปรันบน Browser ด้วย WebAssembly. (อ่านข้อมูลเพิ่มเติม)

เมื่อวันที่ 2 พฤษภาคม 2018 Blazor ประกาศออกเวอร์ชั่น 0.3.0 ออกมาแก้บั๊คและเพิ่มฟีเจอร์ใหม่ๆดังนี้

  • Project templates เปลี่ยนไปใช้ Bootstrap 4 แล้ว
  • ซัพพอร์ต Async event handlers
  • เพิ่มอีเว้นใหม่ 2 ตัวคือ OnAfterRender กับ OnAfterRenderAsync
  • Component and element refs
  • Better encapsulation of component parameters
  • Simplified layouts

ดูข้อมูลเพิ่มเติมได้ที่ https://github.com/aspnet/Blazor/releases

Get started with Blazor
ติดตั้งโปรแกรมเพื่อทดสอบการพัฒนา Blazor 0.3.0 ดังนี้

  1. ติดตั้ง docker อิมเมจ microsoft/dotnet เวอร์ชั่น 2.1.300-preview2-sdk ขนาด 582 MB
docker pull microsoft/dotnet:2.1.300-preview2-sdk

2018-05-03_23-03-40

  1. สร้าง Directory สำหรับโปรเจ็ค
mkdir CBBlazor01
cd CBBlazor01/

เช็ค Path ของ Directory ด้วยคำสั่ง แล้ว copy ที่อยู่เก็บเอาไว้ (ตัวอย่างของผมคือ /Users/bond/CBBlazor01)

pwd

2018-05-03_23-53-33

  1. เปิดโปรแกรม Visual Studio Code (ดาวน์โหลดและติดตั้งโปรแกรมได้ที่นี่ https://code.visualstudio.com) แล้ว Open Folder ไปที่ CBBlazor01 แล้วเปิด Terminal ด้วยการกดไปที่ View => Integrated Terminal แล้วพิมพ์คำสั่ง (แก้ Path ที่ Copy มาแทนที่ /Users/bond/CBBlazor01 ด้วยนะ)
docker run --rm -it -p 5000:5000 -v /Users/bond/CBBlazor01:/CBBlazor01 microsoft/dotnet:2.1.300-preview2-sdk

  1. ติดตั้ง Blazor Template ด้วยคำสั่งนี้ จะได้ Template ใหม่ 3 ตัวคือ
  • Blazor (hosted in ASP .NET server)
  • Blazor Library
  • Blazor (standalone)
dotnet new -i Microsoft.AspNetCore.Blazor.Templates

  1. สร้างโปรเจ็ค Blazor ใหม่ด้วยคำสั่ง แล้วสังเกตุที่ VS Code จะเห็น Project Template ปรากฏ
dotnet new blazor -o CBBlazor01

  1. เปิดไฟล์ launchSettings.json ใน Properties Directory แก้ไข applicationUrl แล้ว Save
"applicationUrl": "http://*:5000/"

  1. ที่ Terminal พิมพ์คำสั่ง สังเกตุ Port ที่รันจะต้องเป็น 5000
cd CBBlazor01/
dotnet run

  1. เปิด Browser แล้วไปที่ http://localhost:5000

  1. คลิ๊กขวา View Source ดูจะเห็นว่ามันคือ Web Assembly นี่เอง

ติดตามบทความเกี่ยวกับ Blazor ต่อไปได้ที่ CodeBangkok นะครับ

บริจาค (Donate) ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/codebangkok-i219874509-s334754949.html

https://www.lazada.co.th/products/c-net-core-i221844611-s338593893.html?spm=a2o6z.10453683.17.2.77ba30028gg3mg&mp=3