การสร้างเว็บแอพพลิเคชั่นโดยใช้ ASP.NET MVC 4 ตอนที่ 3 : JavaScript, CSS และ HTML

บทความนี้เป็นภาคต่อจากตอนที่ 1 ว่าด้วย flow การทำงานของเว็บแอพพลิเคชัน ASP.NET MVC ตั้งแต่การได้รับ HTTP request เข้ามาจนกระทั่งการเร็นเดอร์วิวออกมาในเว็บบราวเซอร์

ตามที่เคยกล่าวในบทความตอนที่ 1 จุดมุ่งหมายที่สำคัญอีกประการของ MVC framework คือการทำงานร่วมกับเทคโนโลยีฝั่งเว็บอย่าง HTML 5, JavaScript และ CSS 3 ได้ เรายังทราบจากตอนที่ 2 อีกว่า Razor view ในโฟลเดอร์ Views มีหน้าที่เขียน HTML ออกทางเว็บบราวเซอร์ แต่ก็ยังเหลืออีกสองโฟลเดอร์ที่ยังไม่ได้ศึกษากัน นั่นคือ โฟลเดอร์ Scripts และ Content

โฟลเดอร์ Scripts บรรจุไฟล์ JavaScript ซึ่งรวมไปถึงไลบรารี่และปลั๊กอิน jQuery ต่างๆ เช่น jQuery validation และ jQuery UI ส่วนโฟลเดอร์ Content จะเก็บ CSS style sheet ของเว็บไซต์นี้

ไฟล์ Site.css มีหน้าที่กำหนดสีและฟอนต์ที่ปรากฏบนหน้าแอพพลิเคชัน ลองรันแอพพลิเคชันเพื่อดูหน้าตาสักรอบหนึ่งก่อน

เราจะลองแก้ไข body style โดยกำหนด background-color: # 0366BB เสร็จแล้วเซฟไฟล์ Site.css และรีโหลดหน้าเว็บบราวเซอร์ ท่านจะเห็นสีพื้นหลังที่เปลี่ยนไป ดังรูป:

ต่อไปเราจะใส่รูป Logo แทนข้อความ “your logo here” ใน Layout view เริ่มจากใช้โปรแกรม Explorer ก็อบปี้ไฟล์โลโก้มาเก็บไว้ที่โฟลเดอร์ Images ของโปรเจ็กต์นี้ จากนั้นกลับมาที่โปรแกรม Visual Studio คลิกขวาที่โฟลเดอร์ Images > Add > New Item

เลือกไฟล์โลโก้ และคลิก Add

ไฟล์โลโก้ที่เรา Add เข้ามาในโปรเจ็กต์ก็จะปรากฏในลิสต์ของ Solution Explorer

ต่อมาให้เปิดโฟลเดอร์ Views > Shared และเรียกไฟล์ _Layout.cshtml ขึ้นมาเพื่อเปลี่ยนโค้ดใส่ข้อความ “your logo here” เป็นการใส่โลโก้ของเรา ดังรูป:

สุดท้ายเซฟไฟล์ _Layout.cshtml แล้วรันแอพพลิเคชันอีกครั้ง ได้ผลลัพธ์ดังรูป:

แม้หน้าตาของเว็บจะดูลูกทุ่งไปนิด แต่ผมก็จะใช้หน้าตานี้เป็นจุดเริ่มเรื่องราวที่จะบรรยายในครั้งถัดไปๆ โปรดติดตามครับ :)