Author: wachirawit.j

ข้อความแจ้งเตือนการดำเนินการต่าง ๆ ไม่ว่าจะเป็นข้อความ Success, Error, Warning หรือ Information ภายในแอพ เป็นอีกหนึ่งฟังก์ชั่นที่มีการนำมาใช้งานบ่อยๆ เพื่อทำให้ระบบน่าใช้งานมากยิ่งขึ้น ในการเขียนแอพด้วย Blazor ก็มีของฟรีให้ติดตั้งและใช้งานได้เลย ชื่อว่า Blazored Toast ซึ่งเป็น JavaScript ที่ได้รับการ Implement ให้ใช้งานกับ Blazor ได้

ตัวอย่างการใช้ Blazored Toast

ก่อนอื่นให้สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) ก่อน จากนั้นทำตามขั้นตอนดังนี้

ติดตั้ง Blazored Toast ผ่าน NuGet package manager

1. คลิกเมนู Project

2. คลิก Manage NuGet Packages

จะปรากฎหน้าจอ NuGet Package Manager ให้ทำดังนี้

1. คลิก Browse

2. พิมพ์ Blazored Toast

3. คลิกเลือก Blazored.Toast 4. เลือกเวอร์ชั่นล่าสุด และคลิก Install

การตั้งค่า

1. Register Services โดยการปรับปรุงไฟล์ Startup.cs ใส่โค้ด Using Blazored.Toast และเพิ่มโค้ด services.AddBlazoredToast(); ในฟังก์ชั่น ConfigureServices ดังรูป

2. เปิดไฟล์ _Import.razor เพิ่มโค้ดดังนี้

@using Blazored.Toast

@using Blazored.Toast.Services

3. ตั้งค่าเริ่มต้นก่อนใช้งานใน MainLayout.razor โดยการเปิดไฟล์ MainLayout.razor และเพิ่มโค้ดดังรูป

4. อ้างอิง Style sheet ในไฟล์ _Host.cshtml

<link href=”_content/Blazored.Toast/blazored-toast.min.css” rel=”stylesheet” />

การนำไปใช้งาน

1. สร้างไฟล์ใหม่ชื่อ ToastDemo.razor โดยคลิกขวาที่โฟลเดอร์ Pages เลือก Add -> Razor Components ดังรูป

2. เลือก Razor Component ตั้งชื่อไฟล์ ToastDemo.razor และคลิกปุ่ม Add

3. เขียนโค้ดใช้งาน โดยให้ inject IToastService ก่อน จากนั้นจึงเขียนโค้ดตัวอย่างโดยให้ Toast ทำงานเมื่อคลิกปุ่ม 4 ปุ่ม เพื่อแสดงข้อความแจ้งเตือน Information, Warning, Success และ Error

4. กด F5 และเปิด Url  https://localhost:44381/ToastDemo จากนั้นลองคลิกแต่ละปุ่มจะได้ผลลัพธ์ดังรูป

จะเห็นว่าเราไม่จำเป็นต้องเขียน JavaScript เองก็สามารถใช้งาน Toast ได้ ถือว่าเป็นการประหยัดเวลาในส่วนนี้ และทำให้เราสามารถโฟกัสการเขียนโค้ดในส่วนที่เป็น Core หลักของระบบได้อย่างเต็มที่

ถ้าจะพูดว่า “Blazor เป็น SPA Framework ที่ใช้ C# แทน JavaScript” ก็ไม่ถูกต้องเสียทีเดียว เนื่องจากว่า JavaScript เป็นภาษาที่มีมานานแล้ว และใช้งานกันอย่างแพร่หลาย สามารถใช้ทำอะไรได้อย่าง แต่ Blazor นั้นถือได้ว่าเป็นน้องใหม่เพิ่งเข้าวงการ ที่บางครั้งก็ยังต้องพึ่งรุ่นพี่อย่าง JavaScript อยู่ดี ตัวอย่างเช่น การดึงข้อมูลพิกัดตำแหน่ง (Location) จาก Browser สามารถทำได้ด้วย JavaScript แต่ C# ทำไม่ได้ ดังนั้น Blazor ก็เลยจัดการกับปัญหานี้โดยการให้ C# ทำงานร่วมกับ JavaScript ซะเลย อะไรที่ C# ทำไม่ได้ ก็ให้ JavaScript ทำแทนไปเลย

ตัวอย่างแอพต่อไปนี้จะเป็นการเรียกใช้ Bootstrap modal

หลังจากที่สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) แล้ว ทำตามขั้นตอนดังนี้

1. เปิดไฟล์ _Host.cshtml
2. เขียนโค้ดอ้างอิง jquery.min.js และ bootstrap.min.js
3. เขียนโค้ดฟังก์ชั่น toggleModal เพื่อสั่งเปิดปิด Modal

4. เปิดไฟล์ Index.razor
5. Inject JSRuntime
6. สร้างปุ่มสำหรับคลิกเพื่อเปิด Modal โดยใส่ onclick event ให้เรียกฟังก์ชั่น ShowModal
7. สร้าง Bootstrap modal กำหนด id=”exampleModal”
8. โค้ด C# ฟังก์ชั่น ShowModal สั่งเปิด Modal

9. กด F5 เพื่อดูผลลัพธ์

เพียงเท่านี้ก็จะสามารถเรียกใช้งาน JavaScript ผ่าน C# ได้แล้ว จะเห็นว่ามันไม่ได้ยากอย่างที่คิด

หากคุณเป็นนักพัฒนาเว็บแอพที่ชอบฟังเพลงยุค 90 คุณก็คงจะคุ้นเคยกับ Multiple Page Applications (MPA) เป็นอย่างดี  MPA หรือเว็บแบบดั้งเดิมนั้นสามารถสังเกตุได้จากการที่เราคลิกดูข้อมูล หรือเปลี่ยน URL หน้าเว็บจะโหลดใหม่ทั้งหน้า เพื่อดึงข้อมูลมาแสดงผลใหม่ใน Browser ดังรูป

ทุกวันนี้ก็ได้มีอีก Trend หนึ่งที่น่าสนใจ และมีการนำมาใช้สร้างเว็บแอพกันอย่างแพร่หลาย นั่นก็คือ Single Page Application หรือ SPA  โดยเว็บแบบนี้จะทำการโหลดหน้าเว็บจาก Request ครั้งแรกเท่านั้น หลังจากนั้นจะเป็นการรับส่งข้อมูลกันโดยใช้ JavaScript เข้ามาช่วย ทำให้ลดการ Reload หน้าเว็บโดยไม่จำเป็นลงไปได้ ข้อดีของเว็บแบบนี้คือ มี User Experience ที่ดีกว่า ตอบสนองได้อย่างรวดเร็ว และลดการทำงานของฝั่ง Server  ตัวอย่างเว็บไซต์แบบ SPA ที่เราใช้งานกันอยู่บ่อยๆ ได้แก่ Facebook, Instagram, Twitter, Google Mail เป็นต้น

ตัวอย่างของ SPA Framework

• Vue.js
• React.js
• AngularJS
• Ember.js
• Knockout.js
• Meteor.js
• Blazor

จาก Framework ตัวอย่างทั้งหมดจะเป็น JavaScript ยกเว้น Blazor ที่ใช้ C# แทน และในฐานะที่คุ้นเคยกับการเขียนโค้ด C# อยู่แล้ว Blazor จึงเป็นตัวเลือกที่น่าสนใจ

การสร้างแอพด้วย Blazor

เปิด Visual Studio 2019 คลิก Create a new project ก็จะเจอหน้าจอดังรูป จากนั้นให้เลือก Project templates เป็น Blazor Server App

หน้าจอ Configure your new project ให้ตั้งชื่อ Project name ว่า FirstApp.Web
ระบุ Location เป็น C:\Source\

หน้าจอ Additional information ให้เลือก Target Framework เป็น .NET 5.0

ถึงขั้นตอนนี้แล้วทำให้ได้ Project ใหม่ที่มีไฟล์ตั้งต้นไว้ให้แล้ว  โดยการเขียนเว็บด้วย Blazor นั้นจะใช้ไฟล์ชนิด Razor ซึ่งเป็นเทคโนโลยีการสร้าง View ของ ASP.NET MVC

กด F5 หรือคลิกปุ่มรัน เพื่อดูผลลัพธ์กันก่อน จะเห็นว่ามีตัวอย่างไว้ให้ศึกษา 2 เมนู คือ Counter และ Fetch data

เมนู Counter เป็นตัวอย่างของการสร้าง Blazor Component เมื่อคลิกปุ่ม Click me ก็จะทำให้ Current count มีค่าเพิ่มขึ้นทีละ 1 โดยสังเกตได้ว่า ในการคลิกปุ่มทุกครั้งจะไม่มีการ Reload หน้าเว็บใหม่ทั้งหน้า แต่มีการเปลี่ยนแปลงเฉพาะส่วนของตัวเลข Current count เท่านั้น

โค้ดตัวอย่าง Counter จะอยู่ในโฟลเดอร์ Pages ชื่อไฟล์ Counter.razor เมื่อเปิดดูจะพบว่าโค้ดมีส่วนสำคัญ 3 ส่วน คือ

a. Route หรือ URL ที่ใช้ในการเข้าถึงหน้าเว็บ ในที่นี้คือ /counter เวลาเข้าใช้งานก็จะเป็น https://localhost:44381/counter

b. View หรือส่วนของ HTML ใช้ในการจัดรูปแบบการแสดงผล

c. C# Code เป็นส่วนที่ใช้เขียนโค้ดควบคุมการแสดงผลของ View

มาถึงจุดนี้แล้ว ก็สามารถทดลองเขียนโปรแกรมเล่นๆ ได้ เช่น ถ้าต้องการให้คลิกปุ่ม Click me แล้ว ให้ตัวเลขเพิ่มครั้งละ 5 ก็สามารถทำได้ง่าย ๆ ดังรูป

Component สามารถนำมา Reuse ได้ เช่น ถ้าต้องการนำ Counter ไปใช้งานในหน้า Home ก็ทำได้โดยการเพิ่ม Markup up เข้าไปใน View ดังรูป หากต้องการ Counter หลายตัว ก็สามารถใส่ tag เพิ่มเข้าไปได้อีกตามต้องการ

จากตัวอย่างนี้จะเห็นได้ว่าหากผู้พัฒนามีความคุ้นเคยกับภาษา C# อยู่แล้ว ก็สามารถเขียนเว็บแอพแบบ SPA ด้วย Blazor ได้โดยใช้เวลาในการศึกษาเพิ่มเติมเพียงเล็กน้อยเท่านั้น ดังนั้น Blazor จึงเป็นตัวเลือกที่น่าสนใจ