View Components

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using ViewComponentsSample.Models;

namespace ViewComponentsSample.Views.Components
{
    // View Component class
    public class PriorityListViewComponent : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityListViewComponent(ToDoContext context)
        {
            db = context;
        }

        // InvokeAsync - main entry point
        public async Task<IViewComponentResult> InvokeAsync(
            int maxPriority,
            bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }

        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo
                .Where(x => x.IsDone == isDone && x.Priority <= maxPriority)
                .ToListAsync();
        }
    }
}

/Views/{ControllerName}/Components/{ViewComponentName}/{ViewName}.cshtml
/Views/Shared/Components/{ViewComponentName}/{ViewName}.cshtml

@model IEnumerable<ViewComponentsSample.Models.TodoItem>

<h3>Priority Items</h3>
<ul>
    @foreach (var item in Model)
    {
        <li>
            @item.Name
            @if (item.IsDone)
            {
                <span>✓</span>
            }
        </li>
    }
</ul>

// Cách 1: Suffix
public class PriorityListViewComponent : ViewComponent { }

// Cách 2: Attribute
[ViewComponent]
public class PriorityList
{
    public Task<IViewComponentResult> InvokeAsync() { /* ... */ }
}

/Views/Shared/Components/PriorityList/Default.cshtml

@using ViewComponentsSample.Views.Components

@* Gọi không có tham số *@
@Component.Invoke("PriorityList")

@* Gọi với tham số *@
@await Component.InvokeAsync("PriorityList",
    new {
        maxPriority = 4,
        isDone = false
    })

@addTagHelper *, ViewComponentsSample

@* Tag Helper syntax *@
<vc:priority-list max-priority="4" is-done="false">
</vc:priority-list>

public class HomeController : Controller
{
    public async Task<IActionResult> Index()
    {
        // Render View Component và trả về như partial view
        var result = await Component.InvokeAsync("PriorityList",
            new { maxPriority = 3, isDone = false });

        return View(result);
    }
}

@page
@model IndexModel
@await Component.InvokeAsync("PriorityList",
    new { maxPriority = 4, isDone = false })

public class TodoItem
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsDone { get; set; }
    public int Priority { get; set; }
}

public class TodoListViewComponent : ViewComponent
{
    private readonly ToDoContext _context;

    public TodoListViewComponent(ToDoContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync(bool showAll)
    {
        var items = showAll
            ? await _context.ToDo.ToListAsync()
            : await _context.ToDo.Where(x => !x.IsDone).ToListAsync();

        return View(items);
    }
}

@model IEnumerable<TodoItem>
@* hoặc @model MyNamespace.TodoItemViewModel *@

<h2>Todo List</h2>
<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Priority</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Priority</td>
                <td>@(item.IsDone ? "✓" : "○")</td>
            </tr>
        }
    </tbody>
</table>

public class FeaturedBooksViewComponent : ViewComponent
{
    private readonly IBookService _bookService;

    public FeaturedBooksViewComponent(IBookService bookService)
    {
        _bookService = bookService;
    }

    // Synchronous Invoke
    public IViewComponentResult Invoke(int count)
    {
        var books = _bookService.GetFeaturedBooks(count);
        return View(books);
    }
}

// Trả về view mặc định
return View(books);

// Trả về view cụ thể
return View("SpecialView", books);

// Trả về view với model tùy chỉnh
return View("~/Views/Shared/Components/FeaturedBooks/VIP.cshtml", books);

// Trả về raw HTML content
return Content("<div class='alert'>Hello World</div>");

public class UserPanelViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        var userName = User.Identity?.Name;
        var isAdmin = User.IsInRole("Admin");
        var currentUrl = ViewContext.HttpContext.Request.Path;

        var model = new UserPanelViewModel
        {
            UserName = userName,
            IsAdmin = isAdmin,
            CurrentUrl = currentUrl
        };

        return View(model);
    }
}

public class NavigationViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        ViewBag.CurrentPage = ViewContext.RouteData.Values["action"];
        ViewBag.CurrentController = ViewContext.RouteData.Values["controller"];

        return View();
    }
}

/Components
  /PriorityList
      Default.cshtml
  /ShoppingCart
      Default.cshtml

builder.Services.AddViewComponents();

@addTagHelper *, MyLibrary.Components

<vc:priority-list max-priority="3"></vc:priority-list>
<vc:shopping-cart></vc:shopping-cart>

public class WeatherViewComponent : ViewComponent
{
    private readonly IWeatherService _weatherService;

    // DI qua constructor
    public WeatherViewComponent(IWeatherService weatherService)
    {
        _weatherService = weatherService;
    }

    public async Task<IViewComponentResult> InvokeAsync(string location)
    {
        var forecast = await _weatherService.GetForecastAsync(location);
        return View(forecast);
    }
}

builder.Services.AddScoped<IWeatherService, WeatherServiceImpl>();

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace WebApp.ViewComponents
{
    public class ShoppingCartViewComponent : ViewComponent
    {
        private readonly ICartService _cartService;

        public ShoppingCartViewComponent(ICartService cartService)
        {
            _cartService = cartService;
        }

        public IViewComponentResult Invoke()
        {
            var cart = _cartService.GetCart(HttpContext.User.Identity?.Name);

            var viewModel = new CartViewModel
            {
                Items = cart.Items,
                TotalItems = cart.Items.Sum(x => x.Quantity),
                TotalPrice = cart.Items.Sum(x => x.Price * x.Quantity)
            };

            return View(viewModel);
        }
    }

    public class CartViewModel
    {
        public List<CartItem> Items { get; set; }
        public int TotalItems { get; set; }
        public decimal TotalPrice { get; set; }
    }
}

@model CartViewModel

<div class="cart-panel">
    <h4>
        <span class="oi oi-cart"></span>
        Giỏ hàng (@Model.TotalItems)
    </h4>

    @if (!Model.Items.Any())
    {
        <p class="text-muted">Giỏ hàng trống</p>
    }
    else
    {
        <ul class="list-unstyled">
            @foreach (var item in Model.Items)
            {
                <li>
                    @item.ProductName × @item.Quantity
                    <span class="badge">@item.Price ₫</span>
                </li>
            }
        </ul>

        <hr />
        <strong>Tổng: @Model.TotalPrice ₫</strong>
    }
</div>

<!-- _Layout.cshtml -->
<header>
    <nav>...</nav>

    <div class="cart-summary">
        @await Component.InvokeAsync("ShoppingCart")
    </div>
</header>