如何在ASP.NET Razor Pages中修改List属性？表单提交问题求助

问题原因 #

你当前的代码存在三个关键问题，导致后端无法正确接收剩余数据：

1. 重复生成了Model.AuftragsNummern.index隐藏域，其中手动添加的条目值为整个列表，完全不符合模型绑定要求，直接打乱了索引匹配逻辑。
2. 删除行后未更新剩余行的索引序列，ASP.NET模型绑定要求List的索引必须是连续的0、1、2...，不连续的索引会被忽略，导致后端接收到空或不完整的列表。
3. 删除按钮使用了asp-page-handler，点击会直接触发后端请求，而非仅在前端删除行，不符合你“删多行后提交表单”的需求。

解决方案 #

方案一：删除行后重新整理索引（推荐，直接绑定剩余数据） #

首先修正Razor视图代码，移除错误的重复隐藏域，调整按钮类型：

@for (int i = 0; i < Model.AuftragsNummern.Count; i++)
{
    @Html.Hidden("AuftragsNummern.Index", i)
    @Html.HiddenFor(x => x.AuftragsNummern[i])
    <tr>
        <td>@Html.DisplayFor(x => Model.AuftragsNummern[i])</td>
        <td>
            <button type="button" onclick="deleteAuftrage(this)" class="btn btn-danger btn-rounded btn-sm my-0">delete</button>
        </td>
    </tr>
}

然后修改JavaScript删除函数，删除行后重新遍历剩余行，更新索引和对应输入框的name属性，确保索引连续：

function deleteAuftrage(btn) {
    // 删除当前行
    const row = btn.closest('tr');
    row.remove();
    
    // 重新整理剩余数据行的索引
    const dataRows = document.querySelector('tbody').querySelectorAll('tr');
    dataRows.forEach((row, newIndex) => {
        // 更新索引隐藏域的值
        const indexInput = row.querySelector('input[name="AuftragsNummern.Index"]');
        // 更新值输入框的name属性
        const valueInput = row.querySelector('input[name^="AuftragsNummern["]');
        
        if (indexInput && valueInput) {
            indexInput.value = newIndex;
            valueInput.name = `AuftragsNummern[${newIndex}]`;
        }
    });
}

这样提交表单时，后端的AuftragsNummern属性会直接接收到剩余的所有数据。

方案二：跟踪删除ID，后端计算剩余数据 #

如果不想处理DOM索引的调整，可以通过记录被删除的ID，在后端过滤原列表：

1. 视图代码新增存储删除ID的隐藏域，并给数据行添加ID标记：

<input type="hidden" id="deletedAuftrags" name="DeletedAuftragsNummern" value="" />

@for (int i = 0; i < Model.AuftragsNummern.Count; i++)
{
    @Html.HiddenFor(x => x.AuftragsNummern[i])
    <tr data-auftrag-id="@Model.AuftragsNummern[i]">
        <td>@Html.DisplayFor(x => Model.AuftragsNummern[i])</td>
        <td>
            <button type="button" onclick="deleteAuftrage(this)" class="btn btn-danger btn-rounded btn-sm my-0">delete</button>
        </td>
    </tr>
}

2. 后端新增绑定属性：

[BindProperty]
public List<int> AuftragsNummern { get; set; }

[BindProperty]
public string DeletedAuftragsNummern { get; set; }

3. 修改JavaScript函数，记录删除的ID：

function deleteAuftrage(btn) {
    const row = btn.closest('tr');
    const auftragId = row.getAttribute('data-auftrag-id');
    row.remove();
    
    // 更新删除ID列表
    const deletedInput = document.getElementById('deletedAuftrags');
    const deletedIds = deletedInput.value ? deletedInput.value.split(',').filter(id => id) : [];
    deletedIds.push(auftragId);
    deletedInput.value = deletedIds.join(',');
}

4. 后端处理逻辑：

public IActionResult OnPost()
{
    if (!string.IsNullOrEmpty(DeletedAuftragsNummern))
    {
        var deletedIds = DeletedAuftragsNummern.Split(',').Select(int.Parse).ToList();
        // 过滤掉被删除的ID，得到剩余数据
        AuftragsNummern = AuftragsNummern.Except(deletedIds).ToList();
    }
    
    // 后续业务逻辑处理
    return Page();
}

内容的提问来源于stack exchange，提问作者abode_utd