Sitecore MVC For Beginners – Part 3 – View Rendering

After a very long long time, I’m back to writing blogs.

Sorry for the delayed part 3 of the blog series Sitecore MVC For Beginners.

In this post we will look into View Rendering in Sitecore MVC.

Before jumping into the View Rendering, let’s have some background about Sitecore renderings.

What are Sitecore renderings?
Well, Sitecore renderings are nothing but a way to render the content on the website pages.If you are aware of the Sublayouts in Sitecore, consider renderings similar to them (infect Sublayouts are also a type of renderings).
In MVC context, we can think rendering as Views, which drive the content to the users.

Where from the data comes?
We may often bind our Sitecore MVC renderings with a Model or we can utilize default Model.

How we associate these renderings to the items?
Based on the type of the rendering, these Sitecore renderings can be associated using MVC Controllers (e.g. Controller Renderings) or we can assign to the Presentation of the item (e.g. View Renderings).

Lets quickly have a look at the few of these rendering in Sitecore:
Go to the Renderings folder in Sitecore & see it’s insert options (right-click on the item & hover on Insert):
/sitecore/layout/Renderings

Sitecore MVC Renderings

As you can see we have different types of renderings here but we will be learning more about View Rendering & Controller rendering in this blog post.

For other types of rendering, please see the Sitecore Documentation.

View Rendering
View rendering is simplest of all available renderings & they are widely used.
Many times, View renderings work in a similar way the standard Sitecore sublayout works.

Let’s create a View Rendering but before that let’s create a folder item (based on the Renderings Folder template) under Renderings ( I named it MVC Demo).
We will use this folder to keep our renderings items.

Now right-click on this folder & using insert options, let’s create a View Rendering item.

insert_view_renderings

I named it Sample View Rendering.
Now let’s have a look at few of the important fields on View rendering item:

sample_view_rendering_item

Path: This fields is used to define the relative path of the associated .cshtml file (as we have .ascx for Sitecore sublayouts).
This .cshtml file represent the VIEW in terms of MVC terminology.

Area: We can use this field to declare the MVC Area.

Model: This field is used to select the Model item, from “/sitecore/layout/Models” & can be used to bind the View rendering to any specific Model instead of default Sitecore rendering model.

We will now create the associated .cshtml file in our VS Solution.

Let’s create the MVCDemo folder inside the Views folder and add an View:

 

Write the below code to use the default Sitecore RenderingModel as the Model for this view:

@model Sitecore.Mvc.Presentation.RenderingModel

Remember this would need the reference of SItecore.MVC dll in the project.

RenderingModel has Item property & this is the MVC representation (my personal thought) of SItecore.Context.Item which populate the few important properties such as item name, children & path etc.

If we define the datasource on the renering item in Sitecore, this would populate the DataSource item in the RenderingModel.Item property otherwise it will use the context item.

Now we will use this RenderingModel.Item to show the content of the “Title” field of context item.

For this, lets add below code in the View Rendering:
@Html.Sitecore().Field(“Title”)

Tip: Sitecore has many such helper extension methods available and to leverage best of the Sitecore one should use these.

For example when we use the above method, we can edit the field in the ExpereinceEditor.

Another Tip: If you don’t get the VS IntelliSense or get an error about the Sitecore not recognized as Html helper, make sure to define the below in web.config file in Views folder:

<add namespace=”Sitecore” />
<add namespace=”Sitecore.Mvc”/>
<add namespace=”Sitecore.Mvc.Presentation” />

Now let’s save the View Rendering & publish this new MVCDemo folder to the Views folder in web root(to keep it simple, let’s copy/paste the folder) .

Switch back to the Sitecore & navigate to the View rendering item we created.

We well provide the relative path of the .cshtml view in the Path field & this is how it is looking at my end:

Save & publish rendering item.

Next task is to set this View rendering on the Home item’s presentation.

I’ll skip the steps of adding the view rendering to the presentation of the Home item, but don’t forget to publish the item once you add it.
This is how the presentation layout looks like:

Navigate to the Home page & we should see the Title field is showing on the page.

 

Simple, isn’t it?

In next post, we will learn about the Sitecore Controller Rendering.

Advertisements