ลองจินตนาการถึงการสร้างบ้าน ดูส่วนประกอบเปรียบเสมือนส่วนที่สร้างไว้ล่วงหน้าของบ้าน เช่น หน้าต่าง ประตู และตู้ ซึ่งได้รับการออกแบบให้เข้ากับโครงสร้างที่ใหญ่ขึ้นได้อย่างง่ายดาย คุณสามารถเปลี่ยนหรือเปลี่ยนรูปลักษณ์ได้โดยไม่จำเป็นต้องสร้างบ้านใหม่ทั้งหลัง

ตัวอย่างเช่น ตะกร้าช้อปปิ้งในเว็บแอปพลิเคชันเปรียบเสมือนตู้ครัวสำเร็จรูปที่คุณสามารถวางไว้ในห้องใดก็ได้ คุณสามารถปรับแต่งขนาดและรูปลักษณ์ได้ แต่ฟังก์ชันการทำงานยังคงสม่ำเสมอ ทำให้คุณสามารถจัดเก็บรายการต่างๆ ได้ ในทำนองเดียวกัน แผงเข้าสู่ระบบก็เหมือนกับประตูที่มีล็อค ซึ่งสามารถเพิ่มเข้าไปในห้องใดก็ได้ โดยให้สิทธิ์การเข้าถึงเฉพาะผู้ที่มีกุญแจที่ถูกต้องเท่านั้น

การใช้องค์ประกอบมุมมอง นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันได้เหมือนกับบ้าน โดยแต่ละส่วนที่สร้างไว้ล่วงหน้าจะพอดีกับโครงสร้างที่ใหญ่ขึ้นได้อย่างราบรื่น วิธีการนี้ช่วยประหยัดเวลา ลดความซับซ้อน และช่วยให้การบำรุงรักษาและการอัปเดตมีประสิทธิภาพมากขึ้น ความหายนะเพียงอย่างเดียวของ 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 นี้จะแสดงเฉพาะข้อความสตริงธรรมดาเท่านั้น เพื่อให้เราสามารถปรับปรุงกระบวนการตั้งค่าได้

  1. ใน 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 จะทำให้ได้เอฟเฟกต์ที่ซับซ้อนมากขึ้น

จากที่นี่ เราเพียงแค่ต้องทำการเปลี่ยนแปลงโค้ดเล็กๆ น้อยๆ สามครั้งเพื่อขยายขีดความสามารถของมัน

  1. สร้างคลาสในโฟลเดอร์ 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 ที่ต้องการตรรกะที่ซับซ้อนหรือการเข้าถึงข้อมูล เช่น ตะกร้าสินค้า เมนูการนำทางแบบไดนามิก หรือวิดเจ็ตที่ต้องอาศัยข้อมูล ข้อเสียคือการตั้งค่าและใช้งานซับซ้อนกว่ามุมมองบางส่วนเล็กน้อย

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