Razor Views and ViewComponents

For developers working with Optimizely CMS 12 in a Platform-as-a-Service (PaaS) environment, understanding how content templates are rendered is fundamental. CMS 12 leverages standard ASP.NET Core MVC and Razor to display content, giving you robust and flexible mechanisms for building dynamic web experiences. This article breaks down Razor Views, ViewComponents, and the key extension points in the rendering pipeline.

1. Model, Views, and Templates in Optimizely CMS 12

Optimizely CMS 12’s rendering flow is rooted in the Model-View-Controller (MVC) pattern. This separation of concerns supports maintainable and scalable implementations:

• Model: Represents data and business logic, independent of the UI.
• View: Renders the Model as HTML (typically a Razor .cshtml file).
• Controller: Handles routing and selects which View should render the current content.

Alternatively, Razor Pages offer a page-focused approach, pairing a Razor Page file (.cshtml) with a page model (.cshtml.cs) to separate presentation from page-specific logic.

By convention, Optimizely MVC projects store renderers in the /Views folder, where the runtime looks for view templates.

2. Views: The Core of Content Display

Views (primarily .cshtml) are the core display mechanism in CMS 12. They contain HTML markup plus Razor syntax to produce the final output sent to the client.

To keep rendering clean and reusable, developers commonly use:

• Action-specific views: Views scoped to a controller action.
• Partial views: Reusable UI snippets embedded inside other views.
• ViewComponents: Self-contained UI components with logic + view.
• Layouts: Shared structure (header/footer/navigation).
• View models: Strongly-typed models built specifically for the view.

3. HTML Helpers for Dynamic Content

Views usually contain static HTML, but rendering Optimizely properties correctly (and making them editable) depends on using the right helpers.

ASP.NET Core MVC and Optimizely CMS provide a rich set of helper methods, and you can also create custom helpers to standardize rendering patterns across your site.

4. ViewComponents for Reusable UI Logic

ViewComponents are ideal when you need reusable UI with “real logic” (data fetching, composition rules, conditional rendering) that would make a partial view messy.

They are especially useful for:

• Reusable UI elements: Navigation, related content, promo bands, carts, etc.
• Complex rendering logic: When the UI needs service calls or business rules.
• Separation of concerns: Keeps view logic out of page controllers.

A ViewComponent is a class inheriting from ViewComponent, exposing Invoke() or InvokeAsync(), returning a view result. It prepares the data (often via injected services) and renders a dedicated Razor view.

5. Controlling Rendering: Advanced Mechanisms

Optimizely also provides mechanisms to control how templates are selected based on context such as display options, channels, and tags:

• TemplateDescriptor: Decorate controllers/views to guide template selection.
• Tags: Categorize templates for specific contexts (e.g., “Mobile”, “FullWidth”).
• TemplateResolver: Picks the best template for a content item + context.
• DisplayChannel: Define channel-specific rendering (web, mobile, etc.).

Together, these features enable adaptive rendering based on content type, display settings, and delivery context.

Interactive practice ideas

Conclusion

Mastering Razor Views and ViewComponents is essential for building maintainable, performant, and editor-friendly Optimizely CMS 12 solutions. By understanding MVC, using helpers like Html.PropertyFor(), and applying Optimizely’s template selection mechanisms, you can deliver consistent rendering across pages, blocks, channels, and contexts.