ส่วนนี้แนะนำเค้าโครงของแต่ละหน้าในแอปพลิเคชัน ASP.NET MVC และวิธีการตั้งค่าสไตล์
เพื่อเรียนรู้ ASP.NET MVC เราจะสร้างแอปพลิเคชันอินเทอร์เน็ต
ส่วนที่ 3: เพิ่มสไตล์และรูปลักษณ์ที่เป็นหนึ่งเดียว (เค้าโครง)
ไฟล์ _Layout.cshtml แสดงถึงโครงร่างของแต่ละหน้าในแอปพลิเคชัน ตั้งอยู่ในโฟลเดอร์ที่ใช้ร่วมกันในโฟลเดอร์ Views
เปิดไฟล์ _Layout.cshtml และแทนที่เนื้อหาด้วย:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title </title> <link href="@Url.Content("~/Content/Site.css") " rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home") </li> <li>@Html.ActionLink("ภาพยนตร์", "ดัชนี", "ภาพยนตร์") </li> <li>@Html.ActionLink("เกี่ยวกับ", "เกี่ยวกับ", "หน้าแรก") </li> </ul> <section id="main"> @RenderBody() <p>ลิขสิทธิ์ W3CSchool 2012 สงวนลิขสิทธิ์</p> </section> </body> </html>ในโค้ดข้างต้น ตัวช่วย HTML ใช้เพื่อแก้ไขเอาต์พุต HTML:
@Url.Content() - เนื้อหา URL จะถูกแทรกที่นี่
@Html.ActionLink() - ลิงก์ HTML จะถูกแทรกที่นี่
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับตัวช่วย HTML ในบทต่อๆ ไปของบทช่วยสอนนี้
ในโค้ดด้านบน รหัสที่ทำเครื่องหมายด้วยสีแดงคือ C# โดยใช้แท็ก Razor
@ViewBag.Title - ชื่อหน้าจะถูกแทรกที่นี่
@RenderBody() - เนื้อหาของเพจจะแสดงผลที่นี่
คุณสามารถเรียนรู้เกี่ยวกับมาร์กอัป Razor สำหรับ C# และ VB (Visual Basic) ได้ในบทช่วยสอน Razor ของเรา
สไตล์ชีตของแอปพลิเคชันคือ Site.css ซึ่งอยู่ในโฟลเดอร์เนื้อหา
เปิดไฟล์ Site.css และแทนที่เนื้อหาด้วย:
body { แบบอักษร: "Trebuchet MS", Verdana, sans-serif; สีพื้นหลัง: #5c87b2; color: #696969; } h1 { เส้นขอบด้านล่าง: 3px solid #cc9900; } #main { ช่องว่างภายใน: 20px; สีพื้นหลัง: #ffffff; 4px 4px 4px; } a { color: #034af3; } /* รูปแบบเมนู --------------------------------- -*/ ul #menu { ช่องว่างภายใน: 0px; ตำแหน่ง: สัมพันธ์กัน; ระยะขอบ: 0; } ul#menu li { จอแสดงผล: อินไลน์; } ul#menu li a { สีพื้นหลัง: #e8eef4; การตกแต่งข้อความ: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; --------------------------------*/ fieldset { ช่องว่างภายใน: 12px; } ป้ายกำกับ fieldset { จอแสดงผล: บล็อก; การขยาย: 4px ; อินพุต [type = "ข้อความ"], อินพุต [type = "รหัสผ่าน"] { ความกว้าง: 300px; } อินพุต [type = "ส่ง"] { การขยาย: 4px; } / * รูปแบบข้อมูล --------- ---------------------*/ table.data { สีพื้นหลัง:#ffffff; border:1px solid #c3c3c3; border-collapse:collapse; %; } table.data th { สีพื้นหลัง:#e8eef4; เส้นขอบ: 1px ทึบ # c3c3c3; } table.data td { เส้นขอบ: 1px ทึบ # c3c3c3;ไฟล์ _ViewStart ในโฟลเดอร์ที่ใช้ร่วมกัน (อยู่ภายในโฟลเดอร์ Views) มีเนื้อหาดังต่อไปนี้:
@{เค้าโครง = "~/Views/Shared/_Layout.cshtml";}รหัสนี้จะถูกเพิ่มโดยอัตโนมัติในทุกมุมมองที่แสดงโดยแอปพลิเคชัน
หากคุณลบไฟล์นี้ คุณต้องเพิ่มบรรทัดโค้ดนี้ในทุกมุมมอง
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับมุมมองในบทต่อๆ ไปของบทช่วยสอนนี้
โดยทั่วไป มุมมอง ViewStart จะอยู่ภายใต้มุมมอง Views โดยตรง แน่นอนว่ายังสามารถมี ViewStart ได้อีกด้วย ดูเพจภายใต้โฟลเดอร์อื่น (โดยที่โฟลเดอร์นี้อยู่ภายใต้โฟลเดอร์ Views)