Razor: Rendering Content-Blocks
When using Inner Content the linked content-blocks (apps or pieces of content) must be rendered into the template. Here's how to do it in Razor.
![](../../shared/tutorials/assets/razor.png)
We have an rich series of Razor tutorials. You should really check them out 👍.
How to use
There are two common use cases
- Virtual Panes at item level - in this case, the item has it's own pane for placing apps and content-blocks
- Very Rich Text - where you add content-blocks and apps in the WYSIWYG
Item-Level Virtual Panes
Here's a quick example which renders an area with all content-blocks:
@ToSic.Sxc.Block.Render.All(Content, field: "InnerContent")
This example creates the area for the content-blocks (important so that the UI appears for editors to add more blocks) and renders all existing content-blocks in the predefined order into that area.
Here's a more manual example of doing the same thing, but done manually to demonstrate what happens and to allow myself to add more css-classes:
<div class="some-class sc-content-block-list" @Edit.ContextAttributes(post, field: "DesignedContent")>
@foreach(var cb in @post.DesignedContent) {
@cb.Render();
}
</div>
If you care about doing it manually, read more about the Edit object.
Very Rich Text / Inner-Content
Here's an example how to merge content-blocks with a html-text which has placeholders for each content-block, allowing a mix of text/apps.
@ToSic.Sxc.Blocks.Render.All(post, field: "WysiwygContent", merge: post.Body)
There is a new parameter merge, where you fill in your WYSIWYG-field that contains the content-block(s).
Here is a blog tutorial on implementing Very Rich Text.
Read also
- Read more on Razor Edit.ContextAttributes
Demo App and further links
You should find some code examples in this demo App
History
- Introduced in 2sxc 8.4
- Clean API and merge capabilitien in 8.9