1. View types

Model-bound views

Version: 0.x (alpha public release)

Model-bound views use the default Sitecore view component named SitecoreComponentViewComponent. This means that you don't need to create a view component class.

Build a model-bound view

To build a model-bound view:

  1. Create your Razor view in the /Views/Shared/Components/SitecoreComponent folder.
  2. Create your view model class.
  3. Map the Experience Edge response to the view component with the AddModelBoundView<TModel>() extension method.

Example

Here's an example model-bound view. Note the following:

  • 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 SitecoreAI content from Razor views

The Razor view of a model-bound view uses a strongly-typed model that binds to properties in the Experience Edge response.

Here's an example Razor view:

@model MyRenderingHost.ComponentModels.ContentBlock

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

Here's an example ContentBlock model accessed in the Razor view:

using Sitecore.AspNetCore.SDK.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!