看似简单的MVC局部视图问题答案

【问题标题】：Seemingly simple MVC partial view question看似简单的MVC局部视图问题
【发布时间】：2009-11-07 18:15:41
【问题描述】：

我正在尝试在我的局部视图中的表格的两列中显示我的数据（图像）。下面的代码似乎不起作用，因为它在自己的行中显示每个图像。我错过了什么？

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

【问题讨论】：

它生成了什么 HTML？从那里，您可以确定这是浏览器问题还是 HTML 生成问题。

标签： c# html asp.net-mvc foreach partial-views

【解决方案1】：

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

编辑：关闭tr 时，您需要反转条件。
这不会关闭tr，直到行alternative = !alternating; 执行。

EDIT2：另外，当您仍处于代码模式时，为什么要在每一行上打开和关闭 <%= 和 %>？

即没有一种干净的方式来编写它吗？

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

【讨论】：

太好了 - 谢谢 - 成功了。我也会根据你的建议清理代码。

【解决方案2】：

我推荐一种可读性驱动的方法。除了这些其他解决方案之外，您还可以使用 list 并在 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 选择器可以在交替的水平行上绘制颜色。

【讨论】：

【解决方案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>

【讨论】：