Advanced View Components — Parameters, Caching and Testing

Building on the View Component introduction in Chapter 27, this lesson covers the advanced patterns used in production: typed parameters, multiple view variants, error resilience, caching, and testing. The notification bell with unread count, a popular posts sidebar with configurable item count, and a cart summary header are the canonical View Component examples — self-contained UI widgets that fetch their own data and render independently of the page they appear on.

Typed Parameters and Multiple Views #

// ── View Component with typed parameters ──────────────────────────────────
public class PostListViewComponent : ViewComponent
{
    private readonly IPostService _service;
    public PostListViewComponent(IPostService service) => _service = service;

    // InvokeAsync can take any number of named parameters
    // Parameters come from the Tag Helper invocation or Component.InvokeAsync
    public async Task<IViewComponentResult> InvokeAsync(
        int    count      = 5,
        string category   = "",
        string displayMode = "full")   // "full", "compact", "minimal"
    {
        var posts = string.IsNullOrEmpty(category)
            ? await _service.GetRecentAsync(count)
            : await _service.GetRecentByCategoryAsync(category, count);

        var vm = new PostListViewModel(posts, displayMode);

        // Return different views based on display mode
        return displayMode switch
        {
            "compact"  => View("Compact",  vm),
            "minimal"  => View("Minimal",  vm),
            _          => View(vm),            // default view (Default.cshtml)
        };
    }
}

// ── View files:
// Views/Shared/Components/PostList/Default.cshtml  — full card layout
// Views/Shared/Components/PostList/Compact.cshtml  — condensed list
// Views/Shared/Components/PostList/Minimal.cshtml  — just titles

// ── Invocation with parameters ─────────────────────────────────────────────
<vc:post-list count="10" category="technology" display-mode="compact"></vc:post-list>

@* Or the method syntax: *@
@await Component.InvokeAsync("PostList",
    new { count = 10, category = "technology", displayMode = "compact" })

Notification Bell with Error Resilience #

public class NotificationBellViewComponent(
    INotificationService notificationService,
    ILogger<NotificationBellViewComponent> logger) : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        try
        {
            var userId = HttpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);
            if (userId is null) return View(new NotificationBellViewModel(0));

            var unreadCount = await notificationService.GetUnreadCountAsync(userId);
            return View(new NotificationBellViewModel(unreadCount));
        }
        catch (Exception ex)
        {
            // Log but don't crash — sidebar should never take down the whole page
            logger.LogError(ex, "Failed to load notification count for user.");
            return View(new NotificationBellViewModel(0));  // graceful fallback
        }
    }
}

// Unit test using TestableViewComponent pattern
[Fact]
public async Task InvokeAsync_ReturnsUnreadCount_ForAuthenticatedUser()
{
    // Arrange
    var mockService = new Mock<INotificationService>();
    mockService.Setup(s => s.GetUnreadCountAsync("user-1")).ReturnsAsync(5);

    var component = new NotificationBellViewComponent(
        mockService.Object,
        Mock.Of<ILogger<NotificationBellViewComponent>>());

    // Set up ViewComponentContext with authenticated user
    component.ViewComponentContext = new ViewComponentContext
    {
        ViewContext = TestHelper.CreateViewContext("user-1"),
    };

    // Act
    var result = await component.InvokeAsync() as ViewViewComponentResult;

    // Assert
    var vm = result?.ViewData?.Model as NotificationBellViewModel;
    Assert.Equal(5, vm?.UnreadCount);
}

Common Mistakes #

Mistake 1 — Not handling exceptions in InvokeAsync (sidebar crashes entire page) #

❌ Wrong — database timeout in View Component propagates as 500 for every page of the application.

✅ Correct — wrap InvokeAsync in try/catch; return a fallback view on error.

Mistake 2 — Wrong view file path (views not found exception) #

❌ Wrong — view at Views/Shared/PostList/Default.cshtml (missing Components folder).

✅ Correct — path must be Views/Shared/Components/PostList/Default.cshtml.