ASP.NET Razor表单提交后如何获取修改后的模型？

核心原因 #

你的表单元素未设置正确的name属性，导致ASP.NET Core的模型绑定无法将提交的复选框值映射到cats集合中。Razor Pages的模型绑定依赖明确的命名规则来识别集合元素及其属性。

解决方案步骤 #

1. 修改前端表单，添加正确的name属性 #

遍历Model.cats时，需为每个复选框和必要属性设置带索引的name属性，让模型绑定能识别每个元素：

<form method="post" enctype="multipart/form-data" asp-page-handler="Button_Submit">
    <table class="table-fullWitdh centered">
        <tr>
            <td class="centered">
                <p>
                    Bitte markiere alle Fertigkeiten, die dein potentieller Kandidat "Gut" oder "Sehr gut" beherrschen soll
                </p>
            </td>
        </tr>
        <tr>
            <td class="centered" style="padding-top: 50px;">
                <table class="table-fullWitdh centered">
                    @{
                        int counter = 0;
                        // 改用for循环获取索引，方便绑定集合元素
                        for (int i = 0; i < Model.cats.Count; i++)
                        {
                            var elem = Model.cats[i];
                            if (counter % 6 == 0)
                            {
                                <tr class="centered"></tr>
                            }
                            <td class="centered">
                                <!-- 隐藏字段传递Id，确保模型能匹配到对应数据 -->
                                <input type="hidden" name="cats[@i].Id" value="@elem.Id" />
                                <!-- 复选框name绑定到对应索引的IsChecked属性 -->
                                <input type="checkbox" id="@elem.Id" name="cats[@i].IsChecked" checked="@elem.IsChecked" />
                                <label for="@elem.Id">@elem.DisplayValue</label>
                            </td>
                            counter++;
                        }
                    }
                </table>
             </td>
         </tr>
        <tr>
             <td>
                 <div class="centered" style="padding-top: 50px;">
                   <input style="width: 30% !important; opacity: 0.2; " value="Weiter" class="baseButton" type="submit">
                 </div>
             </td>
         </tr>
     </table>
</form>

2. 简化后端Post方法，直接使用绑定的cats集合 #

cats属性已标记[BindProperty]，Post方法无需接收IFormCollection，直接访问cats即可获取更新后的数据：

[HttpPost]
public async Task<IActionResult> OnPostButton_Submit()
{
    // 此时cats已包含用户修改后的勾选状态
    foreach (var skill in cats)
    {
        if (skill.IsChecked)
        {
            // 处理勾选的技能
        }
    }
    return Page();
}

额外提示 #

• 用static存储userId是错误的，多用户并发时会导致数据混乱，建议改用HttpContext.Session或用户身份标识（如User.Identity.Name）存储用户ID。
• SkillsDisplayModel中的INotifyPropertyChanged在服务器端Razor Pages中无意义，该接口主要用于客户端双向绑定场景（如Blazor、WPF），可直接移除。

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