Renderings

Rendering Fields

Every field wrapper in Fortis has a Render() method which essentially calls the Sitecore render pipeline. However each field wrapper also implements IHtmlString which makes rendering fields in Razor very easy, essentially the implementation calls the Render() method on the field. If we take the example Page template below and create a simple view which renders the fields.

  • Page
    • Title – Single Line Text
    • Body – Rich Text
    • Image – Image
    • Date – Date Time
    • Related Page Link – General Link
@model IPage

<section class="row">
    <div class="column c12">
        <div class="gutter">
            <h1>@Model.Title</h1>
            @Model.Body
            <br />
            @Model.Image
            <br />
            @Model.Date
            <br />
            @Model.RelatedPageLink
        </div>
    </div>
</section>

Often there are situations where you need to pass in parameters when rendering a field. Many of the field types have their own overloaded Render() methods (e.g. formatting the date & time) you can also pass in a parameters object. This is the same parameters object you could normally pass in when rendering a field in Sitecore. In the example below we’re added some custom CSS classes (you need the @ as “class” is a keyword), a data attribute (you need to use “_” as you can’t use “-“) along with a height, width and cropping option. Further to this we might have the need to render mark-up (or another field) inside a field, we can use the RenderBeginField() and RenderEndField().

As Fortis is just calling the render pipeline fields will be enabled for editing in the page editor by default. There might be situations where you either want to restrict the field from being editable or even not render the field and just use the value. You can disable the editing by setting the “editing” parameter to false or use the RawValue property to get the value held in the field.

@model IPage

<section class="row">
    <div class="column c12">
        <div class="gutter">
            <h1 data-rawValue="@Model.Title.RawValue">@Model.Title.Render(editing: false)</h1>
            @Model.Body
            <br />
            @Model.RelatedPageLink.RenderBeginField(parameters: new { @class = "button" })
            @Model.Image.Render(parameters: new { @class = "my-css-class another-class", data_info = "data attribute", h = 100, w = 100, crop = 1 })
            @Model.RelatedPageLink.RenderEndField()
            <br />
            @Model.Date.Render("dd-MMM-yyyy")
        </div>
    </div>
</section>

View Rendering

The GetModelFromView processor Fortis adds to the mvc.getPageItem pipeline allows you to create viewing renderings in Sitecore without specifying a model item. For Fortis to be able to construct your model for you it must use the Fortis.Model.RenderingModel<TPageItem, TRenderingItem> class. The RenderingModel class is generally for simple usages where accessing a single item is all that is required, for more complex models (e.g. lists of items) you’ll most likely want to use a controller rendering.

  • TPageItem (exposes PageItem property) – models the Sitecore.Context.Item object.
  • TRenderingItem (exposes RenderingItem property) – models the item specified in the data source of the rendering. This will be the same as the context item if no data source has been specified.

While it may seem logical to use the PageItem property given it reads from the context item it is usually better to read from the RenderingItem as that is specific to the rendering itself.

@model RenderingModel<IPage, IPage>

<section class="row">
    <div class="column c12">
        <div class="gutter">
            <h1>@Model.Title</h1>
            @Model.RenderingItem.Body
            <br />
            @Model.RenderingItem.Image
            <br />
            @Model.RenderingItem.Date
            <br />
            @Model.RenderingItem.RelatedPageLink
        </div>
    </div>
</section>

Controller Rendering

The following example shows how you might create a controller rendering which outputs a field from the rendering item along with a list of its children.

Model

public interface IChildrenModel
{
	IRenderingModel<IPage, IPage> RenderingModel { get; }
	IEnumerable<IItemWrapper> Children { get; }
}

public class ChildrenModel : IChildrenModel
{
	public IRenderingModel<IPage, IPage> RenderingModel { get; set; }
	public IEnumerable<IItemWrapper> Children { get; set; }
}

Controller

public class ChildrenController : Controller
{
	private readonly IItemFactory _itemFactory;

	public ChildrenController(IItemFactory itemFactory)
	{
		_itemFactory = itemFactory;
	}

	public ActionResult Index()
	{
		var renderingModel = _itemFactory.GetRenderingContextItems<IPage, IPage>();
		IEnumerable<IItemWrapper> children = Enumerable.Empty<IItemWrapper>();

		if (renderingModel.RenderingItem != null)
		{
			children = renderingModel.RenderingItem.Children<IItemWrapper>();
		}

		var model = new ChildrenModel
		{
			Children = children,
			RenderingModel = renderingModel
		};

		return View(model);
	}
}

View

@model IChildrenModel

<section class="row">
    <div class="column c12">
        <div class="gutter">
            <h1>@Model.RenderingModel.RenderingItem.Title</h1>
            @if (@Model.Children.Any()) {
            <ul>
                foreach (var child in @Model.Children) {
                <li>@child.Name</li>
                }
            </ul>
            }
        </div>
    </div>
</section>

Next: Create, Delete & Modify Items