Layout vs Partial vs View Component

Layouts, Partial Views, and View Components are reusable UI mechanisms in ASP.NET Core MVC, but they serve different purposes.

1. Layout

A Layout defines the common page structure shared by multiple views—similar to a master page in ASP.NET Web Forms.

It commonly contains:

• Header
• Navigation menu
• Footer
• CSS and JavaScript references
• Main content placeholder

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My Application</title>
</head>
<body>
    <header>
        <h1>My Application</h1>
    </header>

    <main>
        @RenderBody()
    </main>

    <footer>
        Copyright © 2026
    </footer>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

@RenderBody() indicates where the current view's content must appear.

View using the layout

@{
    ViewData["Title"] = "Home";
}

<h2>Welcome to the home page</h2>

The layout is usually configured in _ViewStart.cshtml:

@{
    Layout = "_Layout";
}

2. Partial View

A Partial View is a reusable piece of Razor markup embedded inside another view.

Use it when:

• The UI is repeated
• Only presentation logic is needed
• Complex data-processing logic is not required

_ProductCard.cshtml

@model Product

<div class="product-card">
    <h3>@Model.Name</h3>
    <p>₹@Model.Price</p>
</div>

Render the partial view

<partial name="_ProductCard" model="product" />

Alternatively:

@await Html.PartialAsync("_ProductCard", product)

A partial view does not normally execute _ViewStart.cshtml, so it does not automatically receive a layout.

3. View Component

A View Component is a reusable UI component containing both:

• C# processing logic
• A Razor view

It is useful when the UI must retrieve or prepare its own data independently of the parent view.

Examples:

• Shopping cart summary
• Latest articles
• Category menu
• Notification panel
• Dynamic navigation menu

View Component class

using Microsoft.AspNetCore.Mvc;

public class LatestArticlesViewComponent : ViewComponent
{
    private readonly IArticleService _articleService;

    public LatestArticlesViewComponent(
        IArticleService articleService)
    {
        _articleService = articleService;
    }

    public async Task<IViewComponentResult> InvokeAsync(int count)
    {
        var articles =
            await _articleService.GetLatestArticlesAsync(count);

        return View(articles);
    }
}

Component view location

Views/
└── Shared/
    └── Components/
        └── LatestArticles/
            └── Default.cshtml

Default.cshtml

@model IEnumerable<Article>

<h3>Latest Articles</h3>

@foreach (var article in Model)
{
    <p>@article.Title</p>
}

Invoke the View Component

@await Component.InvokeAsync(
    "LatestArticles",
    new { count = 5 })

Or use its Tag Helper syntax:

<vc:latest-articles count="5"></vc:latest-articles>

Key differences

Simple decision rule

• Use a Layout for the complete page frame.
• Use a Partial View for reusable HTML that receives prepared data.
• Use a View Component when the reusable section needs its own C# logic, dependency injection or data retrieval.

Layout: Entire page structure
   └── Full View: Page-specific content
          ├── Partial View: Reusable markup
          └── View Component: Reusable markup + C# logic

Library requirement

No additional NuGet package is required. All three features are included with ASP.NET Core MVC through:

builder.Services.AddControllersWithViews();

Interview answer

A Layout provides the common structure for an entire page. A Partial View reuses Razor markup and normally receives data prepared by its parent. A View Component combines a Razor view with an independent C# class, dependency injection and component-specific data-retrieval logic.

Use a View Component instead of a Partial View when a reusable UI section needs its own C# logic, dependency injection, or data retrieval.

Use a Partial View when

The parent view or controller has already prepared the required data, and the reusable section only needs to display it.

Example: Product card

@model ProductViewModel

<div class="product-card">
    <h3>@Model.Name</h3>
    <p>₹@Model.Price</p>
</div>

Render it:

<partial name="_ProductCard" model="product" />

The partial receives prepared data and displays it.

Use a View Component when

The reusable section needs to:

• Retrieve data from a database or service
• Use dependency injection
• Perform component-specific processing
• Work independently of the parent controller
• Accept parameters and prepare its own model
• Be reused across unrelated pages

Typical examples:

• Shopping-cart summary
• Latest articles
• Category navigation
• Notification count
• User profile summary
• Dynamic sidebar

Example: Latest articles

public class LatestArticlesViewComponent : ViewComponent
{
    private readonly IArticleService _articleService;

    public LatestArticlesViewComponent(
        IArticleService articleService)
    {
        _articleService = articleService;
    }

    public async Task<IViewComponentResult> InvokeAsync(int count)
    {
        var articles =
            await _articleService.GetLatestArticlesAsync(count);

        return View(articles);
    }
}

Component view:

@model IEnumerable<ArticleViewModel>

<h3>Latest Articles</h3>

@foreach (var article in Model)
{
    <p>@article.Title</p>
}

Invoke it from any view:

@await Component.InvokeAsync(
    "LatestArticles",
    new { count = 5 })

Decision table

Important point

A View Component is not an API endpoint and does not handle HTTP requests directly. It does not use controller routing, model binding, action filters or HTTP action methods.

Its Invoke() or InvokeAsync() method is called from a Razor view:

public IViewComponentResult Invoke()

or:

public async Task<IViewComponentResult> InvokeAsync()

Simple rule

If the parent prepares the data and the child only displays it, use a Partial View.
If the child must obtain or process its own data, use a View Component.

Library requirement

No additional NuGet package is required. View Components and Partial Views are included with ASP.NET Core MVC.