MVC Framework - แอปพลิเคชันแรก

ให้เราเริ่มสร้างแอปพลิเคชั่น MVC ตัวแรกโดยใช้ Views and Controllers เมื่อเราได้สัมผัสประสบการณ์เล็กน้อยเกี่ยวกับวิธีการทำงานของแอปพลิเคชัน MVC ขั้นพื้นฐานเราจะเรียนรู้ส่วนประกอบและแนวคิดทั้งหมดในบทต่อ ๆ ไป

สร้างแอปพลิเคชัน MVC ครั้งแรก

Step 1- เริ่ม Visual Studio ของคุณและเลือกไฟล์→ใหม่→โครงการ เลือก Web → ASP.NET MVC Web Application และตั้งชื่อโปรเจ็กต์นี้เป็นFirstMVCApplicatio. เลือกตำแหน่งเป็นC:\MVC. คลิกตกลง

Step 2- จะเป็นการเปิดตัวเลือกเทมเพลตโครงการ เลือกเทมเพลตว่างและ View Engine as Razor คลิกตกลง

ตอนนี้ Visual Studio จะสร้างโครงการ MVC แรกของเราดังที่แสดงในภาพหน้าจอต่อไปนี้

Step 3- ตอนนี้เราจะสร้าง Controller ตัวแรกในแอปพลิเคชันของเรา ตัวควบคุมเป็นเพียงคลาส C # ธรรมดาซึ่งมีวิธีการสาธารณะหลายวิธีที่เรียกว่าวิธีการดำเนินการ ในการเพิ่ม Controller ใหม่ให้คลิกขวาที่โฟลเดอร์ Controllers ในโครงการของเราแล้วเลือก Add → Controller ตั้งชื่อ Controller เป็น HomeController แล้วคลิก Add

สิ่งนี้จะสร้างไฟล์คลาส HomeController.cs ภายใต้โฟลเดอร์ Controllers ด้วยรหัสเริ่มต้นต่อไปนี้

using System; 
using System.Web.Mvc;  

namespace FirstMVCApplication.Controllers { 
   
   public class HomeController : Controller { 
      
      public ViewResult Index() { 
         return View(); 
      }  
   } 
}

โดยทั่วไปโค้ดข้างต้นจะกำหนดดัชนีวิธีการสาธารณะภายใน HomeController ของเราและส่งคืนวัตถุ ViewResult ในขั้นตอนถัดไปเราจะเรียนรู้วิธีการส่งคืน View โดยใช้ออบเจ็กต์ ViewResult

Step 4- ตอนนี้เราจะเพิ่ม View ใหม่ให้กับ Home Controller ของเรา ในการเพิ่มมุมมองใหม่ให้คลิกขวาที่โฟลเดอร์มุมมองแล้วคลิกเพิ่ม→ดู

Step 5- ตั้งชื่อ View ใหม่เป็น Index และ View Engine เป็น Razor (SCHTML) คลิกเพิ่ม

สิ่งนี้จะเพิ่มไฟล์ cshtml ไฟล์ภายในโฟลเดอร์ Views / Home ด้วยรหัสต่อไปนี้ -

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

Step 6 - แก้ไขเนื้อหาของ View ด้านบนด้วยรหัสต่อไปนี้ -

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

Step 7- ตอนนี้เรียกใช้แอปพลิเคชัน สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้แก่คุณในเบราว์เซอร์ ผลลัพธ์นี้แสดงผลตามเนื้อหาในไฟล์ View ของเรา แอปพลิเคชันแรกเรียกคอนโทรลเลอร์ซึ่งจะเรียกมุมมองนี้และสร้างเอาต์พุต

ในขั้นตอนที่ 7 ผลลัพธ์ที่เราได้รับขึ้นอยู่กับเนื้อหาของไฟล์ View ของเราและไม่มีการโต้ตอบกับคอนโทรลเลอร์ ก้าวไปข้างหน้าตอนนี้เราจะสร้างตัวอย่างเล็ก ๆ เพื่อแสดงข้อความต้อนรับพร้อมเวลาปัจจุบันโดยใช้การโต้ตอบของ View และ Controller

Step 8- MVC ใช้ออบเจ็กต์ ViewBag เพื่อส่งผ่านข้อมูลระหว่างคอนโทรลเลอร์และ View เปิด HomeController.cs และแก้ไขฟังก์ชัน Index เป็นรหัสต่อไปนี้

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

ในโค้ดด้านบนเราตั้งค่าแอตทริบิวต์คำทักทายของวัตถุ ViewBag รหัสจะตรวจสอบชั่วโมงปัจจุบันและส่งคืนข้อความอรุณสวัสดิ์ / บ่ายตามนั้นโดยใช้คำสั่ง return View () โปรดทราบว่าที่นี่คำทักทายเป็นเพียงตัวอย่างแอตทริบิวต์ที่เราใช้กับวัตถุ ViewBag คุณสามารถใช้ชื่อแอตทริบิวต์อื่นแทนคำทักทาย

Step 9 - เปิด Index.cshtml และคัดลอกรหัสต่อไปนี้ในส่วนเนื้อหา

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

ในโค้ดด้านบนเรากำลังเข้าถึงค่าของคุณสมบัติคำทักทายของออบเจ็กต์ ViewBag โดยใช้ @ (ซึ่งจะถูกตั้งค่าจากคอนโทรลเลอร์)

Step 10- ตอนนี้เรียกใช้แอปพลิเคชันอีกครั้ง คราวนี้รหัสของเราจะเรียกใช้ Controller ก่อนตั้งค่า ViewBag แล้วแสดงผลโดยใช้ View code ต่อไปนี้จะเป็นผลลัพธ์