In this tutorial, you will learn how items are added within an Episerver ContentArea property and how you can work with those items in code. Understanding how to access items contained within a ContentArea in code is a useful step in Episerver CMS mastery! As we are working with Episerver, remember anything that implements theIContent interface can be dropped into a ContentArea by a content editor. This means a content editor can add both pages and blocks inside of a ContentArea property if they want to and you allow it! When an item is added to a ContentArea, its ContentReference is appended to the properties Items collection.
To render a ContentArea property from within a view, the Episerver PropertyFor() helper can be used. When PropertyFor() renders a ContentArea property, the helper will iterative through the items contained within the Items collection. Using this list of content references, a look-up is made for each item in the list and an attempt is made to call the components corresponding controllers. If successful, the call to the component's controller will result in the corresponding HTML being added to the requests output stream, which will eventually be returned to the client's browser. Now you know the basics of how items are added into a ContentArea and how they are rendered we can start to work with ContentArea in code!
How To Check If A ContentArea is empty
Before we go into the code I should mention, FilteredItems. The FilteredItems property is an additional property that is exposed within ContentArea. Using FilteredItems to work with items within a ContentArea in code is the recommended approach. The reason why you should favour the FilteredItems is because of the additional checks that are made on this property compared to the Items collection. The FilteredItems property filters items within the Items collection by personalization, permissions and published status. If you do not care about any of these things, you can use the Items collection directly, however, be warned you may expose content that is not ready for publication, so be warned! For the remainder of this article, I will assume you want to go the safe route! Assuming we go safe, to check if a ContentArea contains any items, we can use this code:
Get the IDs of the items within a Content Area
You can get a list of all the IDs in a ContentArea using this code snippet:
You can extend this code to get full references to the items in a ContentArea, like this:
Now you know about Items and FilteredItem this should hopefully demystify how this property works and how you can work with it in code. Understanding how to get the items is key. You now understand how to order and render items to bend Episerver to your will. Happy Coding 🤘
