การสร้างเว็บแอพพลิเคชันโดยใช้ ASP.NET MVC 4 ตอนที่ 2 : วิธีส่งผ่านค่าไปยัง view

บทความนี้เป็นภาคต่อจากตอนที่ 1 ว่าด้วยการสร้างเว็บแอพพลิเคชัน ASP.NET MVC 4 จากเทมเพลตสำเร็จรูปในโปรแกรม Visual Studio และแนวคิดของ MVC design pattern

พิจารณาสิ่งที่เกิดขึ้นเมื่อคลิกลิงก์ About ในเว็บแอพพลิเคชัน เว็บบราวเซอร์จะส่ง HTTP request ไปยัง IIS Express ซึ่งเป็นโปรแกรมเว็บเซิร์ฟเวอร์ทดสอบที่รันในโหมดแบ็กกราวน์บนเครี่องของท่านเอง (localhost)

ท่านสามารถเรียกดูโปรแกรม IIS Express ที่กำลังทำงานอยู่ได้จาก system tray บนทาส์กบาร์ของวินโดวส์ ให้คลิกขวาที่ไอคอนของ IIS Express > Show All Applications ก็จะพบว่า IIS Express กำลังรันแอพพลิเคชัน Mvc4App บนพอร์ต 13355 ซึ่งเป็นพอร์ตชั่วคราวที่ใช้ขณะพัฒนาโปรแกรม จากนั้น IIS Express จะรับรีเควสต์แล้วส่งต่อไปยังเว็บแอพพลิเคชัน MVC ของเรา

เว็บแอพพลิเคชัน MVC ทุกตัวๆ จะมี routing engine ที่คอยรับรีเควสต์และส่งต่อไปยังคลาสใดคลาสหนึ่งข้างในโฟลเดอร์ Controllers โดยปกติแล้ว รีเควสต์ที่ส่งมายัง /Home/{อะไรบางอย่าง} จะไปสุดทางที่ HomeController ดังนั้น การรีเควสต์ /Home/About จึงไปสุดทางที่เมธอด About ภายใน HomeController โปรดสังเกตว่าการตั้งชื่อเมธอดให้ถูกต้องตรงกัน (naming convention) คือปัจจัยที่ช่วยให้รีเควสต์ค้นหาเมธอดที่ใช่ได้สำเร็จ

เมธอดประเภท public ใน Controller เหล่านี้เรียกว่า action แต่กรณีแอ็กชัน About ในตัวอย่างนี้ไม่ได้มีกิจหน้าที่อะไรมาก ไม่มีการสั่งสร้างโมเดลด้วย มีเพียงรีเทิร์น View ซึ่งเป็น ActionResult ประเภทหนึ่งที่ action สามารถรีเทิร์นออกมาได้

ActionResult เป็นตัวที่กำหนดว่า MVC framework จะต้องทำอะไรต่อไป บางที ท่านอาจต้องการ redirect user ไปยังที่ใดสักแห่ง หรือต้องการรีเทิร์นค่าบางอย่างในรูปแบบที่ JavaScript สามารถนำไปใช้ต่อได้ การรีเทิร์น View จึงเป็นการบอก MVC framework ว่าสิ่งที่ท่านปรารถนาให้ทำต่อไปคือการเร็นเดอร์วิวบนหน้าจอ แต่จะเลือกวิวอะไรดีล่ะ?

MVC framework จะควานหาวิวในโฟลเดอร์ Views ของเว็บแอพพลิเคชัน ทีนี้ naming convention จะกลับมามีบทบาทอีกครั้ง โปรดสังเกตโฟลเดอร์ Home ที่ชื่อของมันตรงกับชื่อคอนโทรลเลอร์ HomeController ที่เราสนใจอยู่

หากขยายโฟลเดอร์นี้ออกมาก็จะพบวิวชื่อว่า About ที่ถูกต้องตรงกับ action ใน HomeController ที่เรากำลังสนใจอยู่เช่นกัน เมื่อเปิดวิวตัวนี้ ท่านจะเห็นรายละเอียดต่างๆ ที่วิวเร็นเดอร์ออกทางหน้าจอ ดังรูป:

วิว About นี้มีนามสกุล .cshtml ซึ่งเป็นดีฟอลต์เอ็กซเท็นชั่นของ Razor view และสังเกตว่าวิวฝั่งซ้ายมือไม่ได้รวมทุกสิ่งทุกอย่างที่ปรากฏในเว็บบราวเซอร์ เช่น ข้อความ your logo here, ลิงก์ Register, ลิงก์ Log in, เมนู Home/About/Contact, ข้อความ copyright ซึ่งเป็น layout view ที่เราต้องการให้แสดงทุกหน้าในเว็บแอพพลิเคชัน ทั้งนี้ วิว About มีเพียงเนื้อหาที่เจาะจงเฉพาะแอ็กชั่น About เท่านั้น

กลับมาที่ HomeController ตรงแอ็กชั่น About เราจะดูวิธีนำข้อมูลมาใส่ใน ViewBag ซึ่งเป็น dynamically typed object ในภาษา C# หมายความว่า ท่านสามารถเพิ่ม property อื่นๆ ลงใน ViewBag ได้ตามใจ เพื่อให้ดึงออกมาแสดงผลบนหน้าจอ

ลองเล่นกับ ViewBag โดยเพิ่มพร็อพเพอร์ตี้ ViewBag.Location ลงไปที่แอ็กชั่น About ดังรูป:

แล้วไปแก้ไฟล์ About.cshtml เสียใหม่ ดังรูป:

เครื่องหมาย @ เป็นวิธีบอก Razor view engine ว่านี่คือ C# expression ที่ต้องการให้พิจารณา แล้วดึงผลลัพธ์มาเขียนไว้ที่บริเวณนี้ จากนั้นให้รันโปรเจ็กต์ใหม่อีกครั้ง ได้ผลดังรูป:

นี่คือวิธีหนึ่งที่ Controller สามารถใช้ส่งผ่านข้อมูลไปยังวิว ส่วนอีกวิธีคือการใช้ strongly typed model โปรเจ็กต์ MVC ทุกอันๆ จะมีโฟลเดอร์ Models ซึ่งท่านสามารถใช้ประโยชน์ในการสร้างโมเดลใหม่ขึ้นมา แม้ในทางปฏิบัติ โมเดลสามารถอยู่ที่ใดก็ได้ หรืออยู่คนละโปรเจ็กต์เลยก็ยังได้ (แต่ท่านต้อง reference โปรเจ็กต์นั้นด้วย) ให้คลิกขวาที่โฟลเดอร์ Models > Add > Class แล้วตั้งชื่อคลาสใหม่ว่า AboutModel

ได้คลาสใหม่แล้ว ทดลองเพิ่มพร็อพเพอร์ตี้ 2 อันเข้าไป ดังรูป:

กลับมาที่ HomeController แก้ไขแอ็กชั่น About โดยยกเลิก ViewBag แล้วเปลี่ยนมาประกาศ instance ใหม่ของ AboutModel โดยเริ่มพิมพ์ดังรูป:

เอาล่ะครับ เราสร้างโมเดล model เสร็จแล้ว ก็สามารถบอก MVC framework ว่าเมื่อต้องการเร็นเดอร์วิวนี้ให้ใช้โมเดล model ที่สร้างขึ้น และเราก็ส่งผ่าน model นี้ไปยัง View

ขั้นตอนถัดไปคือการแก้วิว About.cshtml ให้เปลี่ยนมาใช้โมเดลใหม่นี้ในการแสดงผล ก่อนอื่นขอให้ Rebuild โปรเจ็กต์สักรอบหนึ่งเพื่อความชัวร์ และลงมือพิมพ์ดังรูป:

เสร็จแล้วให้รันโปรแกรม จะได้ผลลัพธ์ดังรูป:

นี่คือการสร้างวิวโดยใช้ strongly typed model ซึ่งเป็นวิธีที่นักพัฒนาแอพพลิเคชัน MVC ใช้กันเป็นปกติ สำหรับบทความครั้งหน้าจะแนะนำ JavaScript และ CSS ใน ASP.NET framework โปรดติดตามครับ!