Razor Просмотр строк динамической таблицы - PullRequest
Новая
       11

Razor Просмотр строк динамической таблицы

7 голосов
/ 08 февраля 2012

Я хочу иметь таблицу в своем представлении, которая собирается поместить 3 элемента из моей Модели в каждую строку. Таким образом, способ, которым я собирался сделать это, состоит в том, чтобы пройтись по модели, и внутри цикла foreach проверить установленную мной переменную count. Если count mod 3 == 0, я бы сделал что-то вроде </tr><tr>, чтобы начать новую строку. Это работает не так, как я хочу, потому что у меня будет } после <tr>. Поэтому в основном мой вопрос заключается в том, как мне создать динамическую таблицу внутри бритвенного представления на основе элементов модели, где в каждой строке есть 3 элемента? 

@{
int count = 0;
<div>
<table>
<tr>
@foreach (var drawing in Model)
{
   <td style="width:240px;margin-left:30px; margin-right:30px;">
   <img src="@Url.Action("GetImage", "Home", new { id = drawing.drw_ID })" alt="drawing" /> 
   </td>
   count++;
   if(count%3==0)
   {
      </tr>
      <tr>
   }
} 
</tr>
</table>
</div>
}

Может быть, есть гораздо более простой способ сделать это, о котором я не думаю

Ответы [ 5 ]

14 голосов
/ 08 февраля 2012

Как насчет использования двух циклов - это сделает ваш документ более удобным и сделает его более читабельным. Кроме того, он решает проблемы, которые возникают, если количество строк не делится на три: 

<div>
<table>
@for(int i = 0; i <= (Model.Count - 1) / 3; ++i) {
  <tr>
  for(int j = 0; j < 3 && i + j < Model.Count; ++j) {
    <td style="width:240px;margin-left:30px; margin-right:30px;">
      <img src="@Url.Action("GetImage", "Home", new { id = Model[i + j].drw_ID })" alt="drawing" /> 
    </td>
   }
   </tr>
}
</table>
</div>

Отредактировано, чтобы отразить вставленный вами код. Обратите внимание, что предполагается, что модель реализует IList или массив

7 голосов
/ 02 апреля 2012

Может быть, это решение, которое вы ищете, работает для меня 

 @{ 
int count = 0; 
**
var tr = new HtmlString("<tr>");
var trclose = new HtmlString("</tr>");
**
<div> 
<table> 
<tr> 
@foreach (var drawing in Model) 
{ 
   <td style="width:240px;margin-left:30px; margin-right:30px;"> 
   <img src="@Url.Action("GetImage", "Home", new { id = drawing.drw_ID })" alt="drawing" />  
   </td> 
   count++; 

   if(count%3==0) 
   { 
     **
     trclose 
     tr
     **
   } 
}  
</tr> 
</table> 
</div> 
}
2 голосов
/ 05 сентября 2015

Проверьте это, это должно работать для вас !!! 

<h2>Index</h2>
<table>
    <tr>
        @{
            var index = 0;
        }

        @foreach (int num in Model)
        {
            if ((index % 10) == 0)
            {
            @Html.Raw("</tr>");
            @Html.Raw("<tr>");


            }
            <td>
                <h2>@num</h2>
            </td>
            index++;
        }
    </tr>
</table>
0 голосов
/ 02 мая 2016 
@{ int counter = 0;}
<div>
    <table>
        @for(int i = 0; i <= (Model.Count - 1) / 3; ++i) {
            <tr>
                 for(int j = 0; j < 3; ++j) {
                      <td style="width:240px;margin-left:30px; margin-right:30px;">
                          @Model[counter]
                      </td>
                      counter++;
                 }
             </tr>
        }
    </table>
</div>
0 голосов
/ 25 февраля 2016

Решение @christian у меня сработало. Я не был уверен в «trclose» и «tr», поэтому разместил здесь решение, которое работало для меня в виде бритвы. 

<table>
        <tr><td><input type="checkbox" id="chkAssetCategories" />&nbsp;SELECT ALL</td></tr>
        <tr>
         @{
             var count=0;
            foreach (var item in Model.AssetCategories)
                {
                    <td><input type="checkbox" class = "Catgories" id='@item.ID' value ='@item.ID' /><label>@item.Name</label></td>
                    if (count%5 == 0)
                    {
                        @:</tr><tr>
                    }
                    count++;
                }
         }
        </table>
...