在 razor foreach 上获取索引值

Question

我正在我的视图中的 razor foreach 循环中迭代

List<T>

，这会渲染部分内容。在部分中，我正在渲染一条记录，我希望在视图中连续显示 4 条记录。我有一个用于两端列的 css 类，因此需要在部分中确定调用是第一条记录还是第四条记录。在我的部分中识别这一点以输出正确代码的最佳方法是什么？

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

@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>

}

我想我可以创建一个 int ，我可以在每次传递时更新它，并且在这里渲染文本没有问题，但它将整数值传递到我更关心的部分中。除非有更好的办法。

这是我的部分：

@{
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 值的最佳方法。希望有人可以提供帮助。

Answer 1

 @{int i = 0;}
 @foreach(var myItem in Model.Members)
 {
     <span>@i</span>
     i++;
 }

Answer 2

//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>
}

更多信息请参阅我的博客文章 http://jimfrenette.com/2012/11/razor-foreach-loop-with-index/

Answer 3

或者你可以简单地这样做：

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

Answer 4

看看这个使用 Linq 的解决方案。他的示例很相似，因为他需要为每个第三个项目使用不同的标记。

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

Answer 5

您还可以使用解构和元组并尝试这样的事情：

@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>
  }
}

欲了解更多信息，您可以查看此链接

Answer 6

您不使用 CSS 选择器来设置第一个和最后一个元素的样式，而不是尝试将自定义类附加到它们上，是否有原因？不要使用基于 alpha 或 omega 的样式，而是使用第一个子级和最后一个子级。

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

Answer 7

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

public int Position {get; set}

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

但是..甚至还有一种更干净的方法。为什么不让 CSS 类成为视图模型的属性呢？因此，您只需执行以下操作即可代替部分中的 switch 语句：

<div class="@Model.GridCSS">

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

Answer 8

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)

...

Answer 9

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

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>
}

Answer 10

非常简单：

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

Answer 11

如果您想在您的视图中的 foreach 循环中计算模型中的引用（即：客户端有地址作为引用，因此您想计算客户端存在多少个地址），例如：

 @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();}

并像这样使用它：

<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 添加到 DbContext 内部的引用中，例如，索引操作控制器，以防这是 IEnumerable 模型。

Answer 12

在 Blazor 服务器应用程序中，我必须执行以下操作：

@{int i = 0;}
@foreach(var item in List)
{
    var index = i; // Had to add this line, and then pass `index` instead of `i`
    <span @onmouseover="@(() => HandleMouseover(index))">Item</span>
    i++;
}

因为 lambda 表达式会捕获相同的变量

，该变量在循环的每次迭代中都会递增。
当 lambda 最终执行时，它们都引用同一个

变量，该变量将具有其最终值。

在 razor foreach 上获取索引值

问题描述投票：0回答：12

12个回答

最新问题

在 razor foreach 上获取索引值

问题描述 投票：0回答：12

12个回答

最新问题

问题描述投票：0回答：12