ต่อจากบทความที่แล้ว เราได้สร้าง Database , Entity Data Model และในบทความนี้จะสร้างเพจการเรียกข้อมูล Employee ออกมาแสดง โดยผ่าน Control TreeView กันต่อไป
การดำเนินงาน (ต่อจากตอนที่แล้ว)
1. เรียกเพจ Default.aspx จาก Solution Explorer ด้วยการคลิกสองครั้ง
2.ให้ลบข้อความที่ส่วนที่เลือกเอาไว้ทิ้ง
3.
แล้วลาก Treeview control มาจาก ToolBox ทางด้านซ้าย ไปวางบนเพจที่ว่าง
4. ที่ source View ให้ระบุ Code ดังนี้
5.ให้คลิกสองครั้งที่ WebForm ของ Default.aspx นี้ จะปรากฏหน้าต่างการเขียน Code ขึ้นมา (หากไม่ปรากฏให้กดปุ่ม F7 แทนก็ได้ )
6. จากนั้นให้ using Entity Data Model โดยเขียนเพิ่มไปที่ส่วนต้นของ Code
เมื่อเพจเริ่มโหลดขึ้น เราต้องการให้ค้นหาข้อมูลของประธานของบริษัท ซึ่งหมายถึง Employee ที่มี Field ชื่อ ReportsTo มีค่าเท่ากับ Null
ให้เพิ่มโค้ดลงไปดังนี้
ที่บรรทัดที่ 7 ให้เพิ่มการเรียกใช้ EDM
#13 ประกาศตัวแปรเชื่อมต่อกับ EDM
# 15-21 ที่เหตุการณ์ Page_Load จะทำการตรวจสอบว่าเพจถูกรันขึ้นมาครั้งแรก หากใช่ก็จะไปทำงานที่ Function การค้นหา Employee ที่เป็นประธานบริษัท
#23-30 Function เข้าถึงประธานบริษัท
ผมใช้ LINQ เพื่อการเรียกข้อมูล โดยเรียกจาก Entity.Employee และกำหนดเงื่อนไขว่าจะต้องเป็นประธานบริษัทเท่านั้น
#29 โยนค่าข้อมูลของประธานบริษัทไปยัง Function ที่เราจะสร้างขึ้นชื่อว่าAccessNodes
7. ให้เพิ่ม Function ลงไปดังนี้
จากโค้ดเป็น Function เพื่อการวนลูปเรียกค่าเพื่อแสดงใน Treeview Control
#34 – 52 เป็นการประกาศลูปเพื่อการเข้าถึง Collection และนำค่าไปใช้ภายในบล็อคโค้ด
#36 ประกาศตัวแปรให้เป็นโหนดย่อยของ TreeView
#38 นำชื่อและสกุลไปแสดงเป็นข้อความของโหนดย่อย
#39 นำ Id ของพนง. ไปใช้เป็นค่าอ้างอิงในโหนดย่อย
#40 เพิ่มค่าโหนดที่ได้จากขั้นตอนที่ผ่านมาเข้าสู่ Treeview Control
#42 นับจำนวนโหนดลูกของ Id ที่กำลังทำงานอยู่นี้ (ส่วนนี้ผมใช้ LINQ เพื่อการค้นหาและส่งข้อมูลออกมาให้นับจำนวน)
#44-51 ผมได้ตรวจสอบเงือ่นไขว่ามีโหนดลูกของ พนง คนที่กำลังทำงานในลูปรอบนี้หรือไม่ หากมีก็ให้กำหนดค่าคุณสมบัติ populateondemand กับ Treeview เป็นจริง หากไม่มีก็ไม่เซ็ทค่านี้
8. เราต้องการให้คลิกที่ลิ้งของ control และแสดงแยกย่อยรายชื่อ พนง ที่เป็นลูกน้องออกมา เราจะต้องเพิ่ม Function เข้าไปนั่นคือ…
ผมใช้ LINQ ช่วยการเรียกข้อมูลของพนงที่ขึ้นตรงกับ Id ของพนงที่ได้ระบุเข้ามา แล้วโยนค่ากลับไปให้ Function AccessNodes เพื่อวนลูปและแสดงผลอีกครั้ง
9. และสุดท้ายสำหรับเหตุการของคอนโทรล Treeview ให้กลับไปที่หน้า Design แล้วคลิกที่คอนโทรล Treeview แล้วดูที่หน้าต่าง properties ทางด้านขวา ให้คลิกที่ปุ่ม Event ที่แสดงเป็นรูปสายฟ้า
แล้วให้คลิกสองครั้งที่เหตุการณ์ชื่อ TreeNodePupulate
จะปรากฏหน้า code behind อีกครั้งพร้อมกับ event ที่ vs ได้สร้างให้เรา ให้เพิ่มโค้ดลงไปดังนี้
เมื่อมีการคลิกที่ลิ้งของคอนโทรลจะมีการส่งค่า id ของโหนดที่ได้คลิกลงไปใน Function AccessNodesSub
เมื่อเสร็จสิ้นพิธีกรรมกันแล้ว ให้กด F5 บนคีย์บอร์ดเพื่อทดลองรันกันครับ
ทดสอบ ๆ 123
เมื่อรันขึ้นมาครั้งแรกปรากฏชื่อประธานบริษัท เมื่อคลิกที่เครื่องหมาย + ด้านหน้าจะแสดงผลดังนี้
สุดท้ายนี้..
ผมขอขอบคุณ Internet ที่ช่วยให้ผมเข้าถึงแหล่งข้อมูลดีๆ สำหรับบทความนี้ผมประยุกตร์มาจากคุณ
ซึ่งได้เขียนไว้ที่… http://aspalliance.com/732
แต่เนื้อหาที่เค้าเขียนเป็นการใช้ ADO.net นะครับ ส่วนบทความที่ผมเขียนนี้ใช้ LINQ
Happy coding !!
By Kwanchai !!!