Model-bound views

Current version: 19.x

Model-bound views use the default SitecoreComponentViewComponent view component, so you do not need to create a view component class.

When you have created your Razor view in the /Views/Shared/Components/SitecoreComponent folder and your view model class, you must map the Layout Service response to the view component with the AddModelBoundView<TModel>() extension method.

In the following example:

  • AddModelBoundView<BoundContentBlock>("ContentBlock") maps the ContentBlock response component to the default SitecoreComponentViewComponent view component, uses the ContentBlock.cshtml view, and provides the view with the BoundContentBlock model.

  • AddModelBoundView<BoundGenericBlock>(name => name.StartsWith("sc"), "GenericBlock") maps all response components prefixed with sc to the GenericBlockViewComponent view component, uses the GenericBlock.cshtml view, and provides the view with the BoundGenericBlock model.

public void ConfigureServices(IServiceCollection services)
  var renderingEngineBuilder = services.AddSitecoreRenderingEngine(options =>
      .AddModelBoundView<BoundGenericBlock>(name => name.StartsWith("sc"), "GenericBlock")

Accessing Sitecore content from model-bound view component Razor views

The Razor view of a model-bound view component uses a strongly-typed model that binds to properties in the Layout Service response.

The Razor view:

@model MyRenderingHost.ComponentModels.ContentBlock

  <h2 asp-for="Model.Heading"></h2>
    <sc-text asp-for="Model.Content"></sc-text>

The ContentBlock model accessed in the Razor view:

using Sitecore.LayoutService.Client.Response.Model.Fields;

namespace MyRenderingHost.ComponentModels
  public class ContentBlock
    public TextField Heading { get; set; }
    public RichTextField Content { get; set; }

Do you have some feedback for us?

If you have suggestions for improving this article,