วชิรวิชญ์ จิวานิจ

การสร้าง Visual Studio Project Template

by

ความสามารถอย่างหนึ่งที่น่าสนใจของ Visual Studio คือ การนำ Project ที่เราสร้างขึ้นมาใช้เป็นตัวตั้งต้นหรือ Project Template เพื่อสร้าง Project ต่อๆ ไปได้ ทำให้ Project ใหม่ที่สร้างขึ้น มีฟังกชันพื้นฐานพร้อมใช้งานแล้ว ตามที่กำหนดไว้ใน Template เช่น มีระบบเมนู มีตัวอย่างหน้าจอพร้อมการเชื่อมต่อฐานข้อมูล มีระบบ Authentication เป็นต้น ฟังกชันพื้นฐานต่าง ๆ เหล่านี้ จะทำให้เราสามารถเริ่ม Project ใหม่ได้อย่างรวดเร็ว วิธีการสร้าง Project Template ด้วย Visual Studio 2022 หลังจากที่เราเตรียม Project ตั้งต้นไว้แล้ว ดังนี้ 1. ไปที่เมนู Project -> Export Template 2. Export Template Wizard เลือก Project template … Read more

การสร้าง GenericList Component (Blazor) ตัวช่วยแสดงผลรายการข้อมูล

by

การสร้าง User Interface สำหรับแสดงผลลัพธ์จากการ Query ข้อมูลในฐานข้อมูลนั้น โดยปกติ UI จะต้องสามารถกำหนดการแสดงผลเพื่อตอบสนองต่อเหตุการณ์ที่เกิดขึ้น 3 สถานะได้ คือ ระหว่างที่กำลังรอผลการ Query ข้อมูล UI ควรแสดงให้เห็นว่ากำลังประมวลผล โดยแสดงเป็นข้อความหรือรูปภาพ Loading ก็ได้ กรณี Query แล้วไม่พบข้อมูล ความแสดงผลให้ทราบว่าไม่พบข้อมูล กรณี Query แล้วพบข้อมูล จะนำข้อมูลมาแสดงผลด้วย Table หรือ List หรือ อื่นๆ ตามความเหมาะสม ตัวอย่างเช่น ต้องการสร้างหน้าจอแสดงผลรายการข้อมูลสินค้าโดย Query ข้อมูลเก็บไว้ในตัวแปรชื่อ ProductList จะมีค่าในสถานะต่าง ๆ ดังนี้ ระหว่างที่กำลังรอผลการ Query จะมี ProductList == null กรณี Query แล้วไม่พบข้อมูล ค่า ProductList.Count == 0 … Read more

สร้างข้อความแจ้งเตือนด้วย Blazored Toast

by

ข้อความแจ้งเตือนการดำเนินการต่าง ๆ ไม่ว่าจะเป็นข้อความ 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 … Read more

Blazor : การเรียกใช้ JavaScript จาก C#

by

ถ้าจะพูดว่า “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 … Read more

เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)

by

หากคุณเป็นนักพัฒนาเว็บแอพที่ชอบฟังเพลงยุค 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 … Read more