在没有重复 ID 的控件中呈现项目集合时出现问题

Question

我正在使用一组数据项填充 HTML table。

但我希望每个单元格都是 editable。所以我在控件中显示项目字段。例如：

@foreach (FleetRailcarDto railcar in editSection.Railcars)
{
    <tr>
        <td></td>
        <td>
            <select asp-for="@railcar.FleetId" asp-items="@Model.FleetOptions" class="form-control-sm edit-fleet-id">
            </select>
        </td>
        <td>
            <select asp-for="@railcar.Ownership" asp-items="@Model.OwnershipOptions" class="form-control-sm edit-ownership">
            </select>
        </td>
        <td>
            <input asp-for="@railcar.CarType" class="form-control-sm edit-cartype" />
        </td>
    </tr>
}

这显示正常，但它为每个 table 行生成相同的 ID 属性。

我知道我可以手动构建 HTML，但这里需要做一些事情。有没有人找到一种方法来将 asp-for 用于相同属性的变体而不导致重复的 ID 属性？

Answer 1

绑定到集合进行编辑时，您应该使用 for 循环而不是 foreach 循环来迭代集合。这样你就可以生成一个索引器来将字段分组在一起。您还需要一个隐藏字段设置为每个项目的标识值：

@for (var i = 0; i < editSection.Railcars.Count;i++)
{
    <tr>
        <td>
            <input type="hidden" asp=for="editSection.Railcars[i].Id" />
        </td>
        <td>
            <select asp-for="@editSection.Railcars[i].FleetId" asp-items="@Model.FleetOptions" class="form-control-sm edit-fleet-id">
            </select>
        </td>
        <td>
            <select asp-for="@editSection.Railcars[i].Ownership" asp-items="@Model.OwnershipOptions" class="form-control-sm edit-ownership">
            </select>
        </td>
        <td>
            <input asp-for="@editSection.Railcars[i].CarType" class="form-control-sm edit-cartype" />
        </td>
    </tr>
}

更多信息在这里：https://www.learnrazorpages.com/razor-pages/model-binding#binding-complex-collections

在没有重复 ID 的控件中呈现项目集合时出现问题

Problems rendering a collection of items in controls without duplicate IDs

c#

asp.net

asp.net-core

razor-pages

.net-6.0