Видимо, простой вопрос с вопросом MVC

Question

Я пытаюсь отобразить свои данные (изображения) в двух столбцах таблицы в моем частичном представлении. Код ниже не работает, поскольку он отображает каждое изображение в своей строке. Что мне не хватает?

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 
<%@ Import Namespace="ULS_Site.Models"%> 

<%var alternating = false;%> 
<table> 
<% foreach (var item in ViewData.Model as IEnumerable<image>) %> 
<%{%> 
<%if (!alternating) %> 
<%{ %> 
<tr> 
<%}; %> 

<td> 
    <a href="<%= item.image_path %>" target="_blank" > 
    <img src="<%= item.image_path %>" alt=" " width="100" /> 
    </a> 
</td> 
<%if (!alternating) %> 
<%{ %> 
</tr> 
<%}; %> 
<%alternating = !alternating;%> 
<%}%> 
</table> 

Answer 1

<%if (alternating) %> 
<%{ %> 
</tr> 
<%}; %> 

EDIT: При закрытии tr, вам нужно будет отменить условие.
Это не закроет tr, пока не будет выполнена линия alternative = !alternating;.

EDIT2: Кроме того, почему вы открываете и закрываете <%= и %> на каждой линии, когда вы все еще находитесь в режиме кода?

i.e Нет ли там чистого способа написать его?

<%if (alternating) 
{%> 
</tr> 
<%}; %> 

Answer 2

Попробуйте это, это решит вашу проблему с рендерингом двух столбцов в строке в таблице.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 

<%@ Import Namespace="ULS_Site.Models"%> 

<%var alternating = true;%> 

<table> 
<% foreach (var item in ViewData.Model as IEnumerable<image>) %> 
<%{%> 
<%if (alternating) %> 
<%{ %> 
<tr> 
<%}; %> 
<td> 
<a href="<%= item.image_path %>" target="_blank" >  
<img src="<%= item.image_path %>" alt=" " width="100" /> 
</a> 
</td> 
<%if (!alternating) %> 
<%{ %> 
</tr> 
<%}; %> 
<%alternating = !alternating;%> 
<%}%> 
</table> 

Answer 3

Я рекомендую подход, основанный на читаемости. В дополнение к этим другим душам вы также можете использовать список и отображать каждый элемент внутри тега LI, чтобы лучше наблюдать за разделением проблем. Некоторые стандарты на основе CSS и опрыскивание JQuery может сохранить код маленький и легкий для чтения:

<ul> 
    <% foreach (var item in ViewData.Model as IEnumerable<image>) { %> 
    <li> 
     <a href="<%= item.urlPath %>"> 
     <img src="<%= item.imagePath %>" alt="" /></li> 
    <% } %> 
</ul> 

CSS-это может быть так просто, как это:

ul { 
    width:200px; /* twice the individual LI width */ 
} 
ul li { 
    height:60px; 
    width:100px; 
    margin:0; 
    padding:0; 
    float:left; 
    list-style-type:none; 
} 

И теперь, когда у вас есть необработанный вывод и структурированная обработка, немного jQuery может позаботиться о ваших альтернативных потребностях дисплея. Это даст вам две вертикальные колонны:

<script type="text/javascript"> 
    $(function() { 
    $("li:odd").css("background-color", "#F00"); 
    }); 
</script> 

Немного другой селектор jQuery может рисовать цвета на чередующихся горизонтальных рядах.