在带有隐藏 asp-for 输入的剃须刀页面中使用 foreach 会导致在浏览器控制台中找到具有非唯一 ID 的元素

Posted

技术标签:

【中文标题】在带有隐藏 asp-for 输入的剃须刀页面中使用 foreach 会导致在浏览器控制台中找到具有非唯一 ID 的元素【英文标题】:Using foreach in razor pages with hidden asp-for inputs result in found elements with non-unique id in browser console 【发布时间】:2021-10-09 17:56:09 【问题描述】:

我有两个部分。一种是_ProductList.cshtml

@model IList<ProductDto>

@foreach (var product in Model) 
    <div class="col-md-4 col-sm-6 px-2 mb-4">
        <partial name="_SingleProduct" for="@product"/>
    </div>

和_SingleProduct.cshtml:

@model ProductDto

<form method="post" asp-page="/Basket/Index" class="text-center">
    <div class="card-body card-body-hidden">
        <h4 class="fs-sm">@Model.AtlantisCode</h4>
        @if (Model.Availability) 
            <button class="btn btn-primary btn-sm d-block w-100 mb-2" type="submit">
                <i class="ci-cart fs-sm me-1"></i>Προσθήκη στο καλάθι
            </button>
        
        else 
            <button class="btn btn-secondary btn-sm d-block w-100 mb-2" type="submit" asp-page="/Contact/Index" asp-page-handler="ItemInfo">
                <i class="ci-mail fs-sm me-1"></i> Ρωτήστε μας
            </button>
        
        <input type="hidden" asp-for="@Model.Id" name="id" />
        <input type="hidden" asp-for="@Model.DisplayPrice" name="displayPrice"/>
        <input type="hidden" asp-for="@Model.OfferPrice" name="offerPrice"/>
        <input type="hidden" asp-for="@Model.IsOffer" name="isOffer"/>
    </div>
</form>

因此,在包含 12 个产品列表的页面中,它会为每个隐藏的输入生成浏览器警告,例如:

找到 12 个具有非唯一 ID #Products_Results_product_DisplayPrice 的元素

这实际上是有道理的,因为有 12 个元素具有相同的 id。

有时我使用https://github.com/dotnet-architecture/eShopOnWeb 来检查一些最佳实践并在我的项目中使用。因此,在 eShopOnWeb 项目中,还有一个具有相同技术的部分 foreach。而且根本没有任何警告。没有自定义 id 程序。即使是呈现的页面 html 在隐藏输入中也具有相同的 id。但没有警告。

谁能告诉我为什么?我错过了什么?

谢谢大家,很抱歉发了这么长的帖子。

【问题讨论】:

嗨,这是因为您输入了一个有 12 个的值,我不知道下面的代码是否有效,但对我来说最理想的是 foreach 中的输入以分配 id 值 1一个 【参考方案1】:

试试这个

 <input type="hidden" asp-for="@Model.Id" name="id@Model.Id" />
....and so on

我只是不知道你为什么需要这个名字,因为你已经有了 asp-for="@Model.Id"

我更喜欢

 <input type="hidden" asp-for="Id" value="@Model.Id"/>
 .... and so on

【讨论】:

以上是关于在带有隐藏 asp-for 输入的剃须刀页面中使用 foreach 会导致在浏览器控制台中找到具有非唯一 ID 的元素的主要内容,如果未能解决你的问题,请参考以下文章

在视图组件或局部视图中使用表单

从一个剃须刀页面到另一个带有链接的页面

从选择下拉列表中检索对象

asp.net core razor 页面复选框模型绑定(始终为 false)

单击复选框时,如何在单个字段上使用 jquery 禁用客户端验证?

输入显示列表中不同元素的值