[ASP.NET Web Forms Workshop#02] การ Select ข้อมูลจาก Database แสดงตารางด้วย GridView

เข้าสู่ Workshop #02 บทความนี้จะกล่าวถึงการ Select ข้อมูลมาโชว์ที่ GridView โดยทางผู้เขียนจะใช้ภาษา C# นะครับ ขอบอกก่อนว่า บทความนี้จะเริ่มค่อนข้างยาวมาก เนื่องจากจะอธิบายเกร็ดความรู้เล็กน้อยสำหรับภาษา C#, การเชื่อมต่อ Database รวมไปถึงการ Debugging เบื้องต้นด้วย

บทความนี้จะต้องมี

• มี Project ที่สร้างขึ้นมาพร้อมใช้งานแล้ว
• มี Database ที่สร้างขึ้นแล้ว

ซึ่งทั้ง 2 อย่างนี้ สามารถสร้างได้จากบทความก่อนหน้าดังนี้ครับ

• การติดตั้ง MS SQL Server และทดสอบสร้าง DB
• การติดตั้ง MS Visual Studio และทดสอบสร้าง Project
• [ASP.NET Web Forms Workshop#01] เริ่มต้นสร้าง Project และทำความรู้จัก Bootstrap

แต่หากท่านผู้อ่านมีความคุ้นเคยกับการใช้งานโปรแกรม MS SQL Server และ MS Visual Studio บ้างแล้ว สามารถลุยต่อได้เลยโดยไม่ต้องอ่านบทความเบื้องต้นที่กล่าวมาก็ได้ครับ

สร้าง Function สำหรับ Select ข้อมูลใน DB

เราจะทำการ Select ข้อมูลมา ซึ่งจะเขียนแยกเป็น Function เพื่อสามารถเรียกใช้ได้ในหน้าอื่น ๆ ด้วย และสะดวกต่อการแก้ไข

เริ่มต้นกันที่เปิดไฟล์ web.config ขึ้นมาเพื่อที่จะใส่ Connection String สำหรับการ Connect Database

Connection String คืออะไร ? คำตอบคือ ข้อความที่ระบุข้อมูลสำหรับการ Connect Database โดยมีรูปแบบเป็น Parameter ต่าง ๆ เช่น Server, Database เป็นต้น

ต่อไปให้ท่านผู้อ่านเปิดเว็บไซต์ connectionstrings.com จะพบกับหัวข้อให้เลือกหลายเจ้า ให้ท่านผู้อ่านคลิกที่ SQL Server ซึ่งในนั้นก็จะพบว่ามีหลายแบบ ให้เลือกแบบ Trusted Connection ตามกรอบสีแดงตามภาพครับ

จากนั้นให้นำมาพิมพ์ที่ไฟล์ web.config โดยเปลี่ยนชื่อ Server และ Database เป็นตามที่ท่านผู้อ่านได้สร้าง Database และกำหนดชื่อ Server name ไว้ ของผู้เขียนเป็นข้อมูลนี้ครับ

• Server=localhost\SQLEXPRESS
• Database=dbForMe

ใส่ Code เพิ่มเติมในตำแหน่งตามภาพดังนี้

web.config

ต่อไปให้สร้าง Folder และ Class file ดังนี้ครับ

• Folder ชื่อ Repositories
• Class file ชื่อ MovieRepository.cs

จากนั้นให้เราเปิดไฟล์ MovieRepository.cs ขึ้นมา

และพิมพ์ตามภาพด้านล่างนี้

สำหรับรูปแบบ Function นี้ มี Return type เป็น class DataSet ซึ่งเมื่อเราจะเรียกใช้ เราจะต้อง using path หรือระบุตำแหน่งของ namespace ของมันด้วย

คำถามคือ เราจะระบุ path สำหรับการ usingได้อย่างไรว่า class DataSet หรือ class อื่น ๆ อยู่ใน namespace ใด ?

คำตอบคือ ให้เรานำเมาส์ไปชี้ที่ชื่อ class ที่เราจะใช้งาน จะมีไอคอนหลอดไฟขึ้น ให้เราคลิกครับ มันจะปรากฏรายการให้เราระบุ path ครับ ให้เราเลือก using System.Data; ตามภาพครับ

จะพบว่าในส่วนของ using จะเพิ่ม namespace ดังกล่าวให้อัตโนมัติ

จากนั้นให้พิมพ์ Code ส่วนที่เรียกใช้ค่า Connection string จาก web.config ตามภาพครับ

สำหรับท่านผู้อ่านที่เป็นมือใหม่ อยากขอแนะนำสิ่งที่ไม่ควรมองข้าม คือ เมื่อเราพิมพ์ Code เรียกใช้ Class ที่มีการใช้ Argument (ค่าที่โยนไป) มักจะมีคำแนะนำให้อ่านนะครับ ตรงส่วนนี้สำคัญมากครับ ทำให้ Developer เข้าใจวิธีการใช้งาน Class ได้อย่างรวดเร็ว ซึ่งในภาพคือการเรียกใช้ Class SqlConnection ครับ

สำหรับท่านผู้อ่านที่เป็นมือใหม่ ขอแนะนำอีกสักนิด คือ การใช้งาน Class เราอาจสามารถส่งค่าเดียวกัน แต่คนละแบบได้ ซึ่งอยู่ที่ Class นั้น ๆ ว่ามีการรองรับให้เราส่งไปแบบใดได้บ้าง เนื่องจากว่า บางครั้งท่านผู้อ่านอาจจะได้เห็นการเขียน Code ที่หลากหลายรูปแบบจากบทความของผู้เขียนท่านอื่น จึงอยากแนะนำไว้ครับ ตัวอย่างดังภาพด้านล่างนี้

มาต่อ Code ให้จบ function ดีกว่าครับ พิมพ์ตามภาพนี้ได้เลย

การใช้งาน Debugging

เมื่อพิมพ์เสร็จแล้ว เราจะใช้ทดสอบ Function กัน โดยการใช้ Debugging เริ่มจากให้เรากำหนดจุด Breakpoint ของบรรทัดที่เราต้อบการครับ โดยการคลิกที่บรรทัดนั้น ๆ แล้วให้คลิกที่ Debug >> Toggle Breakpoint จะพบกับจุดสีแดง ดังภาพนี้

จากนั้นให้เปิดไฟล์ MovieList.aspx.cs และพิมพ์ดังนี้

เมื่อพิมพ์เสร็จแล้ว ให้กด F5 หรือคลิกที่ Run ครับ ให้ระบุ URL เพื่อให้เข้าไปที่หน้า MovieList ครับ โดยระบุเป็น

• localhost:xx/MovieList

เราจะพบว่าจุดที่เรา Breakpoint นั้นเป็นสีเหลือง นั่นหมายความว่าการ Run ถูกหยุดที่บรรทัดนั้นนั่นเอง

ให้เราเอาเม้าส์ไปชี้ที่ ds ให้มีกล่องขึ้นมา คลิกที่ไอคอนแว่นขยาย เพื่อที่จะดูข้อมูลว่ามีการ Run คำสั่งใช้งาน database สำเร็จหรือไม่

ถ้าสำเร็จจะพบกับข้อมูลในรูปแบบตารางดังนี้ครับ

ต่อไป ให้ Stop การ Run ก่อน เราจะแก้ไขไฟล์ .aspx.cs ซึ่งทางผู้เขียนอยากแนะนำให้รู้จัก class DataTable ให้ท่านผู้อ่านได้รู้จักครับ ซึ่งสามารถใช้ได้เช่นกันในการ Select Database โดยให้พิมพ์ดังนี้

โดยการทดสอบคือ จะใช้คำสั่ง Select 2 ครั้ง และให้ Run อีกครั้งโดยที่จะมาดู dt กันว่ามีค่าเป็นอย่างไร ดังภาพ

จะเห็นว่า มีข้อมูลในตารางเช่นกันแต่เราเขียน Select 2 รอบ ควรจะต้องได้ 2 ตารางสิ ทีนี้มาดู ds อีกครั้ง ดังภาพ

จะเห็นว่าสำหรับ ds นั้นมี 2 ตาราง ทำให้สรุปได้ว่า DataSet นั้น รองรับการ Run คำสั่งที่ต้องเรียก 2 ตาราง แต่ DataTable นั้นได้เพียงตารางเดียว จากจุดนี้ก็ให้ดูความเหมาะสมของคำสั่ง sql ครับ ต่อไปเราจะกลับมาที่พิมพ์ Code ดังนี้เพื่อพร้อมใช้ส่งค่าให้กับ GridView

MovieRepository.cs

กำหนดค่า Data ที่ได้จาก Database ให้ GridView

ต่อไปให้เราเปิดหน้า Movie.aspx และพิมพ์ Code พร้อมกับ comment code (คลุมแถบดำแล้วกด Ctrl+K และ Ctrl+C) เก่าไว้ก่อน ดังนี้

จากนั้นเปิดหน้า Movie.aspx.cs และพิมพ์ Code เพื่อ Set ค่าให้กับ GridView ดังนี้

MovieList.aspx.cs

เสร็จแล้วให้เรา Run เพื่อดูผลลัพธ์ จะได้ดังภาพ

สังเกตุว่าจะได้ผลลัพธ์ที่ไม่เหมือนกับ Code ที่เรา comment ไว้เลย และชื่อหัวตารางก็ยังเป็นชื่อ field จาก table ใน DB ให้ทางท่านผู้อ่านเปลี่ยนไปใช้ BoundField ดังนี้

และลอง Run อีกครั้งจะได้ผลลัพธ์ดังภาพ

จะเห็นว่าเริ่มดูดีขึ้นครับ ใกล้ความจริงกันแล้ว ต่อไปให้พิมพ์ตามนี้ครับ โดยเราจะใช้ TemplateField สำหรับรูปภาพ และให้ทำการเอา Comment Code เก่าออก เพื่อที่จะได้เปรียบเทียบกัน โดยพิมพ์ Code ดังภาพด้านล่าง

จากนั้นให้ท่านผู้อ่านลอง Refresh จะพบว่า table ที่เราได้จาก GridView ไม่เหมือนกับ table จาก Code เก่า ทั้ง ๆ ที่เราใส่ class name ของ bootstrap แล้ว ให้ท่านผู้อ่านคลิกขวาและเลือก Inspect ดูครับ

จะพบว่ามี attribute เพิ่มขึ้นมาเองคือ

• cellspacing=“0”
• rules=“all”
• border=“1”
• style=“border-collapse:collapse;”

และสังเกตุที่ id นั้น จริง ๆ เราตั้งชื่อว่า gvMovie แต่กลับถูกเปลี่ยนเป็น MainContent_gvMovie ซึ่งทั้งหมดนี้ เกิดขึ้นเพราะ GridView มัน generate ให้ครับ เพราะฉะนั้นการจะใช้ GridView หรือ Tools สำหรับหน้า .aspx อื่น ๆ ของ Web Form นั้น เราต้องหมั่น Inspect เช็คด้วยนะครับว่า ผลลัพธ์สุดท้ายที่ออกมาบน Web Browser ออกมาเป็นอะไร สุดท้ายนี้ให้ลบ Code สำหรับ table เก่าออก และพิมพ์ดังนี้ครับ

MovieList.aspx

และลอง Run อีกครั้ง จะได้ผลลัพธ์ดังนี้ เป็นอันจบการ Select ข้อมูลจาก Database และนำมาโชว์ที่ GridView ครับ

จบเรียบร้อยครับ บอกเลยว่ายาวมาก อาจจะทำให้ท่านผู้อ่านเบื่อกันเลยทีเดียว ต้องขอขอบคุณมากครับที่อ่านจนจบบทความนี้ ทางผู้เขียนยังเหลือการ Insert, Update และ Delete นะครับ ฝากติดตามต่อด้วยนะครับ (ขอขอบคุณข้อมูลภาพยนต์จาก majorcineplex และภาพถ่ายฟรีจาก pexels มา ณ ที่นี้ด้วยนะครับ)

บทความก่อนหน้า: [ASP.NET Web Forms Workshop#01] เริ่มต้นสร้าง Project และทำความรู้จัก Bootstrap

บทความต่อไป: [ASP.NET Web Forms Workshop#03] การทำ Form และการ Insert ข้อมูลลง Database

หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ คำติ สามารถติดต่อผู้เขียนได้เลยครับ