In my previous post I discussed how to get started with ASP.NET MVC3 and Tridion using the opensource DD4T framework.
In this post I want to show you how DD4T handles the rendering of ComponentPresentations on a page.
In my previous example, the whole HTML of the (Tridion)page was rendered by only 1 (razor)view. This is not a desired scenario, because it leads to big views and re-use is almost impossible.
Tridion handles this quite nicely by using Component Templates. These templates are responsible for rendering their own little piece of content. And this is exactly what you want in your webapplication.
So, how to implement this using the DD4T framework? Lets find out by creating a simple page.
First, create a page in Tridion with 2 (or more) ComponentPresentations and publish the page. (Make sure your Component Templates are DD4T templates and have a metadatafield called ‘view’ with the name of an existing view in it!. See my previous post on how to create a DD4T Component/Page Template)
DD4T needs to know which (default) Controller to use. This needs to be configured in your Web.config. Add the following 2 lines of code in your Web.config:
<!-- Config values for the DefaultComponentPresentationRenderer-->
<add key="Controller" value="TridionComponent"/>
<add key="Action" value="Component"/>
Next, we have to write some code to handle the rendering of the ComponentPresentations.
1. Create a new controller and name it ‘TridionComponentController’.
2. Add the following code in this controller:
using System.Web.Mvc;
using DD4T.Mvc.Controllers;
using DD4T.ContentModel;
namespace Sample_WebApplication.Controllers
{
public class TridionComponentController : TridionControllerBase
{
public ActionResult Component(ComponentPresentation componentPresentation)
{
return base.ComponentPresentation(componentPresentation.Component.Id);
}
}
}
This controller is used to render each ComponentPresentation on a page. The TridionControllerBase class reads the metadata from each ComponentPresentation to find out which razorview to use. The result of the Action-method is a rendered componentpresentation.
Now, create a folder ‘TridionComponent’ in the ‘Views’ folder, and create a new razoriew. Give this view the same name as you defined in the metadata of your ComponentTemplate. So, in my case that is ‘Article’.
Add your HTML to this new View. My Article view looks like this:
@using DD4T.ContentModel;
@using DD4T.Mvc.Html;
@model IComponentPresentation
Component title: @Model.Component.Title
<h1>@Model.Component.Fields["title"].Value</h1>
<p>@Html.Raw(Model.Component.Fields["summary"].Value)</p>
<p>
@Html.Raw(Model.Component.Fields["body"].Value)
</p>
Now we have to adjust our main view to NOT render the ComponentPresentations inline, but to use our new controller and the DD4T ‘ComponentPresentation’ Action method.
Open your Page view (In the folder TridionPage, General.cshtml) and add the following code:
@using DD4T.ContentModel; @using DD4T.Mvc.Html; @model IPage <html> <head> <title>@Model.Title</title> </head> <body> <p> Some info about this page:<br /> Filename: @Model.Filename<br /> Title: @Model.Title<br /> Publication Title: @Model.Publication.Title<br /> </p> <h2>ComponentPresentations on this page</h2> @Html.RenderComponentPresentations() </body> </html>
Notice the @Html.RenderComponentPresentations()? This is a HTML helper from the DD4T framework that renders all the componentpresentations on the page, using our newly created ‘TridionComponentController’.
This ‘RenderComponentPresentation’ HTML helper renders ALL the ComponentPresentations, but often you only want to render certain ComponentPresentations. For instance, you want to render ‘Banner’ components in another section on your page then your ‘Article’ elements.
This can be achieved by using one of the overloads from the ‘RenderComponentPresentations’ HTML helper.
To only render ComponentPresentations that are based on a certain schema, you can use this code:
@Html.RenderComponentPresentationsBySchema("ArticleSchema")
To render ComponentPresentations based on a certain ComponentTemlate, you can use this code:
@Html.RenderComponentPresentationsByView("Article")
Or, if you want to render ComponentPresentations based on multiple ComponentTemplates, you can use this code:
@Html.RenderComponentPresentationsByView(new[] {"Article", "FullArticle" })
I hope this helped you to understand how ComponentPresentations are handled by the DD4T .NET framework.
Let me know if you have more questions or problems using the above code.
Albertromkes's Weblog 
Good article.
In real life, the page views will often be rendered in combination with a layout view (similar to a master page in ASP.NET WebForms). The layout view is normally set in the _ViewStart.cshtml, so it applies to all your views.
As a consequence, all your views will include the entire layout (so everything from the DTD definition to the /html), including the component presentation views.
This is not what you want. Fortunately it is easy to suppress. Just add this code to your CP views:
@{
Layout = null;
}
A better solution would be to change DD4T to return a PartialView rather than a regular View for CPs. This task is already on the backlog.
Hi Albert,
I have added the site edit tag in the page view also added siteedit tag for the component presentation and respective component presentation fields. Still site edit functionality is not working. Did I have missed any configuration/setup in MVC application to enable site edit?
Please let me know what r the changes we need to carry out to enable site edit?
Thanks in advance