asp.net core

การสร้าง 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

Blazor Server Application : วิธีการ Export ข้อมูลเป็นไฟล์ XML

by

แนะนำวิธีการ Export ข้อมูลเป็นไฟล์ XML วิธีการเขียน Code1) สร้าง Folder xml สำหรับเก็บไฟล์ xml ในกรณีนี้อยู่ใน (wwwroot/files/xml) 2) สร้าง Razor Component ชื่อ ExportXML.razor ในกรณีนี้อยู่ใน (Pages/ExportXML.razor)3) จากนั้นเขียน Code ดังนี้ 4) ผลลัพธ์จากการ Export ข้อมูลเป็นไฟล์ XML 4.1) กรอกข้อมูล และกดปุ่ม Export XML 4.2) จะได้ไฟล์ person.xml 4.3) เมื่อเปิดไฟล์ person.xml จะแสดงข้อมูล ดังนี้

Blazor Server Application : การสร้างรูปภาพลายเซ็นโดยวิธีการพิมพ์ข้อความ

by

แนะนำวิธีการสร้างรูปภาพลายเซ็นโดยวิธีการพิมพ์ข้อความ วิธีการเตรียมฟอนต์1) เข้าเว็บไซต์ https://www.f0nt.com/release/worasait/2) ดาวน์โหลด ฟอนต์ Worasait (worasait.ttf) วิธีการเขียน Code1) ติดตั้ง NuGet ชื่อ System.Drawing.Common2) สร้าง Folder ชื่อ files สำหรับเก็บไฟล์ฟอนต์ ในกรณีนี้อยู่ใน (wwwroot/files/worasait.ttf) 3) สร้าง Razor Component ชื่อ SignatureType.razor ในกรณีนี้อยู่ใน (Pages/SignatureType.razor)4) จากนั้นเขียน Code ดังนี้ 5) ผลลัพธ์จากการสร้างรูปภาพลายเซ็นโดยวิธีการพิมพ์ข้อความ หมายเหตุ: วิธีการเปลี่ยนสีภาพลายเซ็น1) graphics.DrawString(Txt, oFont, Brushes.Black, 0, 0);2) เปลี่ยนจาก Brushes.Black เป็นสีที่ต้องการ เช่น Brushes.Red เป็นต้น

Blazor Server Application : วิธีการแปลงรูปภาพ เป็น base64 สำหรับเก็บข้อมูล

by

แนะนำวิธีการแปลงรูปภาพ เป็น base64 เพื่อเก็บข้อมูล มีขั้นตอนดังนี้ 1) สร้าง Project ผ่าน Visual Studio 2019 เลือก Blazor Server App 2) เลือก Framework เป็น .NET 5.0 3) ติดตั้ง Add-on ชื่อ System.Drawing.Common ผ่านทาง NuGet 4) เปิดไฟล์ Index.razor จากนั้นเขียน Code ดังนี้ 5) หน้าจอแสดงปุ่ม “การแปลง (ไฟล์รูปภาพ เป็น Base64)” 6) ผลลัพธ์จากการแปลงไฟล์รูปภาพ เป็น Base64 หมายเหตุ: นามสกุลไฟล์รูปภาพ (picture.png) ต้องตรงกับ data:image/png;base64 สำหรับแสดงผล