Razor mediator integration with UI2012 - Best practices

Question

We are using Razor Mediator 5.3 templating engine with Tridion 2011 SP1 edition and host an ASP .NET 4.0 application. Now, we are trying to integrate UI2012 with the application. I need some suggestions and best practices from past implementations.

Current State (without UI2012 integration)

1. A Razor Page Template for the Page
2. A site master page

Integration with UI2012/Experience Manager

1. Setup a UI2012 placeholder in the Master sitemap with an ID of UI2012Content
2. I have created a new compound RPT RPT_UI2012 with the following source:

RPT UI2012 Start TBB:

<asp:Content ID="UI2012ID" ContentPlaceHolderID="UI2012Content" Runat="Server"/>

Enable inline edit for a page with parameter reference as per the documentation:

<!-- Page Settings: {"PageID":"tcm:xx-xxxxx-xx",
                     "PageModified":"TIMESTAMP", 
                     "PageTemplateID":"tcm:xx-xxxxx-xxx",
                     "PageTemplateModified":"TIMESTAMP"} -->
<script type="text/javascript" language="javascript" defer="defer" 
 src="http://<MYCMEURL>/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js"
 id="tridion.siteedit"></script>

RPT UI2012 End TBB:

</asp:Content>Blah.. Other Razor Code</asp:Content>

The overall Page Template includes the existing Razor Page Template (from current state above) and the above RPT_UI2012 compound Template (from the integration code above).

Question: Should I just render the package with the current state and add the above compound Template to it with package inclusion? Are there any best practices around implementation with UI2012?

I also see that there is an open enhancement request in the Razor Mediator forum as well which encourages the implementation with the relevant TCDL.

UPDATE I have added "Enable inline edit for Content" to the Razor Component Template and used the component presentation in a DWT Page Template with "Enable inline edit for Page" enabled and I am able to open the Page using UI2012. I am still unable to edit the content inline in the UI but only able to modify it using Forms View. I am using the following code for rendering the component presentation currently

<!-- Inner Content Starts Here -->
    @foreach (var cp in ComponentPresentations) {
    @cp.RenderComponentPresentation()
}
<!-- Inner Content Ends Here -->

Should I use the following built in functions as suggested in the Razor Mediator guide?

String RenderComponentField(string fieldExpression, int fieldIndex)
String RenderComponentField(string fieldExpression, int fieldIndex, bool renderTcdlTagOnError)
String RenderComponentField(string fieldExpression, int fieldIndex, string value)
String RenderComponentField(string fieldExpression, int fieldIndex, string value,
                            bool renderTcdlTagOnError)
String RenderComponentField(string fieldExpression, int fieldIndex,
                            bool htmlEncodeResult, bool resolveHtmlAsRTFContent)
String RenderComponentField(string fieldExpression, int fieldIndex,
                            bool htmlEncodeResult, bool resolveHtmlAsRTFContent,
                            renderTcdlTagOnError)

UPDATE 02 I have added the following to my RCTs

<tcdl:ComponentField name="Fields.MYNAME"> @Fields.MYNAME </tcdl:ComponentField>

I noticed that the references are added in the output code and my components, and not component presentation, are editable.

<!-- Start Component Field: {"XPath":"tcm:Content/custom:Content/custom:MYNAME[i]"} -->

Thanks for the solution HERE.

I am still unsure on how to overcome the Page Template deficiency.

Please note that I am logging in as administrator to rule out any issues associated with Tridion security.

Thanks for your time and suggestions!

Answer 1

Following the update given, parts of your question is answered by https://stackoverflow.com/questions/12175970/razor-templating-with-siteedit-ui-2012-ontridion-2011

For completley enabling UI2012/XPM support, you have to make sure you are adding all required XPM comments for inline editing. See https://github.com/TridionPractice/tridion-practice/wiki/TridionUI2012FunctionsForUseInHtmlTemplates for an example of what is required.