Apparemment simple question de vue partielle MVC

Question

Je suis en train d'afficher mes données (images) dans deux colonnes d'une table à mon avis partielle. Le code ci-dessous ne semble pas fonctionner comme il affiche chaque image dans sa propre ligne. Qu'est-ce que je manque?

<%@ 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: Lors de la fermeture du tr, vous devez inverser la condition
. Ce ne fermera pas la tr jusqu'à la alternative = !alternating; ligne exécutée.

EDIT2: De plus, pourquoi ouverture et la fermeture <%= et %> sur chaque ligne, lorsque vous êtes toujours en mode code

i.e. est pas là une manière propre à écrire?

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

Answer 2

Je recommande une approche axée sur la lisibilité. En plus de ces autres Soulutions, vous pouvez également utiliser la liste et afficher chaque élément à l'intérieur d'une balise LI pour observer la séparation des préoccupations règle un peu mieux. Certaines normes CSS basée et une pincée de jQuery peut conserver le code petit et facile à lire:

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

Le CSS est peut être aussi simple que cela:

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

Et maintenant que vous avez le résultat brut et structuré géré, un peu jQuery peut prendre soin de vos besoins d'affichage de remplacement. Cela vous donnera deux colonnes verticales:

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

A légèrement différent sélecteur jQuery peut peindre des couleurs sur des rangées horizontales alternées.

Answer 3

Essayez ceci, cela résoudra votre problème avec le rendu deux colonnes par ligne dans le 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>