Question

我剛剛寫了可能存在的最微小的MVC代碼。它是：

<table>  
<tr> 
<% 
    int i = 0; 
    foreach(Thyla.Models.Tag tag in this.Model) 
    { 
     i += 1; 
%> 
<td> 
<span> 
    <input type="checkbox" name="TagSelector" id='<%= tag.TagName%>' value='<%= tag.TagName%>' /> 
    <label for="<%= tag.TagName%>" title="<%= tag.TagName%>"><%= tag.TagName%></label> 
</span> 
</td> 

     <%if (i % 5 == 0){%> 
     </tr><tr> 
     <%} %> 
    <%} %> 
<% if (i % 5 != 0){%></tr><%} %> 
</table> 

在ASP.NET MVC中製作具有指定列數的複選框列表的規範方法是什麼？

Answer 1

它真的需要5嗎？我問，因爲每個標籤都會有不同的寬度，所以無論如何它看起來都很粗糙。如果你有5個長標籤相鄰，他們可能會流入爲其他東西保留的空間，這就是爲什麼我認爲你在說5列。

你可能最終會看到一個蔬菜標籤出現在蔬菜貼上的標籤。然後，蔬菜和它的立柱之間會有巨大的差距。看起來有點奇怪。

我用了一個免費的。儘管我忘記了它來自哪裏，但包含在這裏。

希望這會有所幫助。

這是助手

public static class MVCTagList 
{ 
    public static string TagList(this HtmlHelper helper, IEnumerable<String> tagListItems, object htmlAttributes) 
    { 
     StringBuilder TagListMarkup = new StringBuilder(); 

     TagListMarkup.Append("<ul"); 
     if (htmlAttributes != null) TagListMarkup.Append(" " + htmlAttributes.ToAttributeList()); 
     TagListMarkup.Append(">"); 

     foreach (string tagListItem in tagListItems) 
     { 
      TagListMarkup.Append("<li>"); 
      TagListMarkup.Append(String.Format("<a href='/Articles/?tag={0}'>{0}</a>", tagListItem)); 
      TagListMarkup.Append("</li> "); 
     } 

     TagListMarkup.Append("</ul>"); 

     return TagListMarkup.ToString(); 
    } 
} 

這是HTML

<div style="width:450px; margin-left:50px; "> 
    <% 
     List<String> TagListItems = new List<string>(); 
     foreach (var tag in Model) 
      TagListItems.Add(tag.keyword1); 
    %> 
    <%= Html.TagList(TagListItems.AsEnumerable(), new { @class="TagList" })%> 
</div> 

而CSS

.TagList { margin: 0 0 0 0; padding: 0 0 0 0; } 
.TagList li { display:inline; border:1px solid; background-color:#316AC5; margin-left:3px; padding: 3px 3px 3px 3px; line-height:2em;} 
.TagList li a { text-decoration:none; color: white; font-size:85%; white-space:nowrap; }