Razor templating with SiteEdit UI 2012 onTridion 2011

Question

This is regarding Razor Templating with SDL Tridion 2011 SP1.

To enable SiteEdit UI 2012, we are introducing tags within CTs.

I would like to ask if it is possible to make tcdl:ComponentField tag for the field residing inside nested Embedded Field of a Component.

Here we have Component with "footer_links" as Multivalued Embedded Field and again each "footer_links" item has a Multivalued Embedded Field "sub_nav" and want to read sub_nav.image to make it suite editable.

But when I do following, enable inline editing for content TBB throws following error

Error : Object reference not set to an instance of an object. at Tridion.SiteEdit.Templating.EnableInlineEditingUI.FindItemFieldXPath(String[] parts, Int32 currentIndex, ItemFields fields)

Anyone has any idea? If we can implement this? If yes, then whats wrong with following code?

Also can we read the Fields inside ComponentLink for same? Help would be appreciated.

@for (int i=0; i<Fields.footer_links.Count; i++) {
/* "outer_image" is compLink and it workds fine */
   @if(Fields.footer_links[i].outer_image != null) {
   <tcdl:ComponentField name="Fields.footer_links[@i].outer_image">
    <img src="@Fields.footer_links[i].outer_image.ID"/>
  </tcdl:ComponentField>              
  }

  /* "sub_nav" is Mutlivalued Embedded field and "image" is field inside it */

   @for (int j=0; j<Fields.footer_links[i].sub_nav.Count; j++) {
   <li>
   @if(Fields.footer_links[i].sub_nav[j].image != null) {
   <tcdl:ComponentField name="Fields.footer_links[@i].sub_nav[@j].image">
      <img src="@Fields.footer_links[i].sub_nav[j].image.ID" />
    </tcdl:ComponentField>
   }
}
}

Answer 1

Its a long time so not sure what you are using but you can certainly use razor mediator inbuilt function for same similar to dwt

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)

Thanks..

Answer 2

Could you tried like this way

    @foreach(dynamic com in Fields.footer_links) {
/* "outer_image" is compLink and it workds fine */
   @if(com.outer_image != null) {
   <tcdl:ComponentField name="com.Fields.outer_image">
    <img src="@com.Fields.outer_image.ID"/>
  </tcdl:ComponentField>              
  }

  /* "sub_nav" is Mutlivalued Embedded field and "image" is field inside it */

   @foreach (dynamic subCom in com.sub_nav) {
   <li>
   @if(subCom.image != null) {
   <tcdl:ComponentField name="subCom.Fields.image">
      <img src="@subCom.Fields.image.ID" />
    </tcdl:ComponentField>
   }
}
}

Because, it seems the below line @i does not convert the value like in Int type

 <tcdl:ComponentField name="Fields.footer_links[@i].outer_image">

Answer 3

I'm assuming you have trouble generating the tcdl tag?

To solve this you can create a helper method that generates the tag for you:

public static MvcHtmlString SiteEditComponentField(this HtmlHelper helper, string id)

In this extension method you can easily return a formatted string with the tag and attributes.