1

現存する 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で指定された数の列を持つチェックボックスリストを作成するための標準的なアプローチは何ですか?

4

1 に答える 1

2

本当に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; }
于 2010-05-27T04:49:56.843 に答える