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

我想在我的局部视图中的表格的两列中显示我的数据（图像）。下面的代码似乎不工作，因为它显示每个图像在自己的行。我错过了什么？看似简单的MVC局部视图问题

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

来源

2009-11-07 MikeD

它产生了什么HTML？从那里，你可以确定这是浏览器问题还是HTML生成问题。 – jrockway 2009-11-07 18:19:05

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

编辑：当关闭tr，你需要扭转的条件。
这将不会关闭tr，直到执行alternative = !alternating;行。

编辑2：此外，为什么你打开和关闭<%=和%>在每一行，当你仍然在代码模式？

即没有一个干净的方式来写它？

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

来源

2009-11-07 18:27:56 shahkalpesh

伟大 - 感谢，工作。我会根据您的建议清理代码。 – MikeD 2009-11-07 20:50:52

试试这个，这将解决您的问题，在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>

来源

2009-11-07 18:37:01 Webking

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

来源

2009-11-07 21:30:54 a7drew

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

回答

相关问题