ตอนที่ 2

     สร้างคอนโทรลเลอร์ใหม่ขึ้นมารองรับรีวิวคอร์สอบรม โดยไปที่ Solution Explorer คลิกขวาที่โฟลเดอร์ Controllers > Add > Controller และตั้งชื่อคอนโทรลเลอร์นี้ว่า ReviewsController พร้อมกับเลือกใช้ Template “MVC controller with empty read/write actions” และคลิก Add

 

 

จากนั้น โปรแกรม Visual Studio จะสร้างคอนโทรลเลอร์ ReviewsController ขึ้นจากเทมเพลตดังรูปข้างล่าง ซึ่งประกอบด้วยเมธอด Index เป็นดีฟอลต์แอ็กชั่น ตลอดจนเมธอด Details, Create, Edit และ Delete ที่ท่านสามารถเพิ่มเนื้อหาโค้ดได้ตามใจชอบ

 

ปกติแล้วเราจะใช้แอ็กชั่น Index ในการสั่งแสดงรายการรีวิวทุกอย่างๆ ออกมา แต่ตอนนี้ เรายังขาดโมเดลที่เอาไว้ represent ชุดรายการรีวิว จึงต้องสร้างคลาสของโมเดลใหม่ โดยไปที่ Solution Explorer คลิกขวาที่โฟลเดอร์ Models > Add > Class ตั้งชื่อคลาสว่า CourseReview และคลิก Add

โปรแกรม Visual Studio ก็จะสร้างไฟล์ CourseReview.cs ขึ้นมา

 

เนื่องจากต่อไป เว็บแอพพลิเคชันนี้จะต้องเชื่อมต่อกับดาต้าเบส เราจึงต้องกำหนดพร็อพเพอร์ตี้ ID เพื่อเป็น primary key, Course สำหรับเก็บชื่อคอร์ส, Teacher สำหรับเก็บชื่ออาจารย์, Comment สำหรับเก็บข้อคิดเห็น และ Rating สำหรับเก็บระดับความพึงพอใจ (Tip: พิมพ์คำว่า prop แล้วกดแป้น Tab ติดกันสองที ดูผลครับว่าเกิดอะไรขึ้น)

 

สลับมาที่ ReviewsController เลื่อนลงข้างล่างสุด แล้วเพิ่มข้อมูล In-Memory ในรูปแบบ static private List ของคลาสโมเดล CourseReview เข้าไป เพื่อใช้งานทดแทนการเข้าถึงดาต้าเบสของจริงพลางๆ ก่อน (ผมจะสอนวิธีใช้ LINQ + Entity Framework อย่างละเอียดภายหลัง) ดังรูป:

จากนั้นไปที่แอ็กชั่น Index ของ ReviewsController.cs แล้วแก้โค้ดตามรูปข้างล่าง เพื่อบอกว่าโมเดลที่ผูกกับแอ็กชั่นนี้ให้เอาจาก LINQ query ที่มีการ select ทุกรีวิว แสดงผลเรียงตามลำดับชื่อ Teacher

 

เราก็จะได้โมเดลสำหรับวิวที่ยังไม่ได้ถูกสร้างขึ้น ให้ท่านทดลองรันโปรเจ็กต์ตอนนี้ ป้อน URL http://localhost:{เลขพอร์ต}/reviews จะได้ผลดังรูป:

เหตุที่ฟ้อง error เนื่องจากเราบอก MVC runtime ว่าต้องการเร็นเดอร์วิวจากแอ็กชั่น Index ของReviewsController รันไทม์ก็จะค้นหาวิวสำหรับใช้เป็นเท็มเพลตโดยใช้วิธี “ตามธรรมเนียม”  กล่าวคือ พยายามหาไฟล์วิวชื่อ Index (ชื่อตรงกับแอ็กชั่น) จากโฟลเดอร์ Views\Reviews (ชื่อสอดคล้องกับคอนโทรลเลอร์) ซึ่งไฟล์ Index นี้มีได้หลายนามสกุล เพราะ MVC engine มีวิวเอ็นจินให้เลือกใช้สองตัวโดยดีฟอลต์ ได้แก่:

• WebForm view engine : ไฟล์วิวใช้นามสกุล .aspx หรือ .ascx (เก่าแล้ว ไม่นิยมใช้)
• Razor view engine : ไฟล์วิวใช้นามสกุล .cshtml (กรณี C#) หรือ vbhtml (กรณี Visual Basic)

นอกจากนี้ รันไทม์ยังพยายามค้นหาวิวจากโฟลเดอร์ Views\Shared เนื่องจากเป็นโฟลเดอร์สำหรับเก็บวิวที่เอาไว้ให้คอนโทรลเลอร์ทุกตัวแบ่งกันใช้ แต่ก็หาไม่เจอ

เพราะฉะนั้น ท่านต้องสร้างวิวขึ้นมาโดยคลิกขวาที่แอ็กชั่น Index > Add View และระบุพารามิเตอร์ต่างๆ ตามรูปข้างล่าง สังเกตว่าเลือก Create a strongly-typed view เพราะเรารู้จักชนิดของออปเจ็กต์โมเดลที่จะป้อนให้วิวดีอยู่แล้ว, เลือก Scaffold template เป็น List เพราะต้องการให้วิวแสดงข้อมูลรีวิวเป็นลิสต์ เสร็จแล้วคลิก Add

โปรแกรม Visual Studio จะสร้างโฟลเดอร์ชื่อ Reviews ภายใต้โฟลเดอร์ Views พร้อมกับสร้างไฟล์วิว Index.cshtml ดังรูป:

จากนั้นเซฟโปรเจ็กต์และรัน ป้อน http://localhost:{เลขพอร์ต}/reviews ในเว็บบราวเซอร์ จะได้หน้าจอรีวิวอันสวยสดงดงาม

 อ้างอิงจาก : http://www.devsqr.com/mvc4_part08/

ตอนที่ 1

           บทความการสร้าง Web Application โดยใช้ ASP.NET MVC จะสอนให้ท่านเข้าใจวิธีการสร้างเว็บแอพพลิเคชันโดยใช้ภาษา C# ตลอดจนแนวคิดการออกแบบเว็บแอพพลิเคชันบน MVC (Model-View-Controller) framework ก่อนอื่น คอมพิวเตอร์ของท่านต้องติดตั้งโปรแกรม Visual Studio สำหรับเขียนและดีบั๊กโค้ด 

เมื่อท่านมีเครื่องมือพร้อมแล้ว ให้เปิดโปรแกรม Visual Studio แล้วคลิก New Project (หรือคลิกเมนู File > New > Project) เพื่อสร้างโปรเจ็กต์ใหม่

ภายในหน้าต่าง New Project ท่านจะพบเท็มเพลตต่างๆ สำหรับสร้างแอพพลิเคชันสารพัดรูปแบบ ให้เลือก Visual C# > ASP.NET MVC  Web Application จากนั้นตั้งชื่อโปรเจ็กต์ เลือกโฟลเดอร์ที่จะเซฟโปรเจ็กต์ แล้วคลิกปุ่ม OK

โปรแกรม Visual Studio จะให้ท่านเลือกเทมเพลตย่อยในการสร้างโปรเจ็กต์ ในที่นี้ เลือก Internet Application ซึ่งมีโฮมเพจ ตลอดจน user interface (UI) และหน้า login สำเร็จรูป ส่วน View engine เป็นส่วนประกอบของแอพพลิเคชันที่ช่วยให้ท่านสร้าง HTML สำหรับตอบกลับไปหาเว็บบราวเซอร์ ให้เลือกเป็น Razor และกาเครื่องหมายถูกที่ Create a unit test project เพื่อให้ Visual Studio สร้างโปรเจ็กต์ยูนิตเทสต์ด้วย แล้วคลิกปุ่ม  OK

สิ่งที่พึงสังเกต คือ Visual Studio จะรวบรวมไลบรารีต่างๆ ภายนอก เช่น jQuery, jQuery UI เข้ามาในโปรเจ็กต์เป็น NuGet packages ซึ่งช่วยให้ง่ายต่อการอัพเดทไลบรารีเหล่านี้ภายหลัง เพราะท่านไม่ต้องลำบากเข้าเว็บดาวน์โหลดและก็อบปี้ไฟล์ไปมาอีก เอาล่ะครับ เมื่อสร้างโปรเจ็กต์เสร็จแล้ว ทดลองรันแอพพลิเคชันนี้ในโปรแกรม Internet Explorer ด้วยการคลิกปุ่ม play หรือกดแป้น F5

Visual Studio จะคอมไพล์โค้ดและรันเว็บแอพพลิเคชัน นี่คือหน้าตาของเทมเพลต Internet Application ที่ท่านเลือกตอนสร้างโปรเจ็กต์ อันประกอบด้วยโฮมเพจ สีสัน สไตล์ และเมนูดีฟอลต์ ดังรูป

คลิกเมนู Contact สังเกตว่า URL ที่ปรากฏคือ /Home/Contact หน้าตาสวยงามเกลี้ยงเกลา ไม่มีนามสกุลใดๆ ต่อท้าย

อ้างอิงจาก :http://www.devsqr.com/mvc4_part01/