看似簡單的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局部視圖問題

回答

相關問題