จากตอนที่แล้ว ผู้เขียนได้รันทดสอบหน้าเพจที่สร้างจาก Project ที่เป็น MVC แล้ว
(
แกะรอยดูการทำงานของ ASP.NET MVC (MVC 2) PART I)
 |
ผลที่ได้คือการโหลดเพจ Index |
ย้อนกลับมาดูการทำงานตั้งแต่แรก ก็คือการระบุให้ Compiler รู้ว่า Project นี้จะเรียก Controller ไหนใช้งานเป็นอันดับแรก ผ่าน method RegisterRoutes ที่อยู่ใน Global.asax
 |
เรียกใช้ method RegisterRoutes() ถูกเรียกภายใน method Application_Start() |
 |
ใน method RegisterRoutes() มีหน้าที่ทำ Resgister ให้กับ Project โดยให้ Controller Default เป็น Index (IndexController.cs) และให้ View Default เป็น Index (Index.aspx) |
 |
method Index() IndexController จะถูกเรียกและคืนค่า View ที่ตัวเองควบคุมอยู่ออกมา เป็นการคืนหน้าเพจ Index.aspx นั่นเอง |
พูดถึงการทำงานคร่าวๆ ไปแล้ว จากนี้ผุ้เขียนจะทำการ Implement ต่อในส่วนของ Model
Model ที่จะสร้างขึ้นเป้นเพียงการใส่ชื่อเท่านั้น จึงไม่มีอะไรซับซ้อน
 |
คลิ๊กเมาส์ขวาที่ Folder Model แล้ว Add > Class ผู้เขียนตั้งชื่อ Class ว่า IndexModel |
 |
ภายใน Class IndexModel ให้สร้าง Member ของ Class ชื่อ YourName ตามภาพ และตั้ง DisplayName เป็น "ชื่อของคุณ" |
จากนั้นให้ทำการแก้ไข Tag Page ในไฟล์ Index.aspx ที่อยู่บนสุด ให้ดูในส่วนที่ระบุ Inherits ปกติจะเป็น Inherits="System.Web.Mvc.ViewPage<
dynamic> ให้เปลี่ยนเป็นการอ้างถึง Model ที่สัมพันกับเพจนี้ Inherits="System.Web.Mvc.ViewPage<
myTestMVC.Models.IndexModel>
 |
Tag Page บรรทัดบนสุดของ Index.aspx |
 |
ใส่ Tag Form รวมทั้ง Control ต่างๆ |
ในภาพ ViewData["Caption"] คือคำที่จะพิมพ์ออกมาจาก Controller
Html.LabelFor เป็น Control Label ที่จะนำค่า DisplayName ที่ใส่ไว้ใน Model มาแสดง
Html.TextBoxFor เป็น Control TextBox ไว้รับค่าตามที่กำหนดไว้ใน Model
Html.ValidationMessageFor ทำการตรวจสอบค่าของ Model
Parameter ทั้งหมดจะอ้างค่าของที่อยู่ใน Model ดดยที่ m คือ model ที่ได้ทำการประกาศ Inherits ไว้ที่บรรทัดแรก
สุดท้ายคือปุ่ม OK ใช้ Submit Form ธรรมดา
จากนั้นผู้เขียนจะเข้าไปเพิ่ม static class ชื่อ IndexModelValidate เพื่อตรวจสอบค่าภายในส่วนของ IndexModel เพื่อใช้ทดสอบ
 |
ภายใน Class จะมี method ชื่อ isHello และรับค่า Parameter เป็น String |
 |
ในส่วนของ IndexController.cs ปรับปรุงในส่วนของการคืนค่า View โดยให้พิมพ์ข้อความออกมาตอนแสดงผล |
 |
เพิ่ม method สำหรับรองรับการ Post เข้ามา |
ทุกส่วนเสร็จสมบูรณ์แล้วพร้อมที่จะทดสอบ
 |
ผลการทดสอบโหลดหน้า Index.aspx |
 |
ทดสอบใส่ชื่อแล้วกดปุ่ม OK จะได้ผลตามภาพ และถ้าไม่ใส่ข้อความใดๆ แล้วกดปุ่ม OK จะแสดงข้อความ "กรุณาใส่ชื่อ" ตามเดิม |
สรุป
การใช้ ASP.NET MVC มีข้อดีอย่างมากในการสร้าง Project ขนาดใหญ่และต้องการความคร่องตัวในทีมงาน ที่ทำงานร่วมกันสูง และมีมาตรฐานในการออกแบบ และวิเคราะห์ระบบอย่างชัดเจน แต่ก็เหมือนกลับมาใช้แนวทางเดิมๆ และไม่ได้พัฒนาในรูปแบบ Code Behind แบบ ASP.NET ทั่วไป แต่กลับมาวางโครงสร้าง GET/POST เหมือนเดิม
ไม่มีความคิดเห็น:
แสดงความคิดเห็น