Grids and content blocks are a staple of most CMS systems and Umbraco is no different. Through the use of the block list editor, content editors will be able to create pages with dynamic layouts. Check out the video in order to learn how to use this property on a document-type. Out-of-the-box, the block list property will not allow for view models and custom controllers to be used with the blocks added by content editors. If you have seen my video on view models then you will understand the reasons why not being able to use a view model to render a view within Umbraco is sub-optimal. Without a view model, you will be forced to write logic within your block view files. These views will be impossible to unit test. This approach will also mean that the architecture will be more confusing to learn for future developers.
The good news is that it is fairly easy to change this. It is possible to slightly tweak the property to allow for a controller to be called when the property is being rendered. In this blog post, I will go over the changes that you will need to make to enable this. To allow for a controller to be used with the property, you will need to update default.cshtml. This file can be found within 'Views' ➡ 'Partials' ➡ 'BlockList'. You will need to update this view to call a controller rather than the block item view files directly. This can be done using this code:
By default, the code within default.cshtml file will simply try to find and load a view file for each block added inside of it. The default location that the property expects these files to be located is within 'Views/Partials/BlockList/Components/'. The property will expect a corresponding view to be created for each block. The name for each view file should match the block alias property in the CMS.
The type for the model that needs to be passed into the view is BlockListModel. BlockListModel inherits from ReadOnlyCollection. This means BlockListModel is a collection that we can iterate through to get all the data about the blocks added by the content editors within the CMS. To gain access to each block's individual data, each BlockListItem should be unboxed to type IPublishedElement instead.
Line 12 in the code above is the important change. This line has been updated to call a custom controller using @Html.Action(). Two items are also being passed back to the controller. An IPublishedElement and the block alias. These two properties combined will allow us to get the data from within the custom controller we are about to create correctly. The code to create this controller is shown below:
The controller is not doing anything too special. The controller is vanilla and it inherits from the normal MVC controller. This means that we need to add a custom rule within the routing table. Without this step, all requests to this controller will result in Umbraco throwing a 404 error. You will need to create a component and a controller to run this configuration code. Below outlines the code that you will need to write in order to create this component and custom routing rule:
Do not forget to register the component with a composer. With this tweak in place, you can now create normal views for your blocks within the partial folder. You can then pass in whatever view model you want inside these views. This will result in much cleaner code. You can find out more information block list editor from the official documentation here. Happy coding!
