Partial Views & View Components

1. Partial Views: Reusable HTML

File: Views/Shared/_ProductCard.cshtml

@model ProductListViewModel

<div class="card">
    <img src="@Model.ImageUrl" class="card-img-top">
    <div class="card-body">
        <h5>@Model.Name</h5>
        <p>$@Model.SellPrice</p>
        <a asp-action="Details" asp-route-id="@Model.Id">View</a>
    </div>
</div>

Use it:

@model List<ProductListViewModel>

<div class="row">
@foreach (var product in Model)
{
    <div class="col-4">
        <partial name="_ProductCard" model="product" />
    </div>
}
</div>

Rule: Partial has no controller. Parent passes all data via model. Name starts with _ by convention.

2. View Components: Reusable Logic

Problem: Show "Cart Items: 3" in Layout. Layout has no model. Partial can't call DB.

Solution: View Component = mini-controller.

File: ViewComponents/CartSummaryViewComponent.cs

public class CartSummaryViewComponent : ViewComponent
{
    private readonly AppDbContext _db;
    public CartSummaryViewComponent(AppDbContext db) { _db = db; }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var userId = User.Identity.Name;
        var count = await _db.CartItems
            .Where(c => c.UserId == userId)
            .SumAsync(c => c.Quantity);
        return View(count); // Looks for Views/Shared/Components/CartSummary/Default.cshtml
    }
}

View: Views/Shared/Components/CartSummary/Default.cshtml

@model int
<span class="badge bg-primary">Cart: @Model</span>

Use anywhere: <vc:cart-summary></vc:cart-summary> or @await Component.InvokeAsync("CartSummary")

3. Partial vs Component: When to Use

1. Partial View Discovery: How It Finds Files

<partial name="_ProductCard" /> searches in order:

1. Views/{Controller}/_ProductCard.cshtml
2. Views/Shared/_ProductCard.cshtml

What is {Controller}? Current controller name. In ProductController, checks Views/Product/ first.

Force path: <partial name="~/Views/Shared/_ProductCard.cshtml" />

2. Html.Partial vs Tag Helper

Rule: Use Tag Helper <partial>. Async by default, cleaner syntax.

3. View Component Discovery & Naming

Class must end with ViewComponent or have [ViewComponent] attribute.

// Option 1: Convention
public class CartSummaryViewComponent : ViewComponent { }

// Option 2: Attribute
[ViewComponent(Name = "CartSummary")]
public class MyCartWidget { }

View search path: Views/{Controller}/Components/{ComponentName}/Default.cshtml
Then: Views/Shared/Components/{ComponentName}/Default.cshtml

Invoke: <vc:cart-summary></vc:cart-summary> Kebab-case. Or @await Component.InvokeAsync("CartSummary")

4. Passing Parameters to Components

public class RecentPostsViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(int count, bool showAuthor)
    {
        var posts = await _db.Posts.Take(count).ToListAsync();
        ViewBag.ShowAuthor = showAuthor;
        return View(posts);
    }
}

Use: <vc:recent-posts count="5" show-author="true"></vc:recent-posts>

Parameters match method signature. Types auto-converted.

5. ViewComponent vs Partial vs TagHelper

6. Avoid: ViewData in Partials

Partial can access parent ViewData, but don't.

// BAD: _ProductCard.cshtml
<h5>@ViewData["Title"]</h5> // Depends on parent

// GOOD: Strongly typed
@model ProductCardViewModel
<h5>@Model.Name</h5>

Why: Coupling. Partial breaks if parent changes ViewData key. Explicit model = safe.