Getting index value on razor foreach

Question

I m iterating a List lt T gt  in a razor foreach loop in my view which renders a partial  In the partial I m rendering a single record for which I want to have 4 in a row in my view  I have a css class for the two end columns so need to determine in the partial whether the call is the 1st or the 4th record  What is the best way of identifying this in my partial to output the correct code   This is my main page which contains the loop    foreach  var myItem in Model Members              if i   1          lt div class  grid 20  gt           lt  -- Start Row -- gt             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          lt div class  clear  gt  lt  div gt           lt  -- End Row -- gt           lt  div gt       I figure I can create a int that I can update on each pass and render the text no problem here but it s passing the integer value into my partial I m more concerned about  Unless there s a better way   Here is my partial      switch   case 1           lt text gt           lt div class  grid 4 alpha  gt           lt  text gt  break  case 4           lt text gt           lt div class  grid 4 omega  gt           lt  text gt  break  default           lt text gt           lt div class  grid 4  gt           lt  text gt  break              lt img src  Content 960-grid spacer gif  style  width 130px  height 160px  background-color  fff  border 10px solid  d3d3d3     gt           lt p gt  lt a href  member-card html  gt  Model Name lt  a gt  lt br  gt           Model Job lt br  gt           Model Location lt  p gt   lt  div gt    Not sure if I m having a blonde day today and this is frightfully easy but I just can t think of the best way to pass the int value in  Hope someone can help

User · Answer

You could also use deconstruction and tuples and try something like this:

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

For more info you can have a look at this link

User · Answer

I prefer to use this extension method  public static class Extensions       public static IEnumerable lt  T item  int index  gt  WithIndex lt T gt  this IEnumerable lt T gt  self            gt  self Select  item  index    gt   item  index       Source  https   stackoverflow com a 39997157 3850405 Razor   using Project Shared Helpers    foreach  var  item  index  in collection WithIndex       lt p gt      Name   item Name Index   index  lt  p gt

User · Answer

All of the above answers require logic in the view  Views should be dumb and contain as little logic as possible  Why not create properties in your view model that correspond to position in the list eg   public int Position  get  set    In your view model builder you set the position 1 through 4   BUT    there is even a cleaner way  Why not make the CSS class a property of your view model  So instead of the switch statement in your partial  you would just do this    lt div class   Model GridCSS  gt    Move the switch statement to your view model builder and populate the CSS class there

User · Answer

Is there a reason you re not using CSS selectors to style the first and last elements instead of trying to attach a custom class to them  Instead of styling based on alpha or omega  use first-child and last-child   http   www quirksmode org css firstchild html

User · Answer

this gets you both the item  myItem value  and its index  myItem i   foreach  var myItem in Model Members Select  value i    gt  new  i  value           lt li gt The index is  myItem i and a value is  myItem value Name lt  li gt      More info on my blog post http   jimfrenette com 2012 11 razor-foreach-loop-with-index

User · Answer

Take a look at this solution using Linq  His example is similar in that he needed different markup for every 3rd item   foreach  var myItem in Model Members Select x i    gt  new  Member   x  Index   i

User · Answer

Very Simple                    int i   0           foreach  var item in Model                        lt tr gt             lt td gt   i   i   1  lt  td gt              lt  tr gt

User · Answer

In case you want to count the references from your model  ie  Client has Address as reference so you wanna count how many address would exists for a client  in a foreach loop at your view such as     foreach  var item in Model                                                         lt tr gt                                   lt td gt                                       Html DisplayFor modelItem   gt  item DtCadastro                                   lt  td gt                                    lt td style  width 50   gt                                       Html DisplayFor modelItem   gt  item DsLembrete                                   lt  td gt                                   lt td gt                                       Html DisplayFor modelItem   gt  item DtLembrete                                   lt  td gt                                   lt td gt                                                                                  var contador   item LembreteEnvolvido Where w   gt  w IdLembrete    item IdLembrete  Count                                                                               lt button class  btn-link associado  data-id   item IdLembrete  data-path   LembreteEnvolvido Index  item IdLembrete  gt  lt i class  fas fa-search  gt  lt  i gt   contador lt  button gt                                       lt button class  btn-link associar  data-id   item IdLembrete  data-path   LembreteEnvolvido Create  item IdLembrete  gt  lt i class  fas fa-plus  gt  lt  i gt  lt  button gt                                   lt  td gt                                   lt td class  text-right  gt                                       lt button class  btn-link delete  data-id   item IdLembrete  data-path   Lembretes Delete  item IdLembrete  gt Excluir lt  button gt                                   lt  td gt                               lt  tr gt                              do as coded      var contador   item LembreteEnvolvido Where w   gt  w IdLembrete    item IdLembrete  Count       and use it like this    lt button class  btn-link associado  data-id   item IdLembrete  data-path   LembreteEnvolvido Index  item IdLembrete  gt  lt i class  fas fa-search  gt  lt  i gt   contador lt  button gt    ps  don t forget to add INCLUDE to that reference at you DbContext inside  for example  your Index action controller  in case this is an IEnumerable model

User · Answer

int i   0     foreach var myItem in Model Members           lt span gt  i lt  span gt         i                    Use   i   to increment value

User · Answer

IndexOf seems to be useful here    foreach  myItemClass ts in Model ItemList Where x   gt  x Type     something                 int currentIndex   Model ItemList IndexOf ts           Html HiddenFor x  gt Model ItemList currentIndex  Type

User · Answer

Or you could simply do this    foreach var myItem in Model Members             lt span gt  Model Members IndexOf myItem  lt  span gt

[asp.net-mvc] Getting index value on razor foreach

Examples related to asp.net-mvc

Examples related to asp.net-mvc-2

Examples related to razor

Examples related to partial-views