Category: การพัฒนา Web Application

ขยับแถว (row) ขึ้น/ลง ใน ASP.NET Gridview ด้วย jQuery

บางครั้งการแสดงผลข้อมูลใน Gridview จะมีความต้องการให้ผู้ใช้งานสามารถกำหนดลำดับข้อมูลได้ ในบทความนี้ผู้เขียนจะยกตัวอย่างการประยุกต์ใช้ jQuery มาเพิ่มความสามารถให้กับ Gridview ให้สามารถขยับแถวที่ต้องการไปอยู่ในตำแหน่งที่ต้องการได้ โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มโค้ด HTML สำหรับแสดงผลข้อมูล Gridview จะสังเกตว่าจะมีฟิลด์ที่เป็น ItemTemplate สำหรับแสดงผลปุ่ม UP และปุ่ม DOWN สำหรับใช้ในการเลื่อน row นั้นๆ ขึ้นหรือลง และเหตุผลที่จะต้องมี UpdatePanel ครอบปุ่มไว้ เพราะทุกครั้งที่มีการกด จะเกิดการ Postback ทำให้ข้อมูลจะถูก Bind ซ้ำ การเรียงลำดับก็จะกลับคืนไปเหมือนเดิม จึงจำเป็นต้องทำ Partial Load เพื่อป้องกันการ Bind ข้อมูลซ้ำ…

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

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

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView จาก Code Behind

จากบทความ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery ท่านผู้อ่านที่ได้เข้าไปอ่านแล้วอาจจะมีคำถามว่าถ้าไม่อยากใช้ jQuery ล่ะ เนื่องด้วยสาเหตุอะไรก็แล้วแต่ วันนี้ผมก็จะมานำเสนอการซ่อน/แสดงคอลัมน์ใน ASP.NET GridView อีกวิธี ซึ่งจะเป็นการควบคุมจาก code behind ที่เป็นภาษา C# หรือ VB.NET ในที่นี่ผู้เขียนจะใช้ภาษา C# ซึ่งจะมีขั้นตอนต่างๆ ดังต่อไปนี้ 1. ตัวอย่างโค้ด HTML จะมีการแก้ไขเพิ่มขึ้นอีกเล็กน้อยจากบทความเดิม โดยสิ่งที่เพิ่มขึ้นมาจะอยู่ที่ CheckBox คือ AutoPostBack=”true” เพื่อให้มีการ PostBack ทุกครั้งที่มีการคลิก Checkbox OnCheckedChanged=”chkCallNo_CheckedChanged” คือ…

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery

การแสดงผลข้อมูลใน Gridviews ในบางสถานการณ์เราต้องการซ่อนข้อมูลบางคอลัมน์ออกไปก่อนตามเงื่อนไขใดๆ และเมื่อเงื่อนไขเปลี่ยนเราก็จะแสดงข้อมูลในคอลัมน์ที่ถูกซ่อนนั้นออกมา ในบทความนี้ผู้เขียนจะแสดงตัวอย่างการ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วยชุดคำสั่ง jQuery โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มโค้ด HTML ดังตัวอย่างด้างล่าง ซึ่งเป็นโค้ดที่แสดง Checkbox เพื่อใช้เลือกแสดงคอลัมน์ CallNo และ ASP.NET GridView ที่มีข้อมูล 5 คอลัมน์ 2. เพิ่มโค้ดใน event Page_Load ในหน้า code behind เพื่อจำลองข้อมูลที่จะใช้แสดงใน GridView เนื่องจากโค้ดตัวอย่างมีการใช้งาน class DataTable และ DataColumn…

Bootstrap Modal Full Screen

หลายๆ ท่านที่เคยใช้งาน Bootstrap เป็น Frontend Framework น่าจะเคยใช้ modal กันมาบ้าง ซึ่ง modal เป็นจาวาสคลิปต์ปลั๊กอิน มีไว้สำหรับการแสดงผลข้อมูล ทั้งรูปภาพ ข้อความ หรือแบบฟอร์มรับข้อมูล ( html input form ) ในลักษณะป๊อปอัพ ซึ่ง modal ของ bootstrap สามารถแสดงผลได้หลายขนาด ทั้งแบบปกติ แบบเล็ก และแบบใหญ่ ขึ้นอยู่กับ class ที่เราสามารถระบุเพิ่มเข้าไปว่าต้องการให้แสดงผลเป็นแบบไหน ตัวอย่างโค้ด modal dialog และปุ่มสำหรับเปิด modal จะได้ผลลัพธ์ดังรูป ถ้าต้องการให้…

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

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

มาทำความรู้จักและเรียนรู้การใช้งาน Progress bar ในเบื้องต้นกันเถอะ

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

รู้จักเอแจ๊กซ์ (AJAX) และการใช้งาน

AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML ซึ่งหมายถึงการพัฒนาเว็บแอพพลิเคชั่นที่ประมวลผลในเบื้องหลังเป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้สามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น ทำให้ความรู้สึกการใช้งานโปรแกรมเหมือนกับเดสก์ท็อปแอปพลิเคชัน ปกติแล้วในภาษาสคริปต์ที่ใช้งานกับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ (synchronous) โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อนแล้วถึงจะทำงานในคำสั่งถัดไป แต่กระบวนการทำงานแบบเอแจ๊กซ์เมื่อบราวเซอร์ (Browser) ร้องขอข้อมูลไปยังเซิร์ฟเวอร์ (Server) บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที (asynchronous) โดยที่ไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ก่อน ทำให้การตอบสนองต่อผู้ใช้งานดูรวดเร็วขึ้น และเมื่อเซิร์ฟเวอร์ประมวลผลเสร็จแล้วถึงจะส่งข้อมูลกลับมาที่เอแจ๊กซ์และให้เอแจ๊กซ์ทำงานกับข้อมูลที่ส่งกลับมาอีกทีซึ่งสามารถเขียนโค้คการทำงานดังนี้ ตัวอย่างโค้คการทำงาน AJAX ของโดยใช้ jQuery และปัจจุบันในการเขียน JavaScript เพื่อเรียกใช้งาน AJAX นั้นเราไม่จำเป็นต้องพึ่งพา jQuery อีกต่อไปแล้วซึ่งสามารถเขียนโค้ดการทำงานได้ดังนี้ วิธีที่ 1  ใช้ XMLHttpRequest [1] วิธีที่ 2 ใช้ Fetch…

อยากดึงข้อมูลมาแสดงใน TreeView จะทำอย่างไรดี?

          ในบทความนี้ ผู้เขียนก็ยังคงอยู่ในเรื่องของ TreeView เช่นเคย เพื่อต่อยอดจากบทความก่อนในหัวข้อเรื่อง “มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า” ที่เป็นบทความเกี่ยวกับเรื่องการแนะนำวิธีจัดการกับ TreeView ด้วยการกำหนดคุณสมบัติต่างๆ แต่งสีเติมกลิ่น ให้ TreeView ของเราน่าสนใจยิ่งขึ้น แต่ข้อมูลที่นำมาใช้ในการแสดงผลยังคงเป็นในลักษณะกำหนดเองเป็นค่าตายตัวจากหน้าจอและยังไม่เน้นเรื่องดึงข้อมูลจากฐานข้อมูล ในบทความนี้จึงถือเป็นภาคต่อจากบทความที่แล้วและขอเน้นในส่วนของการดึงข้อมูลมาแสดงผลบน TreeView ในเชิงโปรแกรมกันบ้าง เพื่อให้ผู้อ่านได้ความรู้ทั้งในส่วนการกำหนดคุณสมบัติและการดึงข้อมูลมาแสดงไปประยุกต์ใช้ในงานพัฒนาร่วมกันได้ ขั้นตอนในการดึงข้อมูลจากฐานข้อมูลมาแสดงใน TreeView สร้าง TreeView ที่ต้องการใช้ในการแสดงผลข้อมูลตัวอย่าง code ในฝั่ง Client <body> <form id=”form1″ runat=”server”> <asp:TreeView ID=”TvOrganization” runat=”server” > </asp:TreeView> </form> </body> ติดต่อฐานข้อมูลเพื่อใช้ในการแสดงผล…