Model-bound views

Version: 10.1

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.

RequestResponse

public void ConfigureServices(IServiceCollection services)
{
  var renderingEngineBuilder = services.AddSitecoreRenderingEngine(options =>
    options
      .AddModelBoundView<BoundContentBlock>("ContentBlock")
      .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:

RequestResponse

@model MyRenderingHost.ComponentModels.ContentBlock

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

The ContentBlock model accessed in the Razor view:

RequestResponse

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,