Model-bound views
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:
-
Create your Razor view in the
/Views/Shared/Components/SitecoreComponent
folder. -
Create your view model class.
-
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 theContentBlock
response component to the defaultSitecoreComponentViewComponent
view component; uses theContentBlock.cshtml
view; and provides the view with theBoundContentBlock
model. -
AddModelBoundView<BoundGenericBlock>(name => name.StartsWith("sc"), "GenericBlock")
maps all response components prefixed withsc
to theGenericBlockViewComponent
view component; uses theGenericBlock.cshtml
view; and provides the view with theBoundGenericBlock
model.
public void ConfigureServices(IServiceCollection services)
{
var renderingEngineBuilder = services.AddSitecoreRenderingEngine(options =>
options
.AddModelBoundView<BoundContentBlock>("ContentBlock")
.AddModelBoundView<BoundGenericBlock>(name => name.StartsWith("sc"), "GenericBlock")
);
}
Accessing XM Cloud 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; }
}
}