Using foreach in razor pages with hidden asp-for inputs result in found elements with non-unique id in browser console

Question

I have two partials. One is _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>
}

and _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>

So in a page with 12 products list it results in a browser warnings for each hidden input like:

Found 12 elements with non-unique id #Products_Results_product_DisplayPrice

which actually makes sense since there are 12 elements with same ids.

Some time I used https://github.com/dotnet-architecture/eShopOnWeb to check some of best practices and use in my project. So thing is that in eShopOnWeb project there is also a foreach with a partial with same technique. And there are no warnings at all. There are no custom id procedure. Even rendered page html have same ids in hidden inputs. But no warning.

Anyone please can tell why? What am i missing?

Thanks everyone and sorry for long post.

Answer 1

try this

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

I only don' t know why you need the name at all since you have already asp-for="@Model.Id"

I would prefer

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