บทความนี้ได้สรุปและเรียบเรียงจาก blog ของ Scott ต้องการอ่านคลิกที่นี่
View คือมุมมองหรือ UI ที่รับข้อมูลจาก User ไปดำเนินการ และนำเสนอข้อมูลให้ user ได้เห็น
View Engine ที่มาพร้อมกับ mvc3 ชื่อว่า Razor (มีดโกน ??)
engine ส่วนต่างๆ ของ mvc ตามที่เคยศึกษากันพบว่ามันแบ่งการทำงานออกจากกัน
ดังนั้นหากเราสามารถพัฒนา engine ขึ้นมาได้เองเพื่อติดต่อกับฐานข้อมูลหรือส่วนอื่นๆที่ต้องการได้
ทาง ms ก็นำเสนอ Razor ซึ่งเป็น view engine ตัวใหม่อย่างมากว่าดีอย่างนั้นอย่างนี้
คอนเซ็บของ Razor
-
Compact, Expressive, and Fluid: ขนาดเล็กและลื่นไหล (ผมนึกถึงมอเตอร์ไซ ที่ขับตอนรถติดยังไงยังงั้นเลย)
- Easy to Learn: เรียนรู้ง่ายหรือใช้ความรู้เดิมที่มีอยู่เช่น HTML
-
Is not a new language: ใช้ความรู้ทางภาษาโปรแกรมมิ่งเดิมที่รู้อยู่แล้ว C#/VB (or other)
-
Works with any Text Editor: ทำงานกับเครื่องมือหรือใดๆก็ได้เช่น notepad
-
Has great Intellisense: มีตัวช่วยเติมเต็มประโยคที่ดี แน่นอนว่า visual studio กิน.
-
Unit Testable: สามารถทดสอบได้ง่าย (
).
เปรียบเทียบการแสดงผล
ในบทความคุณ scott จะแสดงข้อความที่เพจดังนี้
ภาพ 1 แสดง O/p ที่ต้องการ
เดิมเราใช้ .aspx nuggets คือแท็ก <% =…. %> แบบนี้เพื่อกำหนดการแสดงผล ประมวลผลที่หน้าเว็บเพจ ดังนี้
แต่หากใช้มีดโกนอาบน้ำผึ้งคุณเขียนโค้ดดังนี้
Razor ใช้เพียง @ นำหน้าตัวแปร หรือ expression ที่ต้องการใช้เท่านั้น
การวนลูป
หากเราต้องการแสดงลูปดังภาพนี้
จากภาพเราๆก็ทราบดีว่าต้องวนลูปจากลิสหรืออาเรย์หรืออื่นๆ แล้วไปแสดงผล
หากวนลูปด้วย .aspx จะเขียนดังนี้
| .aspx nuggets |
Razor |
 |
 |
ดูเรียบร้อยขึ้นนะครับ 
การใช้ If – else
การเขียนแบบนี้สมัยก่อนเรียกว่าสปาเก็ตตี้โค้ด คือมันปนกันระหว่างบล็อคคำสั่ง กับแท็ก html
แต่ด้วย tool ของ ms คงไม่เป็นปัญหาเท่าใดเพราะช่วยแยกความแตกต่างระหว่าง view engine
กับแท็ก html ได้
การเขียนแบบหลายบรรทัด
การเขียนแบบนี้เปิดด้วย @{…} แล้วเขียน expression เอาไว้ภายใน จากนั้นนำค่าที่ได้จากการประมวลผลไปใช้ต่อไป
การเขียนแบบบรรทัดเดียวแต่หลายส่วน
เปิดแท็กด้วย @(….) แบบนี้ใช้ได้เพียงบรรทัดเดียว
เมื่อศึกษาผมมีคำถามที่เกิดขึ้นทันทีคือ email address จะถูกแปลเป็นตัวแปรหรือไม่
ทางคุณ scott เขียนไว้ว่าไม่มีปญหาหาเพราะ engine ฉลาด 5555++
ภาพนี้เป็นข้อมูลที่กำหนดใน editor
ภาพนี้เป็นข้อมูลที่แสดงที่ web browser
การเขียนแบบโค้ดภายใน
เราสามารถวางแท็ก html ภายในโค้ดบล็อคของ Razor ได้เช่น
เห็นว่าภายในมีแท็ก span ครอบเมื่อรันที่เว็บบราวเซอร์จะได้ดังนี้
การจัดการ Layout ตามแบบ Razor
หากใช้ .aspx จะใช้ masterpage เข้ามาสร้างหน้ากากและเว้นพื้นที่ให้นำไปใช้ทีหลัง
เมื่อเราเปลี่ยนไปใช้ Razor ใช้เพียง Sitelayout.cshtml เท่านั้น
ภายในมีเพียงแท็ก html ที่คงที่เพื่อแสดงผล
ภายในแท็ก div จะมีประกาศ @RenderBody() เพื่อให้รู้ว่านี่คือพืนที่แสดงข้อความเมื่อ layout นี้ถูกนำไปใช้
การจะนำเลย์เอาไปใช้ต้องประกาศการเรียกใช้ดังนี้้
จะต่างกับการใช้ masterpage ที่ประกาศอะไรอีกมากมาย
เมื่อรันเราตจะได้โค้ดที่เว็บบราวเซอรดังนี้
การเขียนทับพื้นที่แสดงผล
เราสามารถสร้างพื้นที่การแสดงผลที่ต้นแบบได้มากกว่าที่เดียวดังนี้
ที่เพิ่มขึ้นมาคือ @RenderSection พร้อมกับกำหนดชื่อ และมี optional เป็น true เพราะหากไม่มีการกำหนดค่าก็ะไม่ Error หากไม่กำหนดค่า
สำหรับเพจหรือวิวที่นำเลยเอาท์นี้ไปใช้ และต้องการเขียนข้อมูลงในแท็ก menu กับ footer ทำได้ดังนี้
และเมื่อรันที่ปลายทางจะได้โค้ดดังนี้
html helper ตัวใหม่
ผมเรียกว่าตัวช่วยสร้าง html คล้ายกับการสร้าง function แล้วให้ส่งค่าออกมาเป็นแท็ก html
ภาพนี้เป็นการสร้าง helper ชื่อ ProductListing และรับพารามิเตอร์มาเพื่อวนลูปสร้างแท็ก li
เมื่อต้องการเรียกใช้ helper กำหนดลงไปดังนี้
อย่างไรก็ดี visual studio ก็สนับสนุนเป็นอย่างดี
จบแล้วสำหรับวันนี้ bye.
ICT Black Box 