What is controller and view rendering in Sitecore?

In Sitecore MVC, rendering represents the presentation logic. There are two primary types of renderings you can create in Sitecore MVC: Controller Renderings and View Renderings.

1.  Controller Rendering :

Controller renderings are linked to a controller action. When a page is requested that contains a controller rendering, the associated controller action is invoked. Controller renderings are typically used when there’s a need for complex logic or data fetching before rendering the view.

For example, if you have a product listing component on your webpage which needs to fetch data from a database or an API, then this type of rendering can be used. The controller action would fetch the necessary data, populate a model object, and then pass it to the view for rendering.

2.  View Rendering :

View renderings are simpler and are directly linked to a Razor view. They are often used for static components that do not require any server-side logic to generate the view or for components that use data directly from the Sitecore context.

For example, if you have a navigation component that’s driven entirely by the Sitecore content tree, you might use a View Rendering. The data used in the view would be sourced directly from the Sitecore context without the need for a controller action to fetch or process data.

Both types of renderings have their place, and understanding when to use each is crucial for efficient and effective Sitecore MVC development. It’s a common best practice to use controller renderings only when necessary and use view renderings whenever possible, as they are less complex and tend to perform better.

Example Controller Rendering and View Rendering in Sitecore.

Controller Rendering

In Sitecore, you first need to create a Controller Rendering item. Here’s how:

1. In the Sitecore Content Editor, navigate to /sitecore/layout/Renderings.
2. Create a new Controller Rendering.
3. In the Controller field, enter the name of your controller (without the “Controller” suffix). For example, if your controller class is named “ProductController”, you would enter “Product”.
4. In the Controller Action field, enter the name of your action method. For example, “List”.

Here’s an example of a controller in your MVC project:

//Code

public class ProductController : Controller

{

    public ActionResult List()

    {

        // Fetch products - this could involve calling a service, querying a database, etc.

        var products = productService.GetProducts();

        return View(products);

    }

}

The “List” action fetches a list of products and passes it to the view. The view, which would be located at Views/Product/List.cshtml, might look something like this:

//Code

@model IEnumerable<Product>

<ul>

    @foreach (var product in Model)

    {

        <li>@product.Name - @product.Price</li>

    }

</ul>

//Code

View Rendering

To create a View Rendering item in Sitecore:

1. In the Sitecore Content Editor, navigate to /sitecore/layout/Renderings.
2. Create a new View Rendering.
3. In the Path field, enter the path to your view, starting from the Views folder. For example, if your view is at Views/Navigation/Menu.cshtml, you would enter “/Views/Navigation/Menu.cshtml”.

An example of a view rendering, which might display a navigation menu based on the Sitecore content tree, could look like this:

//Code

@using Sitecore.Mvc

@using Sitecore.Mvc.Presentation

@model RenderingModel

<nav>

    <ul>

        @foreach (var item in Model.Item.Children)

        {

            <li>@Html.Sitecore().Field("Title", item)</li>

        }

    </ul>

</nav>

//Code

In this example, the view directly uses the Sitecore context (`Model.Item`) to access the children of the current item. Each child item represents a menu item, and the “Title” field of each item is displayed.