หลักการทำงานของ MVC (Model View Controller) ก็น่าจะพอเข้าใจกันแล้ว
http://systemdevman.blogspot.com/2011/05/mvc.html
แต่ในจิตวิญญาณของความเป็น Developer แล้ว นอกจากรู้ ก็ต้องปฏิบัติ ทดสอบ ทดลอง ให้สัมฤทธิ์ผลออกมาด้วย
ผู้เขียนใช้ Visual Studio 2010 ในการสร้าง ซึ่งภายใน VS2010 มี MVC 2 ให้ใช้ เริ่มกันเลย
อันดับแรกก็คือการสร้าง Project ขึ้นมาโดยเลือกเป็น ASP.NET MVC 2 Empty Web Application
ใส่ชื่อโปรแกรมและ Path ให้เรียบร้อย ในที่นี้ผู้เขียนตั้งชื่อ Project ว่า myTestMVC
พอสร้าง Project แล้วเราจะได้การจัดสรรค์ต่างๆนาๆ ในรูปแบบของ MVC Framework ให้สังเกตุดูที่หน้าต่าง Solution Explorer
 |
| แตก Folder ใน Solution Explorer จะเห็นรายละเอียด |
Folder ทั้งหมดที่มีการสร้างขึ้นจะถูกจัดไว้สำหรับการสร้างทรัพยากรของเว็บโดยเฉพาะ แต่ระเรื่อง แต่ละหน้าที่
- Content : ใส่ไฟล์อย่างเช่น CSS Style Sheet ซึ่ง VS2010 ก็จัดมาให้ 1 ไฟล์แล้ว
- Controllers : ใส่ไฟล์ Controller หรือไฟล์ Source Code ควบคุมการทำงานของหน้าเพจ
- Models : ใส่ไฟล์ Model จริงๆแล้วก็คือ Source Code โปรแกรมเช่นกัน แต่แยกออกมาเป็น Business Logic
- Scripts : ใส่ Lib Client Script เช่นพวก Java Script แต่เมื่อสร้าง Project ด้วย VS2010 แล้วจะมี JQuery Framework มาให้เลย
- View : ใส่หน้าเพจ (.aspx) แบ่งเก็บเป็น Folder ตามหมวดหมู่ และ Folder Shared เก็บหน้าเพจที่ใช้ร่วมกัน เช่น Master Page และที่ root จะมี Web.config
ไฟล์อีกไฟล์ที่น่าสนใจก็คือ ใน MVC มีการใช้ไฟล์ Global.asax ที่ต้องมีเพื่อให้เปิดหน้าเพจแรก ตรงนี้จะคล้ายๆการทำงานของ Windows Application ที่ต้องมีไฟล์ method main
สิ่งแรกที่ผู้เขียนจะใส่ลงใน Project คือ Master Page โดยใส่ลงใน View > Shared
 |
| คลิ๊กเมาส์ขวาที่ Folder View > Shared แล้ว Add > New Item | |
 |
| เลือก MVC 2 View Master Page แล้วกด Add |
เมื่อมี Master Page แล้วต่อไปก็จะเพิ่มที่ Controller
 |
| คลิ๊กเมาส์ขวาที่ Folder Controllers แล้ว Add > Controller |
 |
| ตั้งชื่อ Controller Name ในที่นี้ผู้เขียนใช้ชื่อ "IndexController" กด Add |
เมื่อกด Add แล้ว VS จะสร้างไฟล์ Source Code .cs ชื่อ IndexController ใน Folder Controllers ให้ทันที
 |
| ภายในไฟล์ IndexController.cs จะมี Class IndexController ที่สืบทอดมาจาก Class Controller จาก MVC Lib และมี Default method เพื่อทำการโหลด View |
 |
| คลิ๊กเมาส์ขวา บริเวณภายใน method Index() แล้วเลือก Add View |
 |
| พบ Dialog ถามข้อมูลเกี่ยวกับ View ที่จะสร้าง โดยปกติชื่อจะเป็น Default อ้างอิงกับไฟล์ Controller อยู่แล้ว ในที่นี้ผู้เขียนใช้ค่าเดิม แต่จะเพิ่มในส่วนของการระบุ Master Page เรียบร้อยแล้วกด Add |
ไฟล์ View ก็คือไฟล์ที่เป็น User Interface .aspx นั่นเอง จะไปปรากฏอยู่ใน Folder Views > Index > Index.aspx
ขั้นตอนต่อไปสำคัญมาก และจะแตกต่างกับการเขียน ASP.NET โดยทั่วไป
ขั้นตอนการทำให้ Project สามารถรันขึ้นมาได้ คือการเข้าไปเปลี่ยนค่า Default ของไฟล์ Global.asax เพราะไฟล์นี้จะกำหนดการโหลด Control และเพจแรก
 |
| ค่าเดิมที่ VS ให้มา จะสามารถใช้ได้ก็ต่อเมื่อ Controller ที่เราจะให้โหลดตัวแรกนั้นมีชื่อว่า Home |
 |
| เพราะ Controller Home ไม่มีใน Project ผู้เขียนเปลี่ยนเป็น Index นั่นหมายถึง indexController นั่นเอง |
ตอนนี้ดูเหมือน Project จะโหลดถูกต้องแล้ว ทดสอบดูก็จะได้ตามภาพ
 |
| สิ่งที่เห็นคือหน้า Index.aspx ที่มีคำว่า Index อยู่ แสดงพร้อมกับ Master Page ที่ว่างเปล่า |
ในตอนที่ 2 ของ "แกะรอยดูการทำงานของ ASP.NET MVC" ผู้เขียนจะอธิบายการทำงานของ Source Code และเริ่ม Implement ในส่วนของ Model ต่อไป
ขอบคุณมากครับเป็นบทความที่ดีมาก
ตอบลบ