Razor templating in Xview framework

Question

I saw the presentantion on xview on the TDS and i really liked it. Is it possible to use a regular razor view and pass the model to the view from the controller so i can use it like this? Hoang Chu told me that this is possible. Can some one provided me with an example?

@model ArticleComponent
<div class="promobox">
    <h2>@Model.title</h2>
    <span class="promo-intro">@Model.Introduction</span>
    <p>@Model.Body</p>
    <img src="@Model.image.ID" class="promo-image" alt="@Model.image.Alt">
    {ImageTag}
    @if(Model.link != null){
        <a tridion:href="@Model.link.ID" class="promo-link">@Model.link.Title.ID</a>
    }
</div> 

Answer 1

@Marlowe, glad to hear that you like XView :)

I've created this quick video to show how you can use XView in combination with RazorEngine to develop Tridion TOM.NET templates with ViewModels, Razor views, Builders (for building ViewModels) and Unit Testing the Razor views without depending on Tridion.

Video: https://www.youtube.com/watch?v=_6_jP7cVT_8

Source code created in that video can be downloaded here: https://onedrive.live.com/redir?resid=623BC2F808E7FF31!1689&authkey=!AJBl7B3QAHqA3Ws&ithint=file%2czip

Below are in short the steps as discussed in the above video.

Project Setup

1) In Visual Studio create a new C# Class Library.

2) Add references to the Tridion and XView dlls. (Standard Tridion/XView procedure)

3) Add RazorEngine to your Class Library from NuGet

4) Add Microsoft ASP.NET MVC to your Class Library from NuGet

This is needed for design-time only.

5) Add a Web.config file to the root of your Class Library

This is needed for design-time only.

The Web.config file should contain the following:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor"
                  type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="pages"
               type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
               requirePermission="false" />
    </sectionGroup>
  </configSections>
  <system.web.webPages.razor>
    <pages pageBaseType="RazorEngine.Templating.TemplateBase, RazorEngine"></pages>
  </system.web.webPages.razor>
  <system.web>
    <compilation targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </assemblies>
    </compilation>
  </system.web>
</configuration>

6) Recompile the Class Library

This will output a bunch of dlls, including the two below.

Copy these two dlls to the bin folder of your Class Library project. (This is only needed for design-time).

• RazorEngine.dll
• System.Web.Mvc.dll

Also, very important, put the above two dlls into the GAC on the Tridion Content Manager/Publisher server(s).

Now you're ready to start coding.

Code Setup

Since we want to use Razor instead of the C# View classes we can change the C# View classes to become Builders to build ViewModels and to pass ViewModels to Razor views for rendering.

We'll reserve the Views sub namespace for Razor views and move the C# classes to Builders sub namespace.

We want to map Tridion templates to Builders. To do this we create a custom ViewMapper class by extending the default ViewMapper and override the GetViewNamespace() method and tell XView where to look for Builders.

Once the above is put in place, then we can start develop Tridion TOM.NET templates in a similar way like ASP.NET MVC.