Question

我有一个对象：

public class Person {
   public string FirstName {get; set;}
   public string LastName{get; set;}
   public int Age {get; set;}
   public List<Car> Cars {get; set;}
}
public class Car{
   public string Name {get; set;}
   public DateTime Manufactured {get; set;}
}

在剃刀内部视图中，我迭代人物对象列表并显示其属性

@foreach (var item in Model){
   <tr id="@item.Id">
       <td>@item.FirstName </td>
       <td>@item.LastName</td>
       <td>@item.Age </td>
    </tr>
}

当用户点击div时，如何以可折叠tr显示汽车列表？

Answer 1

我刚在记事本中做了这个。也许你可以用这个作为灵感：

@foreach (var item in Model){
    <tr id="person-@item.Id" class="person">
       <td>@item.FirstName </td>
       <td>@item.LastName</td>
       <td>@item.Age </td>
    </tr>
    @if (item.Cars != null && item.Cars.Count > 0) {
    <tr class="cars" id="cars-for-person-@item.Id" style="display: none;">
        <td colspan="3">
        @foreach (var car in item.Cars){
            <div class="each-car">
                <span class="name">@car.Name</span>
                <span class="name">@car.Manufactured </span>
            </div>
        }
        </td>
    </tr>
    }
}

<script>
    $(function() {
        var table = $("table");
        table.on("click", "tr.person", function() {
            $(this).next("tr.cars").toggle();
        });
    });
</script>

请注意，我已将id上的tr属性更改为person-作为前缀，因为其无效的HTML仅将ID作为整数。

这是一个小提琴：http://jsfiddle.net/06f8czLL/

在可折叠div中显示详细信息

1 个答案: