Views and Models
จาก series 3 เราได้เขียนฟังชั่นที่ return ข้อความกลับโดย controller action ซึ่งทำให้เราเห็นคร่าวๆ แล้วว่า controller มีการทำงานยังไงบ้าง แต่ใน real world application แค่นี้มันง่ายไปครับใช้ประโยชน์อะไรไม่ได้ เราจะได้เรียนรู้เพิ่มเติมใน series นี้ นั่นคือ View ที่ใช้แสดงหน้าเว็บ
การสร้าง View template
ในการใช้ view template เริ่มจากเราจะแก้ไขเมธอด HomeController Index ให้ return ActionResult และ View() ตามตัวอย่างที่ 1
ตัวอย่างที่ 1
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
คำอธิบายตัวอย่างที่ 1
- เราแก้ไขจาก return ค่า string แทนด้วยการส่ง View กลับ
ต่อไปเราจะสร้าง View template ทำได้โดยเอาเมาส์ชี้ไปที่เมธอด Index และคลิกเมาส์ขวาและเลือกเมนู "Add View" ตามรูปที่ 1 จะปรากฏหน้าต่าง Add View dialog ขึ้นมาครับตามรูปที่ 2
รูปที่ 1
จากรูปที่ 2 คือหน้าต่าง "Add View" จะช่วยให้เราสามารถสร้างไฟล์ View template ได้ง่ายขึ้นซึ่งชื่อ View name จะถูกตั้งมาเป็น default ตามเมธอดที่เราเลือกเราไม่จำเป็นต้องแก้ไขอะไรสามารถกดปุ่ม Add ได้เลย
รูปที่ 2
เมื่อกดปุ่ม Add ผลที่ได้คือ Visual Web Developer จะสร้างไฟล์ใหม่ชื่อว่า "Index.cshtml" นี่คือ view template ครับซึ่งไฟล์ที่ได้จะวางตาม path ตือ \Views\Home (ให้เราสร้างโฟลเดอร์ดังกล่าวมาถ้าไม่มี) ผลที่ได้ตามรูปที่ 3
รูปที่ 3
สิ่งสำคัญคือทั้งชื่อและโฟลเดอร์ของไฟล์ "Index.cshtml" คือ default ASP.NET MVC naming conventions เป็นข้อกำหนดเพื่อช่วยลดการเขียน code ลง
สังเกตได้ว่าโครงสร้างโฟลเดอร์ \Views\Home จะ match เข้ากับ Controller นั่นคือ HomeController และ view template จะ match เข้ากับชื่อเมธอด index ซึ่งเราระบุให้ return เป็น View
จากรูปที่ 3 Visual Web Develper จะเขียน code ง่ายๆมาให้เราด้วยเราเรียกการเขียนแบบนี้ว่า "Razor syntax"
สามบรรทัดแรกเป็นการเซ็ตค่า Title โดยใช้ ViewBag.Title ให้ทดลองแก้ไขตามตัวอย่างที่ 2
ตัวอย่างที่ 2
จากนั้นทดลอง run จะได้ผลลัพธ์ตามรูปที่ 4
รูปที่ 4
การใช้ Layout สำหรับสร้าง Common site elements
บนส่วนใหญ่จะมีการสร้าง content ที่ใช้สำหรับแชร์ร่วมกันหลายๆเพจ เช่น เมนู (navigation), footers, logo, stylesheet เราสามารถใช้ Rezor view engine ช่วยทำสิ่งเหล่านี้ให้ง่ายขึ้นได้โดยการสร้างเพจที่ชื่อว่า "_Layout.cshtml" ซึ่งจะมีการขึ้นมาตั้งแต่เราสร้างโปรเจคแล้วครับตามรูปที่ 5 (ดูที่ /Views/Shared)
รูปที่ 5
ให้เปิดไฟล์ตามรูปที่ 5 จะเห็นข้อมูลที่ถูกสร้างขึ้นมาตามตัวอย่างที่ 3
ตัวอย่างที่ 3
จากตัวอย่างที่ 3 ข้อมูลที่ส่งกลับมาจากแต่ละ view template จะถูกแสดงด้วยคำสั่ง @RenderBody() และข้อมูลที่ต้องการให้แสดงร่วมกันทุกๆหน้าให้มาตกแต่งที่หน้า _Layout.cshtml นี้
เราจะ design ให้ web MVC Music Store ของเรามี Header ร่วมกัน ให้แก้ไขที่ "_Layout.cshtml" ตามตัวอย่างที่ 4
ตัวอย่างที่ 4
ทอลองรันจะได้ตามรูปที่ 6
รูปที่ 6
การแก้ไข StyleSheet
เริ่มต้นโปรเจคจะประกอบไปด้วยไฟล์ CSS ที่ใช้สำหรับแสดงข้อความต่างๆ ดังนั้นเราจึงต้องมีการเพิ่มเติม CSS และไฟล์รูปภาพเพื่อให้เว็ลไซต์ของเรามีรูปร่างหน้าตาตามต้องการ
ให้เราไป download ไฟล์ชื่อ MvcMusicStore-Assets.zip โดยไปที่ http://mvcmusicstore.codeplex.com/ หลังจาก download ให้แตกไฟล์ออกแล้ว copy โฟลเดอร์ Content มาทับโฟลเดอร์เดียวกันที่โปรเจคดังรูปที่ 7
รูปที่ 7
เมื่อเลือก Paste จะปรากฏตามรูปที่ 8 ให้เลือก checkbox "Apply to all items" และกดปุ่ม Yes
รูปที่ 8
จะได้ผลลัพธ์ตามรูปที่ 9
รูปที่ 9
ให้ทดลองรันอีกครั้งจะได้ตามรูปที่ 10
รูปที่ 10
ติดตามต่อ
ASP.NET MVC Music Store Series 5
อ้างอิง
ผู้เขียน: procodeblog
ไม่มีความคิดเห็น:
แสดงความคิดเห็น