วรรณวรางค์ จิตผิวงาม – Page 2

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

May 28, 2021 01:39

ในการดึงข้อมูลมาแสดงผลในรูปแบบตาราง GridView อาจเป็นหนึ่งในทางเลือกของนักพัฒนาที่จะหยิบไปใช้เป็นเครื่องมือในการแสดงผล แต่ในกรณีที่ข้อมูลมีจำนวนมากอาจทำให้ผู้ใช้รู้สึกตาลายและอ่านยากไปสักหน่อย ผู้พัฒนาจึงต้องพยายามหาวิธีจัดการข้อมูลในการแสดงผลให้สามารถอ่านง่ายและสบายตามากยิ่งขึ้น ดังนั้น ในกรณีที่ข้อมูลมีจำนวนมาก การจำแนกประเภท หรือแยกออกเป็นกลุ่มย่อยๆก็เป็นอีกหนึ่งในทางเลือกที่จะช่วยแก้ปัญหาดังกล่าวได้ ดังนั้น ในบทความนี้ผู้เขียนจะขอแนะนำวิธีการแสดงผลของข้อมูลบน GridView แบบจำแนกออกตามกลุ่ม เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกัน เพื่อเพิ่มความสามารถให้กับ GridView ซึ่งเราเองใช้งานอยู่และน่าจะคุ้นเคยกันดีอยู่แล้ว ซึ่งจะมีขั้นตอนดังนี้ค่ะ ขั้นตอนในการพัฒนา เตรียมข้อมูลในการแสดงผล โดยจากตัวอย่างนี้ จะทำการสมมุติข้อมูลของดอกไม้ ผลไม้ และต้นไม้ และมีข้อมูลเพื่อใช้ในการแยกประเภทไว้ด้วย เพื่อให้เห็นภาพมากขึ้นค่ะ หมายเหตุ : การประกาศตัวแปร และการดึงข้อมูลเป็นเพียงการยกตัวอย่างง่ายๆ เพื่อให้ผู้ใช้เข้าใจเท่านั้น ในการทำงานจริงผู้อ่านสามารถใช้วิธีการประกาศตัวแปรและเรียกใช้แบบอื่น หรือดึงข้อมูลจากส่วนอื่นได้ ขึ้นอยู่กับความเหมาะสมและความถนัดค่ะ 2. เตรียม GridView ที่จะใช้ในการแสดงผล โดยจะขอยกตัวอย่างให้ดูการแสดงผล GridView แบบทั่วไปก่อนมีการจัดกลุ่ม เพื่อให้เห็นความแตกต่าง ดังนี้ค่ะ เพิ่มเติม : ข้อมูลจำนวนเป็นข้อมูลที่เป็นตัวเลข จึงได้ทำการจัด Format รูปแบบของข้อมูลให้แสดงผลแบบตัวเลข ด้วยการระบุ DataFormatString=”{0:#,##0}” เช่น หากข้อมูล 2500 จะแสดง 2,500 ให้อัตโนมัติ ผลลัพธ์(ก่อนทำการจัดกลุ่ม) 3. เพิ่ม Event ที่ชื่อว่า OnDataBound=”GroupGv_DataBound” ให้กับ GridView เพื่อแสดงผลข้อมูลแบบกลุ่ม และตัดคอลัมน์ประเภท(Category Name)ออกไป เนื่องจากเราจะนำไปใช้แสดงผลในการจัดกลุ่ม 4. เพิ่มโค้ดในส่วนของฝั่งเซิร์ฟเวอร์(C#) ให้กับ Event ของ GridView ที่เราเพิ่มในข้อ 3. เพื่อจัดกลุ่ม ดังนี้ค่ะ ผลลัพธ์ (หลังมีการจัดกลุ่ม) เพิ่มเติม : จากตัวอย่างข้างต้น เนื่องด้วยข้อมูลเป็นการจัดกลุ่มและมีข้อมูลเชิงตัวเลข ผู้เขียนจึงขอแนะนำเพิ่มเติมในส่วนของการแสดงจำนวนรวมแยกในแต่ละกลุ่มไว้ด้วย โดยเพิ่มเติมโค้ดในส่วนของ GroupGv_DataBound ดังนี้ค่ะ ผลลัพธ์ เพียงเท่านี้ท่านก็จะสามารถจัดกลุ่มข้อมูล GridView ของท่าน เพื่อลดปัญหาการดูข้อมูลแบบตารางที่มีแถวข้อมูลจำนวนมากได้บ้างแล้ว ซึ่งผู้เขียนหวังเป็นอย่างยิ่งว่าผู้อ่านจะสามารถนำแนวทาง เกร็ดเล็กๆน้อยๆนี้ไปประยุกต์ใช้กับงานของท่านได้ไม่มากก็น้อยนะคะ หากมีส่วนใดผิดพลาดทางผู้เขียนก็ขออภัยมา ณ ที่นี้ด้วยค่ะ ขอบคุณที่ติดตามนะคะ ^^ แหล่งอ้างอิงhttps://stackoverflow.com/questions/61773421/sum-column-where-condition-with-datatable

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

May 23, 2021 03:00

ที่มาของบทความนี้ เนื่องด้วยงานที่ผู้เขียนได้รับมอบหมายให้พัฒนาอยู่นั้น มีส่วนหนึ่งที่เป็นการแนบไฟล์เอกสาร/หลักฐานทั้งในรูปแบบไฟล์ PDF และรูปภาพ เข้ามาจากผู้ใช้งาน ซึ่งเอกสารเหล่านี้จะต้องมีส่วนของการแสดงผลให้ทางฝั่งเจ้าหน้าที่ทำการตรวจสอบเอกสาร/หลักฐานดังกล่าวด้วย โดยเดิมทีจะมีการแสดงผลแยกเป็นรายการให้เจ้าหน้าที่เพื่อคลิกดูรายละเอียดทีละรายการ ดังภาพ ซึ่งในการทำงานจริงแล้วนั้นพบว่า การตรวจสอบเอกสาร/หลักฐานต่างๆที่ผู้ใช้แนบมาสามารถทำได้ยากและต้องใช้เวลา เนื่องจากเจ้าหน้าที่จะต้องทำการคลิกดูรายละเอียด/ดาวน์โหลดไฟล์คราวละ 1 ไฟล์เพื่อตรวจสอบ ซึ่งไฟล์จะแยกกันอยู่ หากต้องการดาวน์โหลดก็ต้องดาวน์โหลดทีละไฟล์ ดังภาพ จึงเป็นที่มาของการค้นหาวิธีการแสดงผลไฟล์ทั้งหมดให้เจ้าหน้าที่สามารถตรวจสอบและดูรายละเอียดข้อมูลเอกสารไฟล์แนบได้ในคราวเดียว ซึ่งผู้เขียนก็ได้นำวิธีการดังกล่าวมาแบ่งปันให้กับผู้อ่านที่มีความสนใจและประสบปัญหาคล้ายกันอยู่ ซึ่งจะมีวิธีการดังนี้ค่ะ 1.ดึงข้อมูลไฟล์แนบเอกสารทั้งหมดของผู้ใช้ หมายเหตุ ในการทำงานข้างต้น ควรมีการลบไฟล์(Temporary file)ที่ถูกสร้างไว้ก่อนหน้านี้ที่ไม่ใช้งานออกไปด้วย เนื่องจากการรวมไฟล์ด้วยวิธีนี้จะมีการสร้างไฟล์รวมตัวใหม่ขึ้นมาและนำไปแสดงผลให้ผู้ใช้ ซึ่งหลังจากผู้ใช้งานไม่ใช้งานแล้วหากเราไม่ทำการลบทิ้งจะเกิดเป็นไฟล์ขยะบนเซิร์ฟเวอร์จำนวนมากได้ โดยจากโค้ดข้างต้นจะพบว่า ไฟล์ที่จะใช้ในการรวบรวมจะต้องเป็นไฟล์ PDF ซึ่งในการทำงานจริงของเรา การแนบไฟล์เอกสาร/หลักฐานสามารถแนบได้ทั้งไฟล์ที่เป็น PDF และไฟล์ที่เป็นรูปภาพด้วย ดังนั้น ก่อนที่จะทำการรวมไฟล์ จึงต้องทำการตรวจสอบว่ามีไฟล์ดังกล่าวอยู่จริงหรือไม่ รวมทั้งตรวจสอบชนิดของไฟล์ด้วย หากพบว่าไฟล์ดังกล่าวไม่ได้อยู่ในรูปแบบ PDF ไฟล์ ให้ทำการแปลงไฟล์รูปภาพเหล่านั้นให้เป็น PDF เสียก่อน เพื่อป้องกันความผิดพลาดที่จะเกิดขึ้นในขณะทำการรวมไฟล์นั่นเอง 2. เขียนเมธอดในการรวมไฟล์ดังกล่าวและสร้างเป็นไฟล์ PDF ตัวใหม่ 3.เขียนเมธอดในแปลงไฟล์รูปภาพให้เป็นไฟล์ PDF 4.แสดงผลไฟล์ PDF ที่รวมเรียบร้อยแล้ว ด้วย Literal หมายเหตุ ในการใช้งานโค้ดข้างต้น มีไลบรารีที่จำเป็นต้องใช้งาน ดังนี้ค่ะ using System.IO;using iTextSharp.text;using iTextSharp.text.pdf;using System.Data;using System.Text;using System.Drawing; ผลลัพธ์ ตัวอย่างไฟล์ที่ได้จากการรวมไฟล์เอกสาร PDF 3 ไฟล์ และไฟล์รูปภาพ 1 ไฟล์ ซึ่งวิธีการนี้เป็นเพียงหนึ่งในแนวทางแก้ปัญหาในการแสดงผลไฟล์ PDF หลายๆไฟล์ในครั้งเดียวเท่านั้น และอาจมีข้อจำกัดหากผู้ใช้มีการแนบไฟล์จำนวนมาก เนื่องจากจะส่งผลให้ขนาดของไฟล์ที่รวมได้มีขนาดใหญ่มากตามไปด้วย ในส่วนของการแนบไฟล์จึงควรมีการจำกัดขนาดและรูปแบบให้เหมาะสมในการแนบไฟล์แต่ละครั้ง เพื่อประหยัดเนื้อที่ในการจัดเก็บไฟล์บนเซิร์ฟเวอร์ด้วย และผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะช่วยแก้ปัญหาให้กับนักพัฒนาที่กำลังประสบปัญหาเดียวกันอยู่ไม่มากก็น้อยนะคะ ขอบคุณค่ะ ^^ แหล่งอ้างอิง https://stackoverflow.com/questions/6029142/merging-multiple-pdfs-using-itextsharp-in-c-net https://alandjackson.wordpress.com/2013/09/27/convert-an-image-to-a-pdf-in-c-using-itextsharp/

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

May 17, 2021 12:55

จากบทความก่อนหน้านี้ ผู้เขียนได้แนะนำเกี่ยวกับ Progress bar และวิธีการใช้งานเบื้องต้นกันไปแล้ว ซึ่งใครที่ยังไม่ได้อ่าน สามารถอ่านเพิ่มเติมได้ ที่นี่ มาถึงในบทความนี้ ผู้เขียนจึงขอนำความรู้ดังกล่าวมาต่อยอดประยุกต์ใช้กับการทำงานจริงที่มีการดึงข้อมูลตอน Runtime มาแสดงผลด้วย Progress bar โดยผู้เขียนจะไม่ขอลงรายละเอียดในส่วนของการสร้างสไตล์ชีทและการกำหนดค่าต่างๆแล้ว แต่จะเน้นในส่วนของการดึงข้อมูลมาแสดงแทน โดยผู้เขียนจะพยายามยกตัวอย่างให้เห็นหลายแนว เพื่อให้ผู้อ่านเห็นภาพในการนำไปใช้มากขึ้น ซึ่งแต่ละแบบจะต้องทำอย่างไรบ้าง มาดูกันเลยค่ะ แบบแถบละสี ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์ จากโค้ดข้างต้นจะเป็นการกำหนดสไตล์ชีทที่จะใช้ ซึ่งจะขึ้นอยู่กับจำนวนค่า % ที่ส่งมาเป็นพารามิเตอร์ โดยจะแบ่งออกเป็น 4 ช่วง สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % ตัวอย่างการเรียกใช้งาน ผลลัพธ์ แบบหลายสีในแถบเดียวกัน(แบบที่ 1) โดยในตัวอย่างนี้ จะเป็นการแสดงข้อมูลจำนวนผลไม้เป็น % รวมในแถบ Progress bar เดียวกัน ซึ่งจะแยกตามสี และมีบอกจำนวนรวมถึงชื่อผลไม้ให้ทราบ อีกทั้งยังแสดงจำนวนรวมของผลไม้ทุกชนิดด้วย โดยมีวิธีการทำ ดังนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล จากโค้ดตัวอย่างข้างต้น จะเห็นว่าการสร้างแท็ก Html จะแตกต่างจากแบบแรก คือจะมีการสร้างใน <div class=\”progress\”> เดียวกัน ซึ่งมีหลักการคล้ายกับการสร้าง Progress bar อย่างง่ายหลายสีในแถบเดียวกันที่เคยกล่าวไว้แล้วในบทความก่อนหน้านั่นเอง ผลลัพธ์ แบบหลายสีในแถบเดียวกันและแสดงหลายแถบ Progress Bar(แบบที่ 2) ในตัวอย่างนี้ เป็นการแสดงผลแถบสีแยกตามช่วงของข้อมูลบน Progress bar แต่ละแถบ โดยการแสดงผลจะแบ่งสีตามปริมาณข้อมูลในแต่ละช่วง ดังนี้ สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % หากข้อมูลที่ต้องการแสดงผลตกอยู่ในช่วงใดก็จะมีการแสดงแถบสีนั้นขึ้นมาให้เห็นตามลำดับ โดยมีวิธีการทำต่อไปนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. สร้างเมธอดที่ใช้ในการสร้างแท็ก Html ในการแสดงผลแถบสี ซึ่งในส่วนของกระบวนการคำนวณแถบสีจะไม่ขอลงในรายละเอียด แต่แสดงไว้ให้เห็นภาพการทำงานหลักๆเท่านั้น ดังนี้ค่ะ ผลลัพธ์ หมายเหตุ : จากตัวอย่างข้างต้น เป็นเพียงการยกตัวอย่างเพื่อให้ผู้อ่านเข้าใจการประยุกต์ใช้งาน และการทำงานร่วมกับ Progress bar เพิ่มมากขึ้นเท่านั้น ซึ่งผู้อ่านสามารถดัดแปลง และมีวิธีการรวมถึงเทคนิคที่แตกต่างออกไปที่จะนำมาใช้ในการพัฒนาเพื่อแสดงผลข้อมูล ขึ้นกับอัลกอริธึมของแต่ละท่าน จากบทความนี้จะเห็นได้ว่า วิธีการดึงข้อมูลมาแสดงผลด้วย Progress bar แบบนี้ จะมีความยืดหยุ่นกว่าแบบที่มีการกำหนดค่าตายตัวในบทความก่อนหน้า อีกทั้งยังสามารถแสดงจำนวนแถบ Progress bar และสีได้ไม่จำกัด ขึ้นอยู่กับข้อมูล การกำหนดเงื่อนไขในการแสดงผล และความต้องการของผู้พัฒนาที่จะดึงข้อมูลมาแสดงผลนั่นเอง และผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้ จะพอเป็นแนวทางในการนำไปใช้งานจริงให้กับทุกท่านได้นะคะ ขอบคุณค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5

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

May 17, 2021 12:53

โดยปกติแล้วในการพัฒนาเว็บไซต์ของเรา คงมีบางเวลาที่เราอาจจะอยากแสดงผลข้อมูลของเราในรูปแบบของ Progress bar ซึ่งเป็นแถบของข้อมูล เพื่อเพิ่มมุมมองให้กับการแสดงผลให้ไม่น่าเบื่อจำเจแทนที่จะเป็นเพียงการแสดงผลตัวเลขเฉยๆ โดยเจ้า Progress bar นี้จะทำให้เราเห็นภาพได้ว่า ข้อมูลของเราได้ดำเนินการใกล้ถึงเป้าหมายแล้วหรือยัง ซึ่งขึ้นอยู่กับวัตถุประสงค์ในการนำไปใช้ ดังนั้นในบทความนี้ ผู้เขียนจึงขอแนะนำวิธีการใช้งาน Progress bar แบบเบื้องต้น โดยจะมีขั้นตอนง่ายๆ 3 ขั้นตอน ดังนี้ การกำหนสไตล์ชีท โดยเราจะใช้สไตล์ชีทเหล่านี้ เพื่อช่วยให้การแสดงผลของ Progress bar ของเราสวยงามมากยิ่งขึ้น ซึ่งการกำหนดสไตล์ชีทสามารถทำได้ 2 วิธี คือแบบที่กำหนดในไฟล์เลย หรือแยกเป็นไฟล์สไตล์ชีทต่างหากได้ ซึ่งโดยส่วนตัวผู้เขียนขอแนะนำให้ทำเป็นแบบแยกไฟล์สไตล์ชีทออกมาต่างหากแล้วอ้างถึงจากไฟล์ที่เรียกใช้แทน เพื่อง่ายต่อการปรับปรุง และใช้งานในครั้งต่อไปค่ะ ไฟล์ Progress.css เพิ่มเติม : การอ้างอิงไฟล์สไตล์ชีทจากภายนอก โดยที่อยู่ของไฟล์ก็ขึ้นกับการระบุของแต่ละท่าน 2. การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html คำอธิบาย : จากตัวอย่าง จะเห็นว่าเราสามารถปรับแต่งและใส่ข้อมูลให้กับ Progress bar 3 ส่วนคือ ข้อความบนแถบ Progress bar ได้ในส่วนของ Progress-title คือ <h3 class=”progress-title”>Basic Progress</h3> กำหนดความกว้างของ Progress bar ได้ผ่านทาง style-inline คือ style=”width:85%;” แสดงข้อความจำนวนของข้อมูลบนแถบ Progress bar คือ <div class=”progress-value“><span>85</span>%</div> นั่นเอง 3. การเรียกใช้งาน jQuery เพื่อการแสดงผล Progress bar ของเราให้มีการเพิ่มขึ้นของจำนวนเลขที่แสดงตั้งแต่ 0 จนถึงจำนวนเลขนั้น เช่น หากเลขที่ต้องการแสดงคือ 60% ตัวเลขแสดงจำนวนดังกล่าวจะค่อยๆเปลี่ยนแปลงเพิ่มขึ้นโดยเริ่มจาก 0 จนถึง 60 นั่นเอง ผลลัพธ์ เพิ่มเติม จากตัวอย่างข้างต้น จะเป็นการแสดงผล Progress bar แบบพื้นฐานอย่างง่าย เพียงเท่านี้ท่านก็จะสร้าง Progress bar ได้ด้วยตนเองแล้ว แต่หากท่านใดที่อยากเพิ่มสีสันและความสวยงามให้กับ Progress bar ของท่าน ก็สามารถทำได้ดังตัวอย่างนี้ค่ะ1. ปรับแก้เพิ่มเติมในส่วนของการกำหนดพื้นที่ในการแสดงผล 2. เพิ่มสไตล์ชีทที่ใช้สำหรับเพิ่มสีสันให้กับ Progress bar ของเรา ผลลัพธ์ จากตัวอย่างข้างต้น จะเป็นวิธีการสร้าง Progress bar ที่มีการใส่สีสันให้กับแต่ละแถบเส้น แต่ลูกเล่นของการแสดงผล Progress bar ยังสามารถทำได้หลายแบบ ซึ่งผู้เขียนจะขอแนะนำอีกวิธี ซึ่งเป็นการสร้าง Progress bar แบบหลายสีในแถบเดียวกันโดยมีวิธีการเพิ่มเติม ดังนี้ค่ะ การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html จากโค้ดตัวอย่างข้างต้น จะสังเกตเห็นว่าการกำหนดค่าต่างๆจะมีลักษณะกับหลักการที่กล่าวไว้แล้วข้างต้น แต่จะแตกต่างกันตรงที่การแสดงผลหลายแถบสีในแถบเดียวกันจะมีการกำหนด progress bar ภายใต้แท็ก <div class=”progress”> เดียวกัน และหากต้องการกำหนดให้มีกี่แถบสีก็สามารถเพิ่มสี และกำหนดขนาดของแต่ละแถบสีได้ตามต้องการ ผลลัพธ์ โดยบทความนี้ก็ถือเป็นเพียงส่วนหนึ่งของการแนะนำการใช้งาน รวมถึงลูกเล่นของ Progress bar ในเบื้องต้นเท่านั้น เนื่องจากรูปแบบและการใช้งานของ Progress bar ยังมีให้เลือกใช้ เลือกลองกันอีกมากมายหลายแบบเลยนะคะ ผู้เขียนหวังว่าความรู้จากบทความนี้จะเป็นพื้นฐานและตัวช่วยให้กับนักพัฒนาสามารถนำไปประยุกต์ใช้ในงานของตนได้ไม่มากก็น้อยค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5

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

April 1, 2020 17:36

ในบทความนี้ ผู้เขียนก็ยังคงอยู่ในเรื่องของ 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> ติดต่อฐานข้อมูลเพื่อใช้ในการแสดงผล ซึ่งในตัวอย่างนี้จะขอสมมุติข้อมูลจาก datatable ที่สร้างขึ้นแทนตัวอย่าง code ในฝั่ง Server (C#) ฟังก์ชั่นตอน Page_Load protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { ///////ดึงข้อมูลวิทยาเขต โดยในการใช้งานจริงจะเป็นการติดต่อกับฐานข้อมูลเพื่อดึงค่าวิทยาเขตมาแสดง DataTable dt = this.GetCampusData(); ///////เรียกใช้งานฟังก์ชั่น PopulateTreeView() เพื่อนำค่าข้อมูลวิทยาเขตมาแสดงผลใน TreeView โดยในกรณีนี้จะเริ่มสร้างจาก root node โดยส่งค่าพารามิเตอร์ของ parentId เป็น 0 this.PopulateTreeView(dt, 0, null); } } ฟังก์ชั่นดึงข้อมูลวิทยาเขตและคณะ/หน่วยงาน private DataTable GetCampusData() { ///////เตรียมข้อมูลวิทยาเขต เนื่องจากในกรณีนี้เป็นการสมมุติโครงสร้างและข้อมูลวิทยาเขตโดยสร้างเป็น DataTable เสมือนเป็นตารางวิทยาเขตในฐานข้อมูล DataTable dtCampus = new DataTable(); dtCampus.Columns.AddRange(new DataColumn[2] { new DataColumn(“CampID”, typeof(int)), new DataColumn(“CampNameThai”,typeof(string)) }); dtCampus.Rows.Add(“01”, “วิทยาเขตหาดใหญ่”); dtCampus.Rows.Add(“02”, “วิทยาเขตปัตตานี”); dtCampus.Rows.Add(“03”, “วิทยาเขตภูเก็ต”); dtCampus.Rows.Add(“04”, “วิทยาเขตสุราษฎร์ธานี”);dtCampus.Rows.Add(“05”, “วิทยาเขตตรัง”); return dtCampus; } private DataTable GetFacultyData() { ///////เตรียมข้อมูลคณะ/หน่วยงาน ในกรณีนี้เป็นการสมมุติโครงสร้างข้อมูลคณะ/หน่วยงานและสร้างเป็น DataTable โดยมีการระบุรหัสของวิทยาเขตไว้ด้วย ซึ่งในการทำงานจริงจะเป็นการดึงข้อมูลจากตารางที่เก็บข้อมูลคณะ/หน่วยงานแทน DataTable dtFaculty = new DataTable(); dtFaculty.Columns.AddRange(new DataColumn[3] { new DataColumn(“FacID”, typeof(int)), new DataColumn(“FacNameThai”,typeof(string)) , new DataColumn(“CampID”,typeof(string)) }); dtFaculty.Rows.Add(“01”, “สำนักงานอธิการบดี”,”01″); dtFaculty.Rows.Add(“02”, “ศูนย์คอมพิวเตอร์”, “01”); dtFaculty.Rows.Add(“03”, “วิศวกรรมศาสตร์”, “01”); dtFaculty.Rows.Add(“54”, “คณะรัฐศาสตร์”, “02”); dtFaculty.Rows.Add(“07”, “ศึกษาศาสตร์”, “02”); dtFaculty.Rows.Add(“36”, “วิทยาการสื่อสาร”, “02”); dtFaculty.Rows.Add(“81”, “ศูนย์การเรียนรู้”, “03”); dtFaculty.Rows.Add(“56”, “คณะศิลปศาสตร์และวิทยาศาสตร์”, “04”); dtFaculty.Rows.Add(“44”, “คณะเทคโนโลยีและการจัดการ”, “04”); dtFaculty.Rows.Add(“46”, “คณะพาณิชยศาสตร์และการจัดการ”, “05”); dtFaculty.Rows.Add(“66”, “คณะสถาปัตยกรรมศาสตร์”, “05”); return dtFaculty; } ฟังก์ชั่นที่ใช้ในการวนแสดงข้อมูลที่ได้จากวิทยาเขตและคณะ/หน่วยงานมาแสดงใน TreeView private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode) { ///////ดึงค่าข้อมูลคณะ/หน่วยงาน DataTable dtChild = this.GetFacultyData(); DataRow[] drChild; ///////วนค่าข้อมูลวิทยาเขตจาก dtParent ที่เป็นพารามิเตอร์ที่ส่งมา foreach (DataRow