Getting index value on razor foreach

在我的视图中，我在一个剃须刀前刀环中迭代一个 List<T>，它呈现了一个部分。在这个部分中，我呈现了一条记录，我希望在我的视图中一行中有4条记录。我有一个针对两个结束列的 css 类，所以需要在部分中确定调用是第1条还是第4条记录。什么是最好的方法来识别我的部分输出正确的代码？

这是我的主页，其中包含循环:

@foreach (var myItem in Model.Members){


//if i = 1
<div class="grid_20">
<!-- Start Row -->


//is there someway to get in for i = 1 to 4 and pass to partial?
@Html.Partial("nameOfPartial", Model)


//if i = 4 then output below and reset i to 1
<div class="clear"></div>
<!-- End Row -->
</div>


}

我想我可以创建一个整型数，我可以更新每次传递和呈现文本在这里没有问题，但它传递整型值到我更关心的部分。除非有更好的办法。

以下是我的部分观点:

@{
switch()
case 1:
<text>
<div class="grid_4 alpha">
</text>
break;
case 4:
<text>
<div class="grid_4 omega">
</text>
break;
default:
<text>
<div class="grid_4">
</text>
break;
}


<img src="Content/960-grid/spacer.gif" style="width:130px; height:160px; background-color:#fff; border:10px solid #d3d3d3;" />
<p><a href="member-card.html">@Model.Name</a><br/>
@Model.Job<br/>
@Model.Location</p>
</div>

不确定我今天是否有一个金发的一天，这非常简单，但我就是想不出传递 int 值的最佳方法。希望有人能帮忙。

137056 次浏览
小开

看看 this solution using Linq.，他的例子是相似的，他需要不同的标记，每3个项目。

foreach( var myItem in Model.Members.Select(x,i) => new {Member = x, Index = i){
...
}
小开

您没有使用 CSS 选择器设置第一个和最后一个元素的样式，而是试图将自定义类附加到这些元素上，是否存在这样的原因？不要使用基于 alpha 或 omega 的样式，而是使用第一个孩子和最后一个孩子。

Http://www.quirksmode.org/css/firstchild.html

小开 
//this gets you both the item (myItem.value) and its index (myItem.i)
@foreach (var myItem in Model.Members.Select((value,i) => new {i, value}))
{
<li>The index is @myItem.i and a value is @myItem.value.Name</li>
}

More info on my blog post Http://jimfrenette.com/2012/11/razor-foreach-loop-with-index/

小开
最佳答案 
 @{int i = 0;}
@foreach(var myItem in Model.Members)
{
<span>@i</span>
i++;
}
小开

IndexOf 在这里似乎很有用。

@foreach (myItemClass ts in Model.ItemList.Where(x => x.Type == "something"))
{
int currentIndex = Model.ItemList.IndexOf(ts);
@Html.HiddenFor(x=>Model.ItemList[currentIndex].Type)

...

小开

或者你可以这样做:

@foreach(var myItem in Model.Members)
{
<span>@Model.Members.IndexOf(myItem)</span>
}
小开

非常简单:

     @{
int i = 0;
foreach (var item in Model)
{
<tr>
<td>@(i = i + 1)</td>`
</tr>
}
}`
小开

以上所有答案都需要视图中的逻辑。视图应该是哑的，并且尽可能少地包含逻辑。为什么不在视图模型中创建与列表中的位置相对应的属性，例如:

public int Position {get; set}

在视图模型构建器中，您设置了位置1到4。

但是。.还有更干净的方法。为什么不将 CSS 类作为视图模型的一个属性呢？所以不用你的部分中的 switch 语句，你只需要这样做:

<div class="@Model.GridCSS">

将 switch 语句移动到视图模型构建器并在那里填充 CSS 类。

小开

如果您想要在 foreach 循环中计算来自您的模型的引用(即: Client 具有 Address 作为引用，因此您想要计算客户端的地址将存在多少) ，那么在您的视图中可以使用以下方式:

 @foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.DtCadastro)
</td>


<td style="width:50%">
@Html.DisplayFor(modelItem => item.DsLembrete)
</td>
<td>
@Html.DisplayFor(modelItem => item.DtLembrete)
</td>
<td>
@{
var contador = item.LembreteEnvolvido.Where(w => w.IdLembrete == item.IdLembrete).Count();
}
<button class="btn-link associado" data-id="@item.IdLembrete" data-path="/LembreteEnvolvido/Index/@item.IdLembrete"><i class="fas fa-search"></i> @contador</button>
<button class="btn-link associar" data-id="@item.IdLembrete" data-path="/LembreteEnvolvido/Create/@item.IdLembrete"><i class="fas fa-plus"></i></button>
</td>
<td class="text-right">
<button class="btn-link delete" data-id="@item.IdLembrete" data-path="/Lembretes/Delete/@item.IdLembrete">Excluir</button>
</td>
</tr>
}

按照编码做:

@{ var contador = item.LembreteEnvolvido.Where(w => w.IdLembrete == item.IdLembrete).Count();}

and use it like this:

<button class="btn-link associado" data-id="@item.IdLembrete" data-path="/LembreteEnvolvido/Index/@item.IdLembrete"><i class="fas fa-search"></i> @contador</button>

Ps: 不要忘记将 INCLUDE 添加到您的引用中，例如，您的 Index 操作控制器中的 DbContext，以防这是一个 IEnumable 模型。

小开

你也可以使用解构和元组，尝试下面的方法:

@foreach (var (index, member) in @Model.Members.Select((member, i) => (i, member)))
{
<div>@index - @member.anyProperty</div>


if(index > 0 && index % 4 == 0) { // display clear div every 4 elements
@: <div class="clear"></div>
}
}

更多的信息，你可以看看这个 链接

小开

我更喜欢使用这种扩展方法:

public static class Extensions
{
public static IEnumerable<(T item, int index)> WithIndex<T>(this IEnumerable<T> self)
=> self.Select((item, index) => (item, index));
}

来源:

Https://stackoverflow.com/a/39997157/3850405

剃刀:

@using Project.Shared.Helpers


@foreach (var (item, index) in collection.WithIndex())
{
<p>
Name: @item.Name Index: @index
</p>
}

提交答案