Question

Web开发新手，并且我认为有些问题会相当简单......我猜它永远不会！

我尝试做的是从动态列表创建可折叠列表组，并且我将用户选择的标题绑定到项目列表时出现问题。

可折叠列表应该看起来像这样，选择街道名称显示/隐藏属性详细信息（数量，人员入住）

街头ABC
- 门牌号码1
- 人们住2
- 2号楼
- 人们住3
Street XYZ
- 门牌号码1
- 人们住4
- 2号楼
- 人们住5

以下显示的是我的视图模型

public class ViewModel
{
    public List<Street> Streets { get; set; }
}


public class Street
{
    public String Name { get; set; }
    public List<Property> Properties { get; set; }
}

public class Property
{
    public Int32 Number { get; set; }
    public Int32 PeopleStaying { get; set; }
}

我的html目前显示在＆＃39; href＆＃39;并且＆＃39; id＆＃39;属性硬编码为＆＃34; collapse1＆＃34;所以在每条街道选择中都会显示第一条街道：

            <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Streets</h3>
                </div>
                <div class="panel-body">
                    @foreach (var street in Model.Streets)
                    {
                        <a data-toggle="collapse" href="#collapse1">@street.Name</a>
                        <div id="collapse1" class="panel-collapse collapse">
                            @foreach (var house in street.Properties)
                            {
                                <ul class="list-group">
                                    <li class="list-group-item">@house.Number</li>
                                    <li class="list-group-item">@house.PeopleStaying</li>
                                </ul>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>

所以问题是，是否可以使href / id动态化，以便可以显示任意数量的街道和属性？

Answer 1

@{var i=0;}
@foreach (var street in Model.Streets)
{
    <a data-toggle="collapse" href="#collapse-@i">@street.Name</a>
    <div id="collapse-@(i++)" class="panel-collapse collapse">
        @foreach (var house in street.Properties)
        {
            <ul class="list-group">
                <li class="list-group-item">@house.Number</li>
                <li class="list-group-item">@house.PeopleStaying</li>
             </ul>
        }
    </div>
}

可折叠列表组中的动态ID

1 个答案: