[ASP.NET Core MVC Workshop#01] เริ่มต้นสร้าง Project และทำความรู้จัก Bootstrap
ขอต้อนรับเข้าสู่ Workshop สำหรับ ASP.NET Core MVC นะครับ หลังจากที่ได้ทำ Workshop WebForms แล้ว ครั้งนี้ทางผู้เขียนจะใช้ .NET Core MVC ครับ โดยจุดมุ่งหมายของ Workshop นี้จะคล้ายกับ Workshop WebForms ครับ มีดังนี้
- สามารถสร้าง Web Application สำหรับ Connect Database ได้ (Insert, Update, Delete, Select)
- สามารถเข้าใจการทำงานของฝั่ง Client Side(JavaScript) และ Server Side(C#) ในเบื้องต้น
- สามารถสร้าง Form และมีการ Validate ได้
- สามารถเข้าใจการติดตั้ง Nuget Package ในเบื้องต้นได้
- สามารถเข้าใจการแบ่ง Structure ของการทำงาน Code แต่ละส่วนได้ในเบื้องต้น
สำหรับบทความ #01 นี้ ผู้เขียนจะนำเสนอการทำความรู้จักกับ Project ที่สร้างขึ้น ซึ่งมีการติดตั้ง Bootstrap อยู่แล้ว และผู้เขียนจะเริ่มให้ทดสอบการทำงานของส่วนต่าง ๆ ของ MVC ในเบื้องต้น (สำหรับ M จะพูดในบทความหน้านะครับ) เพื่อให้ท่านผู้อ่านได้คุ้นเคยและเข้าใจครับ
บทความสำหรับ workshop นี้จะใช้โปรแกรม Microsoft Visual Studio for Mac และ ใช้ Sqlite เป็น Database ครับ ซึ่งสามารถติดตั้งได้จากบทความดังต่อไปนี้ครับ
การติดตั้ง DB Browser for SQLite และทดสอบสร้าง Database
การติดตั้ง Microsoft Visual Studio Community for Mac และทดสอบสร้าง Project
ทำความเข้าใจการทำงานของ Controller
C ที่มาจาก MVC ก็คือ Controller นั่นเอง ให้ท่านผู้อ่านเริ่มต้นสร้างโดยการคลิกขวาที่ Folder ที่ Controller และเลือก Add >> New File…
จะพบหน้าต่างให้เลือกรูปแบบของไฟล์ ให้ท่านผู้อ่านเลือก ASP.NET Core >> MVC Controller Class และพิมพ์ชื่อว่า MovieController จากนั้นคลิกที่ปุ่ม New
จะได้ไฟล์ที่ข้างในมี Code ดังภาพ
ให้ท่านผู้อ่านลองทดสอบโดยการเปลี่ยน Return type ให้เป็น string และ return ข้อความออกไปดังภาพด้านล่าง
จากนั้นให้ลอง Run Project ครับ และไปที่ URL
- localhost:xxxx/Movie
จะได้ผลลัพธ์ดังภาพ
กลับไปที่หน้า MovieController.cs อีกครั้งครับ ให้เพิ่ม Method ที่ชื่อว่า Welcome() และพิมพ์ Code ตามภาพด้านล่าง และ Run Project ครับ
ให้ลองเข้าไปที่ URL ดังนี้
- localhost:xxxx/Movie/Welcome?name=JED&id=10001
แล้วดูผลลัพธ์ครับ
ให้ทางท่านผู้อ่านลองเปลี่ยนค่าของ name และ id ดูครับ ว่าจะได้ผลลัพธ์ที่เปลี่ยนไปเป็นลักษณะไหน
ทำความเข้าใจการทำงานของ View
ต่อไปเราจะลองทดสอบการทำงานของ View นะครับ ให้ไปที่ไฟล์ MovieController และเปลี่ยน Return type และให้ Return View() ของ Method Index() ดังภาพด้านล่าง
จากนั้นให้สร้างไฟล์ View ขึ้นมาโดยสร้าง Folder ภายใต้ Folder Views ชื่อว่า Movie และคลิกขวาที่ Folder เลือก Add >> New File… ดังภาพ
เลือกที่ ASP.NET Core >> MVC View Page และตั้งชื่อเป็น Index
เมื่อสร้างไฟล์เรียบร้อยแล้วให้เปิดขึ้นมาและใส่ Code ดังนี้ครับ
จากนั้นให้ลอง Run Project เพื่อทดสอบดูครับ โดยให้เข้าที่ URL ดังนี้
- localhost:xxxx/Movie
หากกำลังสงสัยอยู่ว่า มันมาได้อย่างไร มันเป็นมาอย่างไร เราจะมาหาคำตอบกันซักเล็กน้อยครับ ให้ท่านผู้อ่านเปิดไฟล์ _Layout.cshtml ขึ้นมาครับ โดยไฟล์ จะอยู่ที่ Views >> Shared >> _Layout.cshtml
เมื่อเปิดแล้วจะพบกับ Code HTML ที่เป็นเหมือน Master Page ของ WebForm ครับ หรือก็คือหน้าหลักครับ ให้ดูกรอบสีเขียวในภาพครับ ขออธิบายคร่าว ๆ ดังนี้
- @ViewData[“Title”] คือส่วนที่ถูกประกาศไว้ให้เรียกใช้ผ่าน Key ที่ชื่อว่า Title
- @RenderBody() คือส่วนที่จะทำการ Render สำหรับตัว Views ที่เราสร้างขึ้นครับ
ทีนี้เรามาลองใส่รายละเอียดให้มากขึ้นครับ ให้ท่านผู้อ่านพิมพ์ Code ดังภาพด้านล่าง
จากนั้นทำการทดสอบโดย Run Project ครับ จะพบกับผลลัพธ์ดังภาพ
การใช้งาน Bootstrap ใน C# ASP.NET Core MVC เบื้องต้น
เมื่อเข้าใจการทำงานของ View ในระดับหนึ่งแล้ว ต่อไปเราจะทดสอบการใช้งาน CSS Framwork ที่ชื่อว่า Bootstrap กันบ้าง ผู้เขียนจะเริ่มต้นให้ท่านผู้อ่านได้ลองใช้แค่เบื้องต้นเท่านั้น และใช้ version 3 ให้ท่านผู้อ่านเข้าไปที่
เมื่อเข้ามาพบกับเจ้า Bootstrap แล้ว ทางผู้เขียนขอแนะนำว่า ให้ท่านผู้อ่านลองเข้าไปดู 2 เมนูนี้คร่าว ๆ ก่อนเลย นั่นคือ CSS และ JavaScript ซึ่ง 2 เมนูนี้จะค่อนข้างสำคัญมาก ๆ และใช้บ่อยมาก ๆ โดยเฉพาะ CSS
เมื่อท่านผู้อ่านได้ลองดูคร่าว ๆ แล้ว เราจะลองหยิบมาใช้งานจริงกันครับ ให้เริ่มจากดูในส่วนของ table ครับ
ให้ท่านผู้อ่านลองพิมพ์ตามนี้ครับ ในหน้า Index.cshtml ของ Folder Movie
จากนั้นให้ลองทดสอบ Run Project ครับ จะได้ผลลัพธ์ดังภาพ
ต่อไปเราจะเพิ่มรายละเอียดให้มากขึ้นครับ (ขอขอบคุณข้อมูลภาพยนต์จาก majorcineplex และภาพถ่ายฟรีจาก pexels มา ณ ที่นี้ด้วยนะครับ) ให้ท่านผู้อ่านพิมพ์ Code ตามด้านล่างครับ
จากนั้นให้ Run Project ครับ จะได้ผลลัพธ์ดังภาพ
สำหรับ Source code ที่ทำมาทั้งหมดในบทความนี้ สามารถดูหรือ Download ได้ที่ Github ใน branch นี้ครับ
จบเรียบร้อยครับสำหรับ Workshop#01 นี้ ในบทความต่อไปทางผู้เขียนจะพูดถึงการ Select ข้อมูลจาก Database มาแสดงข้อมูลใน Table ครับ ขอบคุณท่านผู้อ่านทุกท่านที่ติดตามครับ
หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ ติชม สามารถติดต่อผู้เขียนได้เลยครับ