Aparentemente simple vista parcial pregunta MVC

Question

Estoy tratando de mostrar mis datos (imágenes) en dos columnas de una tabla en mi vista parcial. El código de abajo no parece funcionar ya que muestra cada imagen en su propia fila. ¿Qué me falta?

<%@ 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: Al cerrar la tr, tendrá que invertir la condición
. Esto no va a cerrar la tr hasta el alternative = !alternating; línea ejecutada.

Edit2:? Además, ¿por qué estás apertura y cierre <%= y %> en cada uno de la línea, cuando está todavía en el modo de código

es decir, no hay una manera limpia de escribirlo?

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

Answer 2

Yo recomiendo un enfoque impulsado por la legibilidad. Además de estos otros Soulutions, también puede utilizar la lista y mostrar cada elemento dentro de una etiqueta LI para observar la separación de las preocupaciones descarta un poco mejor. Algunos estándares CSS basado y una pizca de jQuery puede mantener el código pequeño y fácil de leer:

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

El CSS es puede ser tan simple como esto:

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

Y ahora que tienes la salida pura y estructurada manejado, un poco de jQuery puede hacerse cargo de sus necesidades de visualización alternativos. Esto le dará dos columnas verticales:

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

Un selector de jQuery ligeramente diferente puede pintar colores en filas horizontales alternas.

Answer 3

Prueba esto, esto va a resolver su problema con la representación de dos columnas por fila en el Tablee.

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