ลองจินตนาการถึงการสร้างบ้าน ดูส่วนประกอบเปรียบเสมือนส่วนที่สร้างไว้ล่วงหน้าของบ้าน เช่น หน้าต่าง ประตู และตู้ ซึ่งได้รับการออกแบบให้เข้ากับโครงสร้างที่ใหญ่ขึ้นได้อย่างง่ายดาย คุณสามารถเปลี่ยนหรือเปลี่ยนรูปลักษณ์ได้โดยไม่จำเป็นต้องสร้างบ้านใหม่ทั้งหลัง
ตัวอย่างเช่น ตะกร้าช้อปปิ้งในเว็บแอปพลิเคชันเปรียบเสมือนตู้ครัวสำเร็จรูปที่คุณสามารถวางไว้ในห้องใดก็ได้ คุณสามารถปรับแต่งขนาดและรูปลักษณ์ได้ แต่ฟังก์ชันการทำงานยังคงสม่ำเสมอ ทำให้คุณสามารถจัดเก็บรายการต่างๆ ได้ ในทำนองเดียวกัน แผงเข้าสู่ระบบก็เหมือนกับประตูที่มีล็อค ซึ่งสามารถเพิ่มเข้าไปในห้องใดก็ได้ โดยให้สิทธิ์การเข้าถึงเฉพาะผู้ที่มีกุญแจที่ถูกต้องเท่านั้น
การใช้องค์ประกอบมุมมอง นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันได้เหมือนกับบ้าน โดยแต่ละส่วนที่สร้างไว้ล่วงหน้าจะพอดีกับโครงสร้างที่ใหญ่ขึ้นได้อย่างราบรื่น วิธีการนี้ช่วยประหยัดเวลา ลดความซับซ้อน และช่วยให้การบำรุงรักษาและการอัปเดตมีประสิทธิภาพมากขึ้น ความหายนะเพียงอย่างเดียวของ View Components คือการไม่ใช้งาน
อะไรทำให้ View Component
ส่วนประกอบ view เป็นคลาสที่ตรงตามเกณฑ์ข้อใดข้อหนึ่งต่อไปนี้: ชื่อของมันลงท้ายด้วย “ViewComponent” ซึ่งกำหนดวิธีการ “Invoke” หรือ “InvokeAsync” โดยสืบทอดมาจากคลาสพื้นฐาน "ViewComponent" หรือมีการนำแอตทริบิวต์ "ViewComponent" มาใช้ คุณสามารถวางไฟล์ View Component ไว้ที่ใดก็ได้ในโครงการของคุณ แต่หลักการคือให้เก็บไฟล์เหล่านั้นไว้ในโฟลเดอร์ชื่อ Components ซึ่งอยู่ที่ Solution/Components
มาดูการทำงานของ View Component กัน
ต่อไปนี้เป็นขั้นตอนสั้นๆ เพื่อสร้าง View Component ในระดับพื้นฐานที่สุด มีเพียง 6 ขั้นตอนเท่านั้นและควรช่วยให้คุณเข้าใจถึงวิธีการจัดเรียงโครงสร้างโฟลเดอร์และวิธีเพิ่ม View Components ลงใน Views
View Component นี้จะแสดงเฉพาะข้อความสตริงธรรมดาเท่านั้น เพื่อให้เราสามารถปรับปรุงกระบวนการตั้งค่าได้
- ใน Visual Studio ให้สร้างแอปพลิเคชัน ASP.NET Core Web App (Model-View-Controller) ใหม่ชื่อ 'ViewComponentExample' ฉันใช้ NET 6.0 แต่เวอร์ชันอื่นน่าจะใช้ได้
2. ภายในโฟลเดอร์โปรเจ็กต์หลักของคุณ ให้สร้างโฟลเดอร์ชื่อ Components โดยมีคลาสใหม่อยู่ข้างในชื่อ MyViewComponents.cs เพื่อให้โครงสร้างโฟลเดอร์มีลักษณะดังนี้:
3. เพิ่มโค้ดต่อไปนี้ลงในคลาส MyViewComponents.cs ของคุณ
4. ใน Solution Explorer ให้สร้างโฟลเดอร์ในโฟลเดอร์ Views\Shared ชื่อ Components จากนั้นสร้างโฟลเดอร์ภายในโฟลเดอร์ Components ชื่อ MyViewComponent ดังนี้:
5. คลิกขวาที่โฟลเดอร์ “MyViewComponent” เลือก “Add” > “View,”, Razor View — Empty และตั้งชื่อมุมมองใหม่ว่า “Default.cshtml” ซึ่งเป็นแบบแผนการตั้งชื่อสำหรับส่วนประกอบ Razor View ทั้งหมด แทนที่เนื้อหาทั้งหมดด้วยรหัสต่อไปนี้:
@model string <div> @Model </div>
6. เปิดไฟล์ Views/Home/Index.cshtml และแทนที่เนื้อหาทั้งหมดด้วยโค้ดต่อไปนี้
@{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> @await.InvokeAsync(nameof(ViewComponentExample.Components.MyViewComponent)) </div>
7. เรียกใช้แอปพลิเคชันเพื่อดูผลลัพธ์สตริงนี้:
โปรดสังเกตว่าสิ่งที่เราเพิ่มลงใน Index.cshtml ก็คือโค้ดบรรทัดนี้
@ await.InvoidAsync (ชื่อของ (ViewComponentExample.Components.MyViewComponent))
ซึ่งตอนนี้เราสามารถเพิ่มลงใน View ใดก็ได้ในแอปพลิเคชันของเรา ค่อนข้างเท่ห์ใช่ไหม?
แม้ว่าการแทรกค่าสตริงแบบธรรมดาลงในมุมมองหรือเพจจะไม่มีประโยชน์มากนัก แต่ส่วนประกอบของมุมมองสามารถให้ความสามารถเพิ่มเติมได้ โดยการส่งคืนอ็อบเจ็กต์ที่ใช้อินเทอร์เฟซ IViewComponentResult จากเมธอด Invoke หรือ InvokeAsync จะทำให้ได้เอฟเฟกต์ที่ซับซ้อนมากขึ้น
จากที่นี่ เราเพียงแค่ต้องทำการเปลี่ยนแปลงโค้ดเล็กๆ น้อยๆ สามครั้งเพื่อขยายขีดความสามารถของมัน
- สร้างคลาสในโฟลเดอร์ Models ชื่อ MyViewModel.cs โดยมีเนื้อหาดังต่อไปนี้:
public class MyViewModel { public string Message { get; set; } public int Count { get; set; } }
โครงสร้างของโฟลเดอร์และคลาสใหม่ของคุณควรมีลักษณะเช่นนี้
2. ขยายโฟลเดอร์ Components ของคุณเพื่อเปิดและอัปเดตโค้ดในคลาส MyViewComponent.cs ของคุณเป็นดังนี้
using Microsoft.AspNetCore.Mvc; using ViewComponentExample.Models; namespace ViewComponentExample.Components { [ViewComponent(Name = "MyViewComponent")] public class MyViewComponent : ViewComponent { public IViewComponentResult Invoke() { var model = new MyViewModel { Message = "Hello, this is a View Component!", Count = 5 // Or whatever value you need // Initialize other properties here }; return View("Default", model); } } }
3. สุดท้าย อัปเดตไฟล์คอมโพเนนต์มุมมอง Default.cshtml เป็นเนื้อหาเหล่านี้
@model MyViewModel <div> <p>@Model.Message</p> <p>Count: @Model.Count</p> <!-- Display other properties here --> </div>
เมื่อคุณเรียกใช้แอปพลิเคชัน คุณควรได้รับผลลัพธ์นี้
ในการตั้งค่าเริ่มต้น View Component ส่งคืนสตริงแบบง่าย ซึ่งจำกัดความซับซ้อนของข้อมูลที่เราสามารถแสดงในมุมมองของเรา เนื่องจากเราได้เพิ่มคลาส MyViewModel ตอนนี้เราสามารถส่งวัตถุที่ซับซ้อนจาก View Component ไปยังมุมมองได้ ซึ่งทำได้สำเร็จโดยวิธีการเรียกใช้ของ MyViewComponent.cs โดยที่อินสแตนซ์ของ MyViewModel.cs ถูกสร้างขึ้นและส่งคืนไปยังมุมมอง ซึ่งหมายความว่าขณะนี้แอปพลิเคชันตัวอย่างของเราสามารถรองรับโครงสร้างข้อมูลที่ซับซ้อนมากขึ้น และได้รับประโยชน์จากการตรวจสอบประเภทเวลาคอมไพล์ ซึ่งช่วยป้องกันข้อผิดพลาดเกี่ยวกับประเภท
ก่อนที่เราจะสรุปบทความนี้ ฉันต้องการอธิบายสามวิธีที่คล้ายกันซึ่งโปรแกรมเมอร์อาจสร้างสิ่งที่คล้ายกับ View Component
ส่วนประกอบของ Blazor: Blazor ยังเกี่ยวข้องกับส่วนประกอบต่างๆ เช่น Angular, React และ Vue.js แต่นี่คือส่วนที่ยอดเยี่ยม — ส่วนประกอบของ Blazor สามารถทำงานบนเซิร์ฟเวอร์โดยมีการอัปเดต UI ที่ส่งผ่าน SignalR หรือสามารถทำงานได้โดยตรงในเว็บเบราว์เซอร์ของไคลเอ็นต์โดยใช้ WebAssembly สิ่งนี้ช่วยให้คุณได้รับสิทธิพิเศษจากการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ เช่น การดีบัก .NET เต็มรูปแบบ และไม่จำเป็นต้องทำการเรียก API สำหรับข้อมูล ในขณะที่ยังคงให้ประสบการณ์โต้ตอบที่ลื่นไหลแก่ผู้ใช้ ข้อเสีย? Blazor ยังค่อนข้างใหม่และไม่มีการสนับสนุนจากชุมชนหรือไลบรารีของบุคคลที่สามมากเท่ากับตัวอื่นๆ
มุมมองบางส่วนและองค์ประกอบการดูใน ASP.NET Core: ทั้งสองนี้ช่วยให้คุณสร้างส่วน UI ที่นำมาใช้ซ้ำได้ใน ASP.NET Core แต่มีการใช้ต่างกัน มุมมองบางส่วนเป็นแบบธรรมดา — ไม่สามารถดำเนินการเชิงตรรกะหรือดึงข้อมูลได้ มันเป็นเพียงส่วนหนึ่งของมุมมอง Razor ที่คุณสามารถเสียบเข้าไปในมุมมองอื่นได้ เช่น ส่วนที่นำมาใช้ซ้ำได้สำหรับสิ่งต่าง ๆ เช่น ส่วนหัว ส่วนท้าย หรือเมนูการนำทาง
ในทางกลับกัน View Components เป็นตัวยกของหนัก พวกเขาสามารถมีการกระทำของตนเอง ดึงข้อมูล ดำเนินการ และสามารถส่งคืนผลลัพธ์ที่แสดงผลในมุมมอง สิ่งนี้ทำให้เหมาะสำหรับบิตของ UI ที่ต้องการตรรกะที่ซับซ้อนหรือการเข้าถึงข้อมูล เช่น ตะกร้าสินค้า เมนูการนำทางแบบไดนามิก หรือวิดเจ็ตที่ต้องอาศัยข้อมูล ข้อเสียคือการตั้งค่าและใช้งานซับซ้อนกว่ามุมมองบางส่วนเล็กน้อย
ดังนั้นในท้ายที่สุด แม้ว่าเฟรมเวิร์กและฟีเจอร์ที่แตกต่างกันเหล่านี้ล้วนมีแนวคิดเกี่ยวกับส่วนประกอบที่คล้ายกัน แต่ก็แตกต่างกันมากในสิ่งที่พวกเขาสามารถทำได้ วิธีการใช้ และวิธีการนำไปใช้ การเลือกระหว่างสิ่งเหล่านี้มักจะขึ้นอยู่กับสิ่งที่โปรเจ็กต์ของคุณต้องการ สิ่งที่ทีมของคุณเก่ง และกลุ่มเทคโนโลยีที่คุณใช้งานในแอปพลิเคชันของคุณ