View components

Current version: 20.x

In ASP.NET, view components are similar to partial views but more powerful. Refer to the Microsoft documentation on view components for more details.

View components are intended for rendering logic that is too complex for a partial view, such as navigation menus, login panels, search bars, and so on. Typically, view components do not use ASP.NET model binding and only access data on demand. However, the ASP.NET Rendering SDK provides a service and base component to enable binding a model to Layout Service output.

A view component consists of three files:

  • The view component class

  • The Razor view

  • The view model class

Configuring view components

To bind a model in your view component, you can either inherit from Sitecore.AspNet.RenderingEngine.Mvc, BindingViewComponent and invoke BindView, or inject the Sitecore.AspNet.RenderingEngine.Binding.IViewModelBinder service and invoke an overload of Bind.

You must also map the Layout Service response to the view component with the AddViewComponent() extension method.

In the following example, AddViewComponent("Styleguide-Layout", "StyleguideLayout") maps the Styleguide-Layout response component to the StyleguideLayoutViewComponent view component, and AddViewComponent(name => name.StartsWith("sc"), "OtherViewComponent") maps all response components prefixed with sc to the OtherViewComponent view component:

RequestResponse
public void ConfigureServices(IServiceCollection services)
{
  var renderingEngineBuilder = services.AddSitecoreRenderingEngine(options =>
    options
      .AddViewComponent("Styleguide-Layout", "StyleguideLayout")
      .AddViewComponent(name => name.StartsWith("sc"), "Other")
  );
}

Do you have some feedback for us?

If you have suggestions for improving this article,