Кажущийся простой вопрос о частичном представлении 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>
<%}; %>

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

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

т.е. разве нет чистого способа написать?

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

Answer 2

Я рекомендую подход, основанный на читабельности. В дополнение к этим другим душу, вы также можете использовать список и отобразить каждый элемент внутри тега 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 может рисовать цвета на альтернативных горизонтальных рядах.

Answer 3

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

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