[ASP.NET Core MVC Workshop#02] การ Select ข้อมูลจาก Database ด้วย Model และแสดงข้อมูลด้วย​ Table

เช่นเดียวกันกับบทความ Web Forms Workshop ซึ่งบทความที่ 2 นี้จะกล่าวถึงการ Select ข้อมูลมาโชว์ที่ Table โดยทางผู้เขียนจะใช้ภาษา C#

ขอย้ำหลักการของ MVC ด้วยภาพนี้อีกครั้ง

ภาพจาก: https://channel9.msdn.com/Series/Introduction-to-ASP-NET-MVC/01

บทความนี้เราจะทำดังนี้

• Model: สร้างไฟล์ MovieModel.cs โดยให้ชื่อ Key และ Type ตรงกับ Field ใน Database และสร้างไฟล์ MyProjectContext.cs เพื่อทำการระบุ Path DB
• Controller: ใน MovieController.cs จะเรียกใช้ Model ส่งให้ View
• View: แก้ไขให้รับค่า Model จาก Controller มาแสดงผลลง Table

และด้วย Concept ของ MVC นี้ และใช้การ Connect DB ด้วย Model ที่ .NET มีให้นั้น ทำให้สะดวกกว่า Web Forms และ Code ได้สั้นกว่า

ตัวบทความ MVC Workshop#02 นี้ ห่างจาก #01 ไปนานพอสมควร ไม่คิดว่าจะมีผู้ที่สนใจรอติดตามบทความนี้ ต้องขอขอบคุณมาก ๆ ครับ

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

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

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

• การติดตั้ง DB Browser for SQLite และทดสอบสร้าง Database
• การติดตั้ง Microsoft Visual Studio Community for Mac และทดสอบสร้าง Project
• [ASP.NET Core MVC Workshop#01] เริ่มต้นสร้าง Project และทำความรู้จัก Bootstrap

การสร้าง Model เพื่อใช้งาน Database

จากบทความ SQLite ที่ได้สร้าง Database มาทดสอบ เราจะใช้ Database นั้นแหละมาทำการ Select ในบทความนี้

เริ่มจากนำไฟล์ myDB.db ที่เราได้สร้าง มาใช้อยู่ใน Project ครับ โดยผู้เขียนสร้าง Folder ชื่อ database และ Drag ไฟล์ที่ว่ามาที่ตำแหน่งนี้

จากนั้นมา Config ให้เราเรียกใช้ข้อมูลจากเจ้า Database ก้อนนี้ได้ โดยเริ่มจากการสร้างไฟล์ MyProjectContext.cs และ MovieModel.cs ใน Folder ที่ชื่อว่า Models ดังภาพด้านล่าง

โดยเริ่มจากไฟล์ MovieModel.cs ให้ใส่ Code ดังนี้ ซึ่งกำหนด​ Type ตาม myDB.db

MovieModel.cs

จากนั้นที่ไฟล์ MyProjectContext.cs ให้ใส่ Code ลงไปดังนี้ (Class ต่าง ๆ ที่หาไม่เจอ อย่าลืม using ให้มันด้วยนะ หรือจะ Quick Fix เพื่อหามันก็ได้ครับเร็วดี)

MyProjectContext.cs

เมื่อทำตามครบแล้ว เราจะทำการทดสอบโดยการ Select ข้อมูลด้วยคำสั่ง LINQ ให้ท่านผู้อ่านเปิดไฟล์ MovieController.cs และเพิ่ม Code ในส่วนของ Method ที่ชื่อ Index() ดังภาพ

ต่อไปใส่ Breakpoint ให้บรรทัดที่ 19 โดยการคลิกไปที่หน้าเลขบรรทัด

แล้วทำการ Run ด้วย F5 หรือจะคลิกที่ปุ่ม Run ก็ได้ครับผม จะเห็นเป็นข้อมูลที่อยู่ใน Table Movie ดังภาพ

เป็นอันเสร็จสิ้นการสร้าง Model เพื่อใช้งาน Database

LINQ(Language Integrated Query) คืออะไร ?
คือ ภาษาที่ถูกพัฒนาขึ้นเพื่อตอบสนอง OOP ในการการจัดการ Data อยู่ในรูปแบบของ Object มีข้อดีคือการตรวจสอบ หรือการ Debug ในฝั่งของโปรแกรมทำได้ง่ายขึ้น
โดยสามารถนำไปใช้กับหลายอย่าง เช่น
- LINQ to SQL
- LINQ to Objects
- LINQ to XML
- LINQ to DataSet

แสดงข้อมูลที่ได้จาก Model ที่ Razor view

ขั้นตอนต่อไป เราจะจัดการ View ที่ชื่อว่า Razor จัดไปหนึ่งดอก !!!

ขอบคุณ Razor จาก Dota

กลับมาที่สาระต่อ View ที่ว่าเนี่ย มันชื่อว่า Razor ซึ่งมันมีนามสกุลเป็น .cshtml

ให้ทำการเปิดไฟล์ตาม path นี้คือ TrainingDotNetCoreMVC/Views/Movie/index.cshtml แล้วแก้ไข Code ให้เป็นดังภาพด้านล่าง

TrainingDotNetCoreMVC/Views/Movie/index.cshtml

จากนั้นให้แก้ไข Code ในหน้า MovieController.cs โดยส่งข้อมูล movie ไปใน View() ดังภาพ

MovieController.cs

จากนั้นทำการ Run Project เพื่อดูผลลัพธ์

เป็นอันจบการ Select ข้อมูลลงบน Table

สำหรับ Source code ที่ทำมาทั้งหมดในบทความนี้ สามารถดูหรือ Download ได้ที่ Github ใน branch นี้ครับ

jedsada-jed/training-dotnet-core-mvc

จบเรียบร้อยครับสำหรับ Workshop#02 นี้ ส่วนบทความ #03 ลิงค์อยู่ด้านล่าง ขอบคุณท่านผู้อ่านทุกท่านที่ติดตามครับ

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

บทความถัดไป: [ASP.NET Core MVC Workshop#03] การทำ Form พร้อม Validate และการ Insert ข้อมูลลง Database

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

Reference

• http://www.thaicreate.com/dotnet/forum/044353.html
• https://channel9.msdn.com/Series/Introduction-to-ASP-NET-MVC/01