transformation - Kentico Repeater -Help writing transformation and including show/hide

Question

I have created a repeater as the page type, with a transformation for which I need to "show" the fields if the user clicks "Read More" and then hide if the user clicks "Read Less". I know how to do this in html/js, but not quite sure in a transformation. I am new to writing them, but need to do it this way so that other team members can add stories via a form format. Here is what I have written so far. Each area that is in parenthesis is a field in the page type. Can someone look at my code first to see if I wrote it correctly, and also tell me how to create the show/hide as part of it.

   <li>
  <div class="Alumi-stories <%# Eval<string>("CssClass") %>">
    <%# String.IsNullOrEmpty(Eval<string>("Image1")) ? "" : "<img class=\"Image\" alt=\"" + Eval("ImageAlt") + "\" src=\"" + Eval("Image") + "\" />" %>
    <%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "<span class=\"Name\">" + Eval("Name") + "</span>" %>
    <hr class="grn200">
    <%# String.IsNullOrEmpty(Eval<string>("Quote"")) ? "" : "<div class=\"Quote\">" + Eval("Quote") + "</div>" %>
    <%# String.IsNullOrEmpty(Eval<string>("Attended"")) ? "" : "<div class=\"Attended\">" + Eval("Attended") + "</div>" %>
    <%# String.IsNullOrEmpty(Eval<string>("Studied"")) ? "" : "<div class=\"Studied\">" + Eval("Studied") + "</div>" %>
    <%# String.IsNullOrEmpty(Eval<string>("Introduction")) ? "" : "<div class=\"Introduction\">" + Eval("Introduction") + "</div>" %>

    <div class="alumiText <%# Eval<string>("CssClass") %>" onclick="read-more-show(this);">
    <p><a class="read-more-show hide" href="#">Read More</a> <span class="read-more-content"></p>

    <%# String.IsNullOrEmpty(Eval<string>("Question1")) ? "" : "<div class=\"Question1\">" + Eval("Question1") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer1")) ? "" : "<div class=\"Answer1\">" + Eval("Answer1") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question2")) ? "" : "<div class=\"Question2\">" + Eval("Question2") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer2")) ? "" : "<div class=\"Answer2\">" + Eval("Answer2") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question3")) ? "" : "<div class=\"Question3\">" + Eval("Question3") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer3")) ? "" : "<div class=\"Answer3\">" + Eval("Answer3") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question4")) ? "" : "<div class=\"Question4\">" + Eval("Question4") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer4")) ? "" : "<div class=\"Answer4\">" + Eval("Answer4") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question5")) ? "" : "<div class=\"Question5\">" + Eval("Question5") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer5")) ? "" : "<div class=\"Answer5\">" + Eval("Answer5") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question6")) ? "" : "<div class=\"Question6\">" + Eval("Question6") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer6")) ? "" : "<div class=\"Answer6\">" + Eval("Answer6") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question7")) ? "" : "<div class=\"Question7\">" + Eval("Question7") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer7")) ? "" : "<div class=\"Answer7\">" + Eval("Answer7") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question8")) ? "" : "<div class=\"Question8\">" + Eval("Question8") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer8")) ? "" : "<div class=\"Answer8\">" + Eval("Answer8") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question9")) ? "" : "<div class=\"Question9\">" + Eval("Question9") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer9")) ? "" : "<div class=\"Answer9\">" + Eval("Answer9") + "</div>" %>

    <%# String.IsNullOrEmpty(Eval<string>("Question10")) ? "" : "<div class=\"Question10\">" + Eval("Question10") + "</div>" %>
    <hr class="grn100">
    <%# String.IsNullOrEmpty(Eval<string>("Answer10")) ? "" : "<div class=\"Answer10\">" + Eval("Answer10") + "</div>" %>

    <p><a class="read-more-hide hide" href="#">Read Less</a></span></p>
    </div>
</div>
</li>

标签： transformationrepeatershow-hidekentico

Answer 1

我看到的2个问题：

使用此示例，您需要确保在处理该Eval("Name")值时，它是作为字符串完成的，因为这就是您要连接的内容。

<%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "<span class=\"Name\">" + Eval("Name") + "</span>" %>

它应该如下所示：

<%# String.IsNullOrEmpty(Eval<string>("Name")) ? "" : "<span class=\"Name\">" + Eval<string>("Name") + "</span>" %>

第二个问题是</span>标签后缺少右括号。

最后一项是您可以使用开箱即用的转换方法稍微简化这一点。它可能看起来像这样：

<%# IfEmpty(Eval("Name"), "", "<span class='Name'>" + Eval<string>("Name") + "</span>") %>