如何在没有 javascript 的情况下在 MVC-Razor 中使用行跨度？答案

【问题标题】：How to use rowspan in MVC-Razor, without javascript?如何在没有 javascript 的情况下在 MVC-Razor 中使用行跨度？
【发布时间】：2011-11-04 14:59:14
【问题描述】：

如何在 Razor 视图中使用行跨度合并表格中的单元格？

不使用 javascript/jQuery。
表的源是一个 IEnumerable。
源中的某些项目将在某个字段中具有相同的值，而那些是我们要合并到一个单元格中的项目。
我们不知道给定值重复了多少次。

生成的 HTML 应该是这样的：

<table>
    <tr>
        <td rowspan="2">Column 1 row 1</td>
        <td>Column 2 row 1</td>
    </tr>
    <tr>
        <td>Column 2 row 2</td>
    </tr>
    <tr>
        <td rowspan="3">Column 1 row 3</td>
        <td>Column 2 row 3</td>
    </tr>
    <tr>
        <td>Column 2 row 4</td>
    </tr>
    <tr>
        <td>Column 2 row 5</td>
    </tr>
</table>

编辑以添加数据源和所需结果：

数据源可能类似于带有类别的产品。例如：

类别

电子产品
杂货

产品

笔记本电脑（电子产品）
iPod（电子产品）
电视（电子）
咖啡（杂货）
饼干（杂货）

结果

╔═════════════╦════════╗
║ Electronics ║ Laptop ║
║             ║ iPod   ║
║             ║ TV     ║
╠═════════════╬════════╣
║ Groceries   ║ Coffee ║
║             ║ Cookies║ 
╚═════════════╩════════╝

我想到的唯一方法是使用 Linq 计算一个值在列表中出现的次数，但我想知道是否有人有更好的解决方案。谢谢！

【问题讨论】：

听起来是个有趣的挑战。你总是在同一个领域合并吗？也许 .GroupBy() ？
@jkoreska：是的，总是同一个字段。我不认为group by会有所帮助。我将编辑问题以添加数据源。
GroupBy 和 Select 应该可以，我看到的问题是在执行动态行跨度时。你解决了吗？
我错过了第一个评论，我认为 group by 会做。最后，我做了一些不同的事情：每次值更改时，都会使用类别名称创建一个新行。该行还有一个复选框，允许用户选择该类别中的所有行。我认为这样更好。

标签： asp.net-mvc-3 razor html-table

【解决方案1】：

试试这样的。

<table>
    <tr>
        <th>Movie</th>
        <th>Person</th>
    </tr>

    @foreach (var byMovies in elements.GroupBy(x => x.Movie)
                                      .OrderBy(movie => movie.Key.Name))
    {
        var secondRowOrHigher = false;
        @:<tr>
        @:<td rowspan="@byMovies.Count()">@byMovies.Key.Name</td>

        foreach (var ticket in byMovies.OrderBy(x => x.Person.Name))
        {
            if (secondRowOrHigher)
            {
                @:<tr>
            }
            secondRowOrHigher = true;

            <td>@ticket.Person.Name</td>
            @:</tr>
        }
    }
</table>

上课只是为了有一张照片

public class TicketInfo
{
    public Movie Movie { get; set; }
    public Person Person { get; set; }
}

public class Person
{
    public string Name { get; set; }
}

public class Movie
{
    public string Name { get; set; }
}

【讨论】：