Tag: c#

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

แนะนำวิธีการแปลงรูปภาพ เป็น 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) หน้าจอแสดงปุ่ม “การแปลง (ไฟล์รูปภาพ เป็น…

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

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

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

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

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

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

การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)

           จากความเดิมตอนที่แล้ว เราได้พูดถึงวิธีการจัดการข้อมูลจำนวนมากด้วยการจัดกลุ่มหมวดหมู่ของข้อมูลใน GridView กันไปแล้ว ซึ่งหากผู้อ่านท่านใดต้องการทราบวิธีการจัดหมวดหมู่สามารถตามดูเนื้อหาในบทความได้จาก การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C# และในส่วนของบทความนี้จะเป็นเนื้อหาต่อยอดการทำงานจากการจัดหมวดหมู่ดังกล่าว โดยเพิ่มความสามารถให้หมวดหมู่หรือกลุ่มเหล่านั้นสามารถย่อ-ยุบได้ เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกันชัดเจนมากยิ่งขึ้น หรือเพื่อตอบโจทย์ให้กับผู้ใช้บางท่านที่อาจมีความต้องการดูข้อมูลทีละส่วนได้ โดยจะนำ Component ที่ชื่อว่า Collapse ใน Bootstrap มาประยุกต์ใช้ในการแสดงผลร่วมกับ GridView และยังมี jQuery มาเป็นอีกหนึ่งตัวช่วยเพื่อให้สามารถแสดงผลตามที่ต้องการได้ โดยการอธิบายในบทความนี้ ทางผู้เขียนจะขอตัดตอนในส่วนของรายละเอียดขั้นตอนวิธีการจัดหมวดหมู่ไป และข้ามมาพูดถึงขั้นตอนที่ต้องจัดทำเพิ่มเติมในการทำย่อ-ยุบเลยละกันนะคะ            ก่อนจะไปเริ่มในส่วนของการเขียนโค้ด เรามาทำความรู้จักกับ ค่าที่จำเป็นต้องใช้ในการระบุให้กับแถวหลัก(parent)เพื่อให้สามารถย่อยุบได้ กันก่อนนะคะ data-toggle=”collapse” data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท…

การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C#

          ในการดึงข้อมูลมาแสดงผลในรูปแบบตาราง GridView อาจเป็นหนึ่งในทางเลือกของนักพัฒนาที่จะหยิบไปใช้เป็นเครื่องมือในการแสดงผล แต่ในกรณีที่ข้อมูลมีจำนวนมากอาจทำให้ผู้ใช้รู้สึกตาลายและอ่านยากไปสักหน่อย ผู้พัฒนาจึงต้องพยายามหาวิธีจัดการข้อมูลในการแสดงผลให้สามารถอ่านง่ายและสบายตามากยิ่งขึ้น ดังนั้น ในกรณีที่ข้อมูลมีจำนวนมาก การจำแนกประเภท หรือแยกออกเป็นกลุ่มย่อยๆก็เป็นอีกหนึ่งในทางเลือกที่จะช่วยแก้ปัญหาดังกล่าวได้ ดังนั้น ในบทความนี้ผู้เขียนจะขอแนะนำวิธีการแสดงผลของข้อมูลบน GridView แบบจำแนกออกตามกลุ่ม เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกัน เพื่อเพิ่มความสามารถให้กับ GridView ซึ่งเราเองใช้งานอยู่และน่าจะคุ้นเคยกันดีอยู่แล้ว ซึ่งจะมีขั้นตอนดังนี้ค่ะ ขั้นตอนในการพัฒนา เตรียมข้อมูลในการแสดงผล โดยจากตัวอย่างนี้ จะทำการสมมุติข้อมูลของดอกไม้ ผลไม้ และต้นไม้ และมีข้อมูลเพื่อใช้ในการแยกประเภทไว้ด้วย เพื่อให้เห็นภาพมากขึ้นค่ะ หมายเหตุ : การประกาศตัวแปร และการดึงข้อมูลเป็นเพียงการยกตัวอย่างง่ายๆ เพื่อให้ผู้ใช้เข้าใจเท่านั้น ในการทำงานจริงผู้อ่านสามารถใช้วิธีการประกาศตัวแปรและเรียกใช้แบบอื่น หรือดึงข้อมูลจากส่วนอื่นได้ ขึ้นอยู่กับความเหมาะสมและความถนัดค่ะ 2. เตรียม GridView ที่จะใช้ในการแสดงผล โดยจะขอยกตัวอย่างให้ดูการแสดงผล GridView…

วิธีการรวมไฟล์ pdf หลายไฟล์และรูปภาพมาแสดงในครั้งเดียวด้วย iTextSharp (#C)

          ที่มาของบทความนี้ เนื่องด้วยงานที่ผู้เขียนได้รับมอบหมายให้พัฒนาอยู่นั้น มีส่วนหนึ่งที่เป็นการแนบไฟล์เอกสาร/หลักฐานทั้งในรูปแบบไฟล์ PDF และรูปภาพ เข้ามาจากผู้ใช้งาน ซึ่งเอกสารเหล่านี้จะต้องมีส่วนของการแสดงผลให้ทางฝั่งเจ้าหน้าที่ทำการตรวจสอบเอกสาร/หลักฐานดังกล่าวด้วย โดยเดิมทีจะมีการแสดงผลแยกเป็นรายการให้เจ้าหน้าที่เพื่อคลิกดูรายละเอียดทีละรายการ ดังภาพ           ซึ่งในการทำงานจริงแล้วนั้นพบว่า การตรวจสอบเอกสาร/หลักฐานต่างๆที่ผู้ใช้แนบมาสามารถทำได้ยากและต้องใช้เวลา เนื่องจากเจ้าหน้าที่จะต้องทำการคลิกดูรายละเอียด/ดาวน์โหลดไฟล์คราวละ 1 ไฟล์เพื่อตรวจสอบ ซึ่งไฟล์จะแยกกันอยู่ หากต้องการดาวน์โหลดก็ต้องดาวน์โหลดทีละไฟล์ ดังภาพ จึงเป็นที่มาของการค้นหาวิธีการแสดงผลไฟล์ทั้งหมดให้เจ้าหน้าที่สามารถตรวจสอบและดูรายละเอียดข้อมูลเอกสารไฟล์แนบได้ในคราวเดียว ซึ่งผู้เขียนก็ได้นำวิธีการดังกล่าวมาแบ่งปันให้กับผู้อ่านที่มีความสนใจและประสบปัญหาคล้ายกันอยู่  ซึ่งจะมีวิธีการดังนี้ค่ะ 1.ดึงข้อมูลไฟล์แนบเอกสารทั้งหมดของผู้ใช้ หมายเหตุ ในการทำงานข้างต้น ควรมีการลบไฟล์(Temporary file)ที่ถูกสร้างไว้ก่อนหน้านี้ที่ไม่ใช้งานออกไปด้วย เนื่องจากการรวมไฟล์ด้วยวิธีนี้จะมีการสร้างไฟล์รวมตัวใหม่ขึ้นมาและนำไปแสดงผลให้ผู้ใช้ ซึ่งหลังจากผู้ใช้งานไม่ใช้งานแล้วหากเราไม่ทำการลบทิ้งจะเกิดเป็นไฟล์ขยะบนเซิร์ฟเวอร์จำนวนมากได้           โดยจากโค้ดข้างต้นจะพบว่า ไฟล์ที่จะใช้ในการรวบรวมจะต้องเป็นไฟล์ PDF ซึ่งในการทำงานจริงของเรา การแนบไฟล์เอกสาร/หลักฐานสามารถแนบได้ทั้งไฟล์ที่เป็น PDF และไฟล์ที่เป็นรูปภาพด้วย ดังนั้น ก่อนที่จะทำการรวมไฟล์ จึงต้องทำการตรวจสอบว่ามีไฟล์ดังกล่าวอยู่จริงหรือไม่ รวมทั้งตรวจสอบชนิดของไฟล์ด้วย หากพบว่าไฟล์ดังกล่าวไม่ได้อยู่ในรูปแบบ PDF…

จะทำอย่างไรให้สามารถดึงข้อมูลมาแสดงผลด้วย Progress bar โดยใช้ .Net (C#)

          จากบทความก่อนหน้านี้ ผู้เขียนได้แนะนำเกี่ยวกับ Progress bar และวิธีการใช้งานเบื้องต้นกันไปแล้ว ซึ่งใครที่ยังไม่ได้อ่าน สามารถอ่านเพิ่มเติมได้ ที่นี่ มาถึงในบทความนี้ ผู้เขียนจึงขอนำความรู้ดังกล่าวมาต่อยอดประยุกต์ใช้กับการทำงานจริงที่มีการดึงข้อมูลตอน Runtime มาแสดงผลด้วย Progress bar โดยผู้เขียนจะไม่ขอลงรายละเอียดในส่วนของการสร้างสไตล์ชีทและการกำหนดค่าต่างๆแล้ว แต่จะเน้นในส่วนของการดึงข้อมูลมาแสดงแทน โดยผู้เขียนจะพยายามยกตัวอย่างให้เห็นหลายแนว เพื่อให้ผู้อ่านเห็นภาพในการนำไปใช้มากขึ้น ซึ่งแต่ละแบบจะต้องทำอย่างไรบ้าง มาดูกันเลยค่ะ แบบแถบละสี ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์ จากโค้ดข้างต้นจะเป็นการกำหนดสไตล์ชีทที่จะใช้ ซึ่งจะขึ้นอยู่กับจำนวนค่า % ที่ส่งมาเป็นพารามิเตอร์ โดยจะแบ่งออกเป็น 4 ช่วง สีแดง ช่วงตั้งแต่ 0 – 25…

มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า

          เชื่อว่านักพัฒนาโปรแกรม Web application ด้วย .Net หลายๆท่านอาจจะเคยได้ยินชื่อของเจ้า “TreeView” กันมาบ้างแล้ว หรือบางท่านก็อาจจะเกือบลืมเจ้าเครื่องมือตัวนี้ไปแล้วก็ตามเพราะมันอาจจะไม่ใช่เครื่องมือที่ถูกหยิบมาใช้บ่อยนัก ในบทความนี้ผู้เขียนจึงขอหยิบยกเจ้า “TreeView” มาปัดฝุ่น แนะนำลูกเล่นการใช้งาน การกำหนดคุณสมบัติต่างๆ และวิธีการใช้งานกันอย่างคร่าวๆก่อน เพื่อเป็นการปูพื้นฐานให้กับมือใหม่หัดใช้ TreeView และรื้อความทรงจำให้กับผู้ที่เคยใช้ TreeView มาก่อนหน้านี้ เผื่อความสามารถที่ซ่อนอยู่จะไปเตะตาตรงใจท่านใดที่กำลังมองหาการทำงานแบบนี้อยู่พอดี จนอยากนำเครื่องมือตัวนี้ไปประยุกต์ใช้เป็นอีกหนึ่งทางเลือกในการแสดงผลข้อมูลในงานพัฒนาของท่านกันอีกครั้งได้ค่ะ           แต่ก่อนจะพูดถึงลูกเล่นการทำงานของ TreeView คงต้องเกริ่นนำกันก่อนว่าเจ้าเครื่องมือตัวนี้ถูกจัดอยู่ในจำพวก Navigation Control ซึ่งบางคนอาจเกิดคำถามว่า ข้อมูลแบบใดบ้างจึงจะเหมาะนำมาใช้งานแสดงผลกับเจ้า TreeView…