Список флажков MVC - PullRequest
Новая
       12

Список флажков MVC

1 голос
/ 27 мая 2010

Я только что написал, пожалуй, самый уродливый бит кода 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?

1 Ответ

2 голосов
/ 27 мая 2010

Это действительно должно быть 5? Я спрашиваю, потому что каждый тег будет разной ширины, так что в любом случае он будет выглядеть рваным. И если у вас есть 5 длинных тегов рядом друг с другом, они могут попасть в пространство, отведенное для других вещей, поэтому я думаю, вы говорите, сделайте это 5 столбцами.

Вы можете получить тег растительного происхождения, который появится над тегом vegetable-patch. Тогда будет огромный разрыв между растительностью и ее колонной. выглядит немного странно.

Я использовал бесплатный. Источник включен сюда, хотя я забыл, откуда он.

Надеюсь, это поможет.

Это Помощник 

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; }
...