Html 尝试使用动态ID时,引导accordion不起作用

Html 尝试使用动态ID时,引导accordion不起作用,html,razor,bootstrap-4,razor-pages,Html,Razor,Bootstrap 4,Razor Pages,它不会使用foreach分配的id崩溃 我用非动态ID试过了,效果不错 <div class="accordion" id="myAccordion"> @foreach (var item in Model) { <div class="card"> <div class="card-header"> <h5 class="mb-0">

它不会使用foreach分配的id崩溃

我用非动态ID试过了,效果不错

<div class="accordion" id="myAccordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#@item.Id">
                        @item.Version.Component.Product.Name's @item.Version.Component.Name's @item.Version.ReleaseNumber Version
                    </button>
                </h5>
            </div>
            <div id="@item.Id" class="collapse" data-parent="#myAccordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    }
</div>
</div>

@foreach(模型中的var项目)
{
@item.Version.Component.Product.Name的@item.Version.Component.Name的@item.Version.ReleaseNumber版本
动物界的陈词滥调——reprehenderit,enim eiusmod high life accusamus terry richardson ad squid.3狼月办公室,无铜滑板多洛早午餐。食品卡车藜麦nesciunt Labourum eiusmod.早午餐3狼月临时,太阳阿利夸在其上放了一只鸟鱿鱼单一来源咖啡nulla assumenda shoreditch et.Nihil Anim Keffieh helvetica,手工啤酒厂韦斯·安德森·克雷德·奈斯坎特·萨皮恩特·埃亚·普罗德特。纯素食主义者,屠夫副洛莫。绑腿从手工啤酒厂到餐桌,生牛仔布美学合成物奈斯坎特。你可能没听说过他们accusamus labore可持续VHS。
}

在inspector中,检查#@item.ID评估是否正确

或者尝试数据切换=“下一步折叠”

编辑:


它的计算结果是什么,可能有问题的字符吗?

数字ID不适用于引导手风琴(请参阅)。因此,在id和数据目标前面加一个字母。此外,当@符号嵌入到字符串中时,必须使用parens来标识要执行的代码

        <div class="card-header">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#X@(item.Id)">
                    @item.Version.Component.Product.Name's @item.Version.Component.Name's @item.Version.ReleaseNumber Version
                </button>
            </h5>
        </div>
        <div id="X@(item.Id)" class="collapse" data-parent="#myAccordion">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>

@item.Version.Component.Product.Name的@item.Version.Component.Name的@item.Version.ReleaseNumber版本
动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。3狼月亮奥特餐厅,非丘比特滑板多洛早午餐。食品车奎奴亚藜。早午餐3狼月亮临时,圣塔阿利夸放了一只鸟在上面鱿鱼单一来源咖啡NullaAssumenda shoreditch等Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred Nesciut sapiente ea proident。纯素食主义者,屠夫副洛莫。紧身裤从工艺啤酒场到餐桌,生料牛仔布美学合成物,你可能还没听说过accusamus labore可持续VHS。

正如@terrencep所提到的,您应该在浏览器的页面检查器中查看数据切换的值。

是的,item.ID正确计算。我还尝试过让数据切换为“下一步折叠”。还是不行。那些撇号对你有用吗' 是html中的撇号。我尝试过这种方法,在没有parens的情况下,它以相同的方式评估html,但仍然不起作用。我遇到了同样的问题,当我查看代码时,我认为问题在于parens。这是因为只有数字标识不起作用。更新了我的答案并链接到类似的问题