在 ASP.Net MVC 中以不同方式设置奇数表行答案

【问题标题】：Style odd table rows differently in ASP.Net MVC在 ASP.Net MVC 中以不同方式设置奇数表行
【发布时间】：2011-02-09 03:16:00
【问题描述】：

帮我替换这段代码，我和 Resharper 都不喜欢：

<table width="100%">
<% for (int row = 0; row < 10; ++row) {%>
<%= "<tr" + ((row % 2 == 0) ? " class='even'" : "") + ">" %>

...

</tr>
<%}%>
</table>

【问题讨论】：

另一种交替方式：int flip = 0; " %> . ..

标签： .net asp.net asp.net-mvc css

【解决方案1】：

使用 jquery 并在客户端上执行 - 您的视图代码会更加清晰。

$(document).ready(function(){
  $("table tr:even").addClass("even");
});

【讨论】：

【解决方案2】：

public static class TableExtensions
{
    public static string StartRow(this HtmlHelper htmlHelper, int row)
    {
        var builder = new TagBuilder("tr");
        if (row % 2 == 0)
        {
            builder.MergeAttribute("class", "even");
        }
        return builder.ToString(TagRenderMode.StartTag);
    }
}

还有：

<table width="100%">
<% for (var rowIndex = 0; rowIndex < 10; ++rowIndex) { %>
    <%= Html.StartRow(rowIndex) %>
    ....
    </tr>
<% } %>
</table>

更新：

你可以进一步清理标签汤：

public static class TableExtensions
{
    private class Row : IDisposable
    {
        private readonly TextWriter _writer;
        private bool _disposed;

        public Row(ViewContext viewContext)
        {
            _writer = viewContext.Writer;
        }

        public void Dispose(bool disposing)
        {
            if (!_disposed)
            {
                _disposed = true;
                _writer.Write("</tr>");
            }
        }

        public void Dispose()
        {
            this.Dispose(true);
            GC.SuppressFinalize(this);
        }
    }

    public static IDisposable BeginRow(this HtmlHelper htmlHelper, int rowIndex)
    {
        var builder = new TagBuilder("tr");
        if (rowIndex % 2 == 0)
        {
            builder.MergeAttribute("class", "even");
        }
        htmlHelper.ViewContext.Writer.Write(builder.ToString(TagRenderMode.StartTag));
        return new Row(htmlHelper.ViewContext);
    }


    public static string StartRow(this HtmlHelper htmlHelper, int row)
    {
        var builder = new TagBuilder("tr");
        if (row % 2 == 0)
        {
            builder.MergeAttribute("class", "even");
        }
        return builder.ToString(TagRenderMode.StartTag);
    }
}

在视图中：

<table width="100%">
<% for (var rowIndex = 0; rowIndex < 10; ++rowIndex) { %>
    <% using (Html.StartRow(rowIndex)) { %>
        <td>value 1</td>
        <td>value 2</td>
    <% } %>
<% } %>
</table>

【讨论】：

不确定我拥有的一次性桌子是否值得。谢谢。
然后你需要在行上自定义属性并扩展你的助手......最后做 MvcContrib Grid ;-)

【解决方案3】：

Rails 有一个 cycle method 来执行此操作。

Phil Haack created one 到 asp.net mvc

所以你可以这样使用

<style>
    .first {background-color: #ddd;}
    .second {background-color: khaki;}
</style>

<table>
<% for (int i = 0; i < 5; i++) { %>
    <tr class="<%= Html.Cycle("first", "second") %>">
        <td>Stuff</td>
    </tr>
<% } %>
</table>

【讨论】：

【解决方案4】：

当您在一个屏幕上有多个表格时使用 nth-child it works better。

    $(function() {
        $('table tr:nth-child(even)').addClass("even");
    });

【讨论】：