ข้อความแจ้งเตือนการดำเนินการต่าง ๆ ไม่ว่าจะเป็นข้อความ 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 หลักของระบบได้อย่างเต็มที่