อัษฏายุทธ์ แซ่ลิ่ม

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

by

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

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

by

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

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

by

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

Bootstrap Modal Full Screen

by

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

แสดงข้อมูล Memory CPU Disk ด้วย C# EP.3

by

แล้วก็มาถึง EP สุดท้ายของซีรีส์นี้ นั่นก็คือการดึงข้อมูลการใช้งานพื้นที่บน Disk ก่อนจะไปหาพื้นที่ disk เราต้องไปหา drive กันก่อนว่ามี drive อะไรบ้าง จากนั้นจึงไปหาข้อมูล disk ของ drive นั้นๆ โดยเราจะใช้ class DriveInfo สำหรับดึงข้อมูล drive ต่างๆ ออกมา ดังโค้ดตัวอย่าง โดยเราสามารถดึงข้อมูล drive ต่างๆ ได้ผ่านเมทธอด GetDrives() และเข้าถึงชื่อ drive ได้ผ่าน property Name เมื่อมาถึงขั้นตอนนี้ เราก็สามารถเข้าถึงข้อมูลพื้นที่ disk และการใช้งานของแต่ละ drive ได้ไม่ยากแล้ว ผ่าน property ต่างๆ ของ object DriveInfo เราไปดูตัวอย่างโค้ดกันเลย จากตัวอย่าง เราต้องตรวจสอบเพิ่มเติมว่า Drive ที่เราต้องการอยู่ในสถานะพร้อมใช้งานอยู่หรือไม่ผ่าน IsReady ก่อนที่จะเรียกใช้งานเมทธอดอื่น เพื่อให้การแสดงผลข้อมูลอยู่ในรูปแบบที่เข้าใจง่าย … Read more