使用部分

时间:2018-01-13 13:18:25

标签: html css asp.net-mvc razor

我想用mvc razor创建一个博客列表。我有部分用于调用博客项目和布局作为母版页。我想使用拉链布局(第一项推到右侧辅助推到左侧并重置下一项)。

布局

@foreach (var item in Model.Listings)
{
     @Html.Partial("~/Views/Listing/_ListingCard.cshtml", item)
}



部分

       <div class="card card-plain card-blog">
        <div class="row">
            <div class="col-md-5">
                <div class="card-image">
                 ///MyCodes
                </div>
            </div>
            <div class="col-md-7">
                <div class="card-body">
                ///MyCodes
                </div>
            </div>
        </div>
      </div>

我希望每个循环更改col-md-5 col-md-7
没有JS,我可以这样做吗? 好吗?

1 个答案:

答案 0 :(得分:0)

好的,我找到了办法。

@{
   int counter = 0;
}
@foreach (var item in Model.ListingsPageList.Take(5))
{
    counter++;
    @Html.Partial("~/Views/Listing/_ListingCard.cshtml", item, new ViewDataDictionary { { "counter", counter } })
    if(counter > 1)
    {
       counter = 0;
    }
}

<强>部分

  <div class="card card-plain card-blog">
    <div class="row">
        <div class="@(ViewBag.counter > 1 ? "col-md-7":"col-md-5")>
            <div class="card-image">
             ///MyCodes
            </div>
        </div>
        <div class="@(ViewBag.counter > 1 ? "col-md-5":"col-md-7")>
            <div class="card-body">
            ///MyCodes
            </div>
        </div>
    </div>
  </div>