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

Post Views: 134

การสร้าง User Interface สำหรับแสดงผลลัพธ์จากการ Query ข้อมูลในฐานข้อมูลนั้น โดยปกติ UI จะต้องสามารถกำหนดการแสดงผลเพื่อตอบสนองต่อเหตุการณ์ที่เกิดขึ้น 3 สถานะได้ คือ

  1. ระหว่างที่กำลังรอผลการ Query ข้อมูล UI ควรแสดงให้เห็นว่ากำลังประมวลผล โดยแสดงเป็นข้อความหรือรูปภาพ Loading ก็ได้
  2. กรณี Query แล้วไม่พบข้อมูล ความแสดงผลให้ทราบว่าไม่พบข้อมูล
  3. กรณี Query แล้วพบข้อมูล จะนำข้อมูลมาแสดงผลด้วย Table หรือ List หรือ อื่นๆ ตามความเหมาะสม

ตัวอย่างเช่น ต้องการสร้างหน้าจอแสดงผลรายการข้อมูลสินค้าโดย Query ข้อมูลเก็บไว้ในตัวแปรชื่อ ProductList จะมีค่าในสถานะต่าง ๆ ดังนี้

  1. ระหว่างที่กำลังรอผลการ Query จะมี ProductList == null
  2. กรณี Query แล้วไม่พบข้อมูล ค่า ProductList.Count == 0
  3. กรณี Query แล้วพบข้อมูล ค่า ProductList.Count > 0

จะเป็นว่าเราสามารถสร้าง Component พื้นฐานไว้ใช้งาน (Reuse) เพื่อตอบสนองต่อสถานะทั้ง 3 ได้ ในที่นี่จะตั้งชื่อว่า GenericList Component (GenericList.razor) มีโค้ดดังนี้

วิธีการใช้งาน GenericList Component ทำได้โดยการกำหนด Parameter ชื่อ List และ WholeListTemplate ก็จะสามารถแสดงผลข้อมูลได้ตามต้องการ

รูปที่  1 ระหว่างที่กำลังรอผลการ Query
รูปที่  2 กรณี Query แล้วไม่พบข้อมูล
รูปที่  3 กรณี Query แล้วพบข้อมูล
Share the Post:

Related Posts

ทำความรู้จักกับ Outlook บนเว็บ

Post Views: 19 Outlook เป็นเครื่องมือจัดการอีเมลและปฏิทินที่ทรงพลัง ซึ่งช่วยให้คุณมีระเบียบและเพิ่มความสามารถในการทำงาน ด้วยอินเทอร์เฟซที่ใช้งานง่าย คุณสามารถจัดการกล่องขาเข้าของคุณ นัดหมาย และทำงานร่วมกับเพื่อนร่วมงานได้อย่างง่ายดาย ฟีเจอร์ที่แข็งแกร่งของ Outlook รวมถึงแม่แบบอีเมลที่ปรับแต่งได้ ความสามารถในการค้นหาขั้นสูง และการผสานรวมที่ไร้รอยต่อกับแอปพลิเคชัน Microsoft Office อื่นๆ ไม่ว่าคุณจะเป็นมืออาชีพที่ยุ่งอยู่หรือเป็นนักเรียนที่ต้องจัดการกับภารกิจหลายอย่าง Outlook

Read More

[บันทึกกันลืม] JupyterHub Authenticated with OIDC

Post Views: 43 ต่อจากตอนที่แล้ว [บันทึกกันลืม] JupyterHub ด้วย Docker คราวนี้ ถ้าต้องการให้ ยืนยันตัวตนด้วย OpenID เช่น PSU Passport เป็นต้น ก็ให้ทำดังนี้ ในไฟล์ jupyterhub_config.py ใส่

Read More