[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() ดังภาพด้านล่าง

MovieController.cs

จากนั้นให้สร้างไฟล์ 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 v3

เมื่อเข้ามาพบกับเจ้า Bootstrap แล้ว ทางผู้เขียนขอแนะนำว่า ให้ท่านผู้อ่านลองเข้าไปดู 2 เมนูนี้คร่าว ๆ ก่อนเลย นั่นคือ CSS และ JavaScript ซึ่ง 2 เมนูนี้จะค่อนข้างสำคัญมาก ๆ และใช้บ่อยมาก ๆ โดยเฉพาะ CSS

เมื่อท่านผู้อ่านได้ลองดูคร่าว ๆ แล้ว เราจะลองหยิบมาใช้งานจริงกันครับ ให้เริ่มจากดูในส่วนของ table ครับ

ให้ท่านผู้อ่านลองพิมพ์ตามนี้ครับ ในหน้า Index.cshtml ของ Folder Movie

Index.cshtml

จากนั้นให้ลองทดสอบ Run Project ครับ จะได้ผลลัพธ์ดังภาพ

ต่อไปเราจะเพิ่มรายละเอียดให้มากขึ้นครับ (ขอขอบคุณข้อมูลภาพยนต์จาก majorcineplex และภาพถ่ายฟรีจาก pexels มา ณ ที่นี้ด้วยนะครับ) ให้ท่านผู้อ่านพิมพ์ Code ตามด้านล่างครับ

Index.cshtml

จากนั้นให้ Run Project ครับ จะได้ผลลัพธ์ดังภาพ

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

jedsada-jed/training-dotnet-core-mvc

จบเรียบร้อยครับสำหรับ Workshop#01 นี้ ในบทความต่อไปทางผู้เขียนจะพูดถึงการ Select ข้อมูลจาก Database มาแสดงข้อมูลใน Table ครับ ขอบคุณท่านผู้อ่านทุกท่านที่ติดตามครับ

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

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