View types

Model-bound views

Version:

Important

If you integrated your app before , it's using the legacy ASP.NET Core Rendering SDK, version 22 or earlier. This SDK is no longer receiving updates, so we recommend that you upgrade to the latest version of the new .

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 =>
    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:

@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:

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

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

If you have suggestions for improving this article, let us know!