Discovering Sitecore ASP .NET Core SDK – Datasource Item Children Resolver

TL;DR

	namespace Discovering.Sitecore10.Models
	{
	public class ChildrenBlockModel
	{
	[SitecoreComponentField(Name = "items")]
	public IEnumerable<ItemLinkField<ContentBlockModel>> Children { get; set; }
	}

	public class ContentBlockModel
	{
	[SitecoreComponentField]
	public TextField Title { get; set; }
	}
	}

view raw ChildrenBlockModel.cs hosted with ❤ by GitHub

Longer interpretation

I wanted to play around a bit with different Contents Resolvers. The default resolvers are the following under the /sitecore/system/Modules/Layout Service/Rendering Contents Resolvers item:

Context Item Children Resolver
Context Item Resolver
Datasource Item Children Resolver
Datasource Resolver
Folder Filter Resolver
Sitecore Forms Resolver

To make it work you need to set the Rendering Contents Resolver field on the Rendering item to Datasource Item Children Resolver. After setting this up, the JSON result is the following:

	{
	...
	"placeholders": {
	"discovering-sitecore10-main": [
	{
	...
	"fields": {
	"items": [
	{
	"id": "5603c106-09d8-4895-8aee-0ecfb3b69522",
	"name": "Children1",
	"displayName": "Children1",
	"fields": {
	"Title": {
	"value": "I am the first children"
	}
	}
	},
	{
	"id": "763f460b-5e60-481f-9ea9-56bf34d8ae27",
	"name": "Children2",
	"displayName": "Children2",
	"fields": {
	"Title": {
	"value": "I am the second children"
	}
	}
	}
	]
	}
	}
	]
	}
	}

view raw LayoutServiceResponse.json hosted with ❤ by GitHub

Good, we are done all the changes in the Sitecore. Now let’s setup the model in the Rendering Host, which would be the following:

	namespace Discovering.Sitecore10.Models
	{
	public class ChildrenBlockModel
	{
	[SitecoreComponentField(Name = "items")]
	public IEnumerable<ChildContentBlockModel> Children { get; set; }
	}

	public class ChildContentBlockModel
	{
	[SitecoreComponentField(Name = "fields")]
	public ContentBlockModel Fields { get; set; }
	}

	public class ContentBlockModel
	{
	[SitecoreComponentField]
	public TextField Title { get; set; }
	}
	}

view raw ChildrenBlockModel.cs hosted with ❤ by GitHub

As you can see the model is a bit more complex than you would expect because of the extra intermediate ChildContentBlockModel class. This caused the most headache to me to find out how to build up the model – the main reason I decided to write this post, because after a few weeks I forgot how to use the Datasource Item Children Resolver.

I checked it further, because this approach looks a bit odd to me, Sitecore should have already something in SDK for it and there is, it’s called ItemLinkField. It’s a generic class which accepts any type as a parameter to map your fields to. Here is how the model looks using the ItemLinkField:

	namespace Discovering.Sitecore10.Models
	{
	public class ChildrenBlockModel
	{
	[SitecoreComponentField(Name = "items")]
	public IEnumerable<ItemLinkField<ContentBlockModel>> Children { get; set; }
	}

	public class ContentBlockModel
	{
	[SitecoreComponentField]
	public TextField Title { get; set; }
	}
	}

view raw ChildrenBlockModel.cs hosted with ❤ by GitHub

Instead of a ModelBoundView, let’s use a ViewComponent – although it’s not really the most practical option for such simple component, but it’s a good chance to also showcase this. To able to map the JSON response to the model I use the IViewModelBinder. Here is the code:

	public class ChildrenBlock : ViewComponent
	{
	private readonly IViewModelBinder _viewModelBinder;

	public ChildrenBlock(IViewModelBinder viewModelBinder)
	{
	_viewModelBinder = viewModelBinder;
	}

	public async Task<IViewComponentResult> InvokeAsync()
	{
	return View(
	"~/Views/Shared/Components/SitecoreComponent/ChildrenBlock.cshtml",
	await _viewModelBinder.Bind<ChildrenBlockModel>(this.ViewContext));
	}
	}

view raw ChildrenBlock.cs hosted with ❤ by GitHub

Last but not least the View, to make this post complete:

	@model ChildrenBlockModel

	@foreach (var child in Model?.Children ?? Enumerable.Empty<ItemLinkField<ContentBlockModel>>())
	{
	@await Html.PartialAsync("/Views/Shared/Components/SitecoreComponent/ContentBlock.cshtml", child.Fields)
	}

view raw ChildrenBlock.cshtml hosted with ❤ by GitHub

TL;DR

Longer interpretation

Share this:

Leave a Reply Cancel reply