Question

我有一个侧边栏项目，其中包含评论列表。我希望这个项目只显示在开头有任何可用的评论，并且为了让我的模板工作，我必须为第一个评论添加不同的样式而不是其余的。所有评论都在我的模型上传递。

这是我的方法：

@if(Model.Comments?.Count > 0) {
<div class="sidebar_item">
    <div class="item_inner slider">
        <h4>See what students say:</h4>
        <div id="single_banner">
            <ul class="slides">
            @for (int i = 0; i < Model.Comments.Count; i++)
            {
                if (i > 0){ 
                    <li style="display:none;">
                }
                @if( i == 0)
                {
                    <li>
                }
                @Model.Comments[i].Comment
                    <div class="carousal_bottom">
                        <div class="thumb">
                            <img src="img/courses/testi_thumb.png" draggable="false" alt="" />
                        </div>
                        <div class="thumb_title">
                            <span class="author_name">@Model.Comments[i].Student</span>
                        </div>
                    </div>
                </li>
            }
            </ul>
        </div><!--end banner-->
    </div><!--slider-->
</div><!--end sidebar item-->
}

问题是这不起作用，我得到错误，一些花括号丢失或某些元素没有正确关闭。任何帮助表示赞赏。

Answer 1

我发现某些元素无法正常关闭的错误。

不建议使用以下代码，因为引擎不够智能，无法确定c＃代码中html元素的开头/结尾：

if (i > 0){ 
  <li style="display:none;">
}
@if( i == 0)
{
  <li>
}

所以我通常将逻辑直接放在标签中：

<li style="@(i > 0 ? "display:none;" : string.Empty)">

但是，在我看来，我并不是 logic 的粉丝。另外为了让事情更容易恕我直言，我会有一个评论显示模板。我个人认为没有充分的理由不使用课程。最终我的代码看起来像：

控制器：

foreach(var comment in Model.Comments)
{
   comment.IsVisible = comment == Model.Comments.First();
}

视图：

// Update Model with Property
// bool HasComments { get { return Comments.Any(); } }
// Then the code actually reads/documents itself

@if(Model.HasComments) {
<div class="sidebar_item">
    <div class="item_inner slider">
        <h4>See what students say:</h4>
        <div id="single_banner">
            <ul class="slides">
            @Html.DisplayFor(m => m.Comments);
            </ul>
        </div><!--end banner-->
    </div><!--slider-->
</div><!--end sidebar item-->
}

displaytemplates / comments.cshtml

@{ 
  // View logic, it only deals with html/css/javascript
  var liClass = model.IsVisible ? string.Empty : "is-not-visible"; 
}
<li class="@liClass">
  @Model.Comments[i].Comment
  <div class="carousal_bottom">
    <div class="thumb">
      <img src="img/courses/testi_thumb.png" draggable="false" alt="" />
    </div>
    <div class="thumb_title">
      <span class="author_name">@Model.Student</span>
    </div>
  </div>
</li>

更少的代码和更多的封装。

我还建议您阅读Philip Walton - Decoupling Your HTML, CSS, and JavaScript

Razor语法

1 个答案: