How to add XPM tags for component linked field and embedded fields in DXA 1.2

Question

I have three Schemas as per Schemas design created the model

1st model : NewsletterContainer having normal field and component link field allowed Newsletter content schema

2nd model : Newsletter having normal fields and embedded field i.e. embedded to _Newsletter embedded schema 3rd Model : _Newsletter embedded having normal fields

[SemanticEntity(Vocab = "www.sdl.com/web/schemas/core", EntityName = "NewsletterContainer", Prefix = "nlc", Public = true)] 
public class NewsletterContainer : EntityModel
{
    [SemanticProperty("nlc:date")]
    public string Date { get; set; }

    [SemanticProperty("nlc:newsletter_components")] 
    public List<Newsletter> Newsletter_Components { get; set; }
}


[SemanticEntity(Vocab = "www.sdl.com/web/schemas/core", EntityName = "Newsletter", Prefix = "nsl", Public = true)] 
public class Newsletter : EntityModel
{
    [SemanticProperty("nsl:title")] 
    public string Title { get; set; }

    [SemanticProperty("nsl:newsletter")] 
    public List<_Newsletter> News_letter { get; set; }
}

[SemanticEntity(Vocab = "www.sdl.com/web/schemas/core", EntityName = "Newsletter", Prefix = "nsl", Public = true)] 
public class _Newsletter : EntityModel
{
    [SemanticProperty("nsl:text")] 
    public string Text { get; set; }

    [SemanticProperty("nsl:image")] 
    public Image Image_Link { get; set; }
}

Entity View code:

@if (Model != null)
{
  <div class="newsletter" @Html.DxaEntityMarkup()>
    <div class="title-date">
      <div @Html.DxaPropertyMarkup(() => Model.Date)>
        <p class="date">@String.Format("{0:MMM. dd, yyyy}", Convert.ToDateTime(Model.Date))</p>
      </div>            
      <div class="clear"></div>
    </div>
    <!-- Newsletter, Top Bar -->
    <div class="newsletter-top-bar">
      <!-- Main header jump nav -->
      <ul @Html.DxaPropertyMarkup(() => Model.Newsletter_Components)>
        <!-- Output all main headers. Jump Section -->
        @for (int index = 0; index < @Model.Newsletter_Components.Count; index++)
        {
          if (Model.Newsletter_Components[index].Title != null)
          {
            <li @Html.DxaPropertyMarkup(() => Model.Newsletter_Components[index].Title)><a href='@string.Format("#section{0}", (index+1).ToString())'>@Model.Newsletter_Components[index].Title</a></li>                                                 
          }
        }
        <!-- /Output all main headers -->
      </ul>
      <!-- /Main header jump nav -->
    </div>
    <!-- /Newsletter, Top Bar -->
    <!-- Subsection Jump Nav -->
    <div class="newsletter-jumpnav third-menu">
      <!-- Subsection Jump Navigation loop -->
      @for (int index = 0; index < @Model.Newsletter_Components.Count; index++)
      {
        <div class="newsletter-jumpnav-block">
          @if (Model.Newsletter_Components[index].Title != null)
          {
            <div @Html.DxaPropertyMarkup(() => Model.Newsletter_Components[index].Title)>
              <h2>@Model.Newsletter_Components[index].Title</h2>
            </div>                  
          }
        </div>
      }
      </div>
      <hr />
      <!-- /Subsection Jump Nav -->
      <!-- Newsletter Main Content -->
      <div class="newsletter-content">
        <!-- Section Title Loop-->
        @for (int index = 0; index < @Model.Newsletter_Components.Count; index++)
        {
          <div class="newsletter-content-title">
            <!-- Section Title-->
            @if (Model.Newsletter_Components[index].Title != null)
            {
              <a href="#" name='@string.Format("section{0}",(index+1).ToString())'></a>
              <div @Html.DxaPropertyMarkup(() => Model.Newsletter_Components[index].Title)>
                <h2>@Model.Newsletter_Components[index].Title</h2>
              </div>                                               
            }
          </div>
          <!-- Each Section Title Content-->
          for (int subIndex = 0; subIndex < @Model.Newsletter_Components[index].News_letter.Count; subIndex++)
          {
            <div class="rtf">
              <!-- Each Section Title Content Image or Not Check-->
              @if (Model.Newsletter_Components[index].News_letter[subIndex].Image_Link != null)
              {
                <div class="article">
                  <div @Html.DxaPropertyMarkup(() => Model.Newsletter_Components[index].News_letter[subIndex].Image_Link)>
                    <img src="@Model.Newsletter_Components[index].News_letter[subIndex].Image_Link.Url" alt="@Model.Newsletter_Components[index].News_letter[subIndex].Image_Link.Alternate_Text" class="image" />
                  </div>
                  <div class="article-content">
                    <h2>Article, Image Left</h2>
                    <hr class="article-underline" />
                    <div class="rtf">
                      @if (Model.Newsletter_Components[index].News_letter[subIndex].Text != null)
                      {
                        <div @Html.DxaPropertyMarkup(() => Model.Newsletter_Components[index].News_letter[subIndex].Text)>
                          @Html.DxaRichText(@Model.Newsletter_Components[index].News_letter[subIndex].Text)
                        </div>
                      }
                    </div>
                  </div>
                </div>
              }
              else
              {
                if (Model.Newsletter_Components[index].News_letter[subIndex].Text != null)
                {
                  <div @Html.DxaPropertyMarkup(() => Model.Newsletter_Components[index].News_letter[subIndex].Text)>
                    @Html.DxaRichText(@Model.Newsletter_Components[index].News_letter[subIndex].Text)
                  </div>
                }
              }
            </div>
          </div>
        }
      }
    </div>
    <!-- /Newsletter Main Content -->
  </div>
}

We are getting editable option to NewsletterContainer model only for the Date field and not getting the edit option for List or Linked Components.

The Linked Components like Newsletter and _Newsletter are not editable.

Enable Inline Editing is checked for all the fields in all three Schemas.

Answer 1

You need to add the DXAPropertyMarkup in the right place. As you are using multiple linked component field, so I will suggest you to add markup in the div immediately after the for loop -

it will be something like [Sample Code] -

@for (int i = 0; i < Model.LinkedComponent.Count; i++)
            {
                LinkedComponentModel linkedComponent = Model.LinkedComponent[i];

                <div @Html.DxaPropertyMarkup(() => Model.LinkedComponent, i)>
                    <span @Html.DxaPropertyMarkup(() => linkedComponent.LinkText)>@linkedComponent.LinkText</span>
                </div>
            }