剃刀视图HTML表格布局

时间:2019-11-27 03:06:46

标签: c# html asp.net-mvc razor .net-core

我在剃刀视图中有一个表,该表像这样显示数据

current layout

有些字段我想分组

desired layout

我认为我不会通过分组实现这一目标,因为我将丢失数据。不确定采取什么方法?

这是我的标记

<div class="row">
    <table class="arrowes-table table-striped">
        <thead>
            <tr>
                <th>Driver Name</th>
                <th>Alarm Type : Count</th>
                <th>Total Distance For Period</th>
                <th>Avg Per Km Driven</th>
                <th>Relative Driver Score</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model.DriverBehaviour.OrderByDescending(x => x.DriverName))
            {               
                <tr>
                    <td>@Html.HiddenFor(m => item.DriverId) @Html.ActionLink(item.DriverName, "Operator", "Operators", new { area = "VehicleManagement", operatorId = item.DriverId })</td>
                    <td>@item.AlarmType : <span class="brand-red">@item.TypeCount</span></td>
                    <td>@item.TotalDistanceForPeriod</td>
                    <td>
                        @{
                            var avg = @Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;
                        }
                        @avg
                    </td>
                    <td>
                        @{
                            var relScore = @Math.Truncate(1000 * @item.RelativeDriverScore) / 1000;

                            if (relScore.ToString().StartsWith("-") == true)
                            {
                                <span class="brand-red">@relScore</span>
                            }
                            if (relScore.ToString().StartsWith("-") == false)
                            {
                                <span class="brand-green">+@relScore</span>
                            }

                        }
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

感谢任何想法:)

1 个答案:

答案 0 :(得分:0)

没关系,我明白了

<div class="row">
    <table class="arrowes-table table-striped">
        <thead>
            <tr>
                <th>Driver Name</th>
                <th>Alarm Type : Count</th>
                <th>Total Distance For Period</th>
                <th>Avg Per Km Driven</th>
                <th>Relative Driver Score</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var group in Model.DriverBehaviour.GroupBy(item => item.DriverName))
            {
                <tr>
                    <td>@Html.ActionLink(@group.Key, "Operator", "Operators", new { area = "VehicleManagement", operatorId = group.FirstOrDefault().DriverId })</td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group)
                            {
                                <li> @item.AlarmType : <span class="brand-red">@item.TypeCount</span></li>
                            }
                        </ul>

                    </td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group.GroupBy(x => x.TotalDistanceForPeriod))
                            {
                                <li>@item.Key</li>
                            }
                        </ul>
                    </td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group)
                            {
                                var avg = @Math.Truncate(1000 * item.AverageAlarmPerKmDriven) / 1000;

                                <li>
                                    @avg
                                </li>
                            }
                        </ul>
                    </td>
                    <td>
                        <ul class="list-unstyled">
                            @foreach (var item in group)
                            {
                                var relScore = @Math.Truncate(1000 * @item.RelativeDriverScore) / 1000;

                                if (relScore.ToString().StartsWith("-") == true)
                                {
                                    <li class="brand-red">@relScore</li>
                                }
                                if (relScore.ToString().StartsWith("-") == false)
                                {
                                    <li class="brand-green">+@relScore</li>
                                }
                            }
                        </ul>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

产生这个

enter image description here