我试图在局部视图中的表格的两列中显示我的数据(图像)。下面的代码似乎不起作用,因为它在自己的行中显示每个图像。我错过了什么?
<%@ 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>
答案 0 :(得分:2)
<%if (alternating) %>
<%{ %>
</tr>
<%}; %>
编辑:关闭tr
时,您需要撤消条件
这不会关闭tr
直到行alternative = !alternating;
执行。
EDIT2:另外,当你还处于代码模式时,为什么要在每一行上打开和关闭<%=
和%>
?
那是不是有一种干净的方式来写它?
<%if (alternating)
{%>
</tr>
<%}; %>
答案 1 :(得分:1)
我推荐一种可读性驱动的方法。除了这些其他元素之外,您还可以使用列表并显示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选择器可以在备用水平行上绘制颜色。
答案 2 :(得分:0)
试试这个,这将解决您在表格中每行渲染两列的问题。
<%@ 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>