Content Block

To make it easier to display the Block List Editor editor in the front end, we have a helper component called RenderBlock (Example below)

var contentBlocks = Content!.GetValue<List<Content>>("BlockListPropertyAlias");
@foreach (var block in contentBlocks)
{
    <div class="py-3">
        <RenderBlock Content="@(block)" TView="IContentBlockView"/>
    </div>
}

The RenderBlock looks for components that implement the

IContentBlockPreview

This allows you to render your component in the front end by matching the element type alias. All you have to do is create a Blazor component and implement IContentBlockView like so.

@implements ZauberCMS.Core.Content.Interfaces.IContentBlockView
@if (Content != null)
{
    <div class="fs-6">
        @((MarkupString)(Content.GetValue<string>("Content") ?? string.Empty))
    </div>
}

@code {
    [Parameter] public Content? Content { get; set; }
    public string ContentTypeAlias => "RTEBlock";
}

The above is an example of pulling data from the Rich Text Editor and displaying it to the user. The important part is making sure I set the ElementTypeAlias to match the content type being used on this content.

To get the data is the same as querying data in the front end:

Querying Data