Partials and Components

Partials and Components are things what build the site for example Header is a partial and TopMenu is a component. We call them in the following way:

  • 1. Partial

  • 2. Component

About Partials

A partial view is a Razor markup file (.cshtml) that renders HTML output within another markup file's rendered output. The term partial view is used when developing either an MVC app, where markup files are called views, or a Razor Pages app, where markup files are called pages. This topic generically refers to MVC views and Razor Pages pages as markup files.

Partial views are an effective way to:

  • Break up large markup files into smaller components.

    In a large, complex markup file composed of several logical pieces, there's an advantage to working with each piece isolated into a partial view. The code in the markup file is manageable because the markup only contains the overall page structure and references to partial views.

  • Reduce the duplication of common markup content across markup files.

    When the same markup elements are used across markup files, a partial view removes the duplication of markup content into one partial view file. When the markup is changed in the partial view, it updates the rendered output of the markup files that use the partial view.

Partial views shouldn't be used to maintain common layout elements. Common layout elements should be specified in files like _ColumnsOne.cshtml and _ColumnsTwo.cshtml

Don't use a partial view where complex rendering logic or code execution is required to render the markup. Instead of a partial view, use a view component.

About Components

View components are similar to partial views, but they're much more powerful. View components don't use model binding, and only depend on the data provided when calling into it.

A view component:

  • Renders a chunk rather than a whole response.
  • Includes the same separation-of-concerns and testability benefits found between a controller and view.
  • Can have parameters and business logic.
  • Is typically invoked from a layout page.

View components are intended anywhere you have reusable rendering logic that's too complex for a partial view, such as:

  • TopMenu
  • HeaderLinks
  • FlyoutShoppingCart
  • OrderSummary
  • HomePageProducts
back to top