ASP.NET Razor Pages动态新增下拉列表绑定模型属性求助

一、修复初始下拉列表不显示问题 #

1. 初始化集合元素
   在PageModel的OnGet方法中，必须给ingredientsIDs初始化至少一个元素，否则Razor无法正确绑定索引：

public void OnGet()
{
    // 替换为你的Options初始化逻辑（例如从数据库读取食材数据）
    Options = new SelectList(yourIngredientDataSource, "Id", "DisplayName");
    // 初始化集合，确保至少有一个元素用于绑定初始下拉
    ingredientsIDs = new List<int> { 0 };
}

2. 修正视图绑定代码
   在.cshtml中，明确绑定到集合的第一个索引，同时确保asp-items正确指向选项集合：

<div class="ingredient-group">
    <select asp-for="ingredientsIDs[0]" asp-items="Model.Options" class="form-control mb-2"></select>
</div>
<button id="addIngredientBtn" type="button" class="btn btn-sm btn-outline-secondary">Add ingredient</button>

二、实现动态新增带模型绑定的下拉列表 #

由于asp-for是服务端生成表单name属性的特性，客户端JS需要手动构造符合Razor Pages列表绑定规则的name格式（ingredientsIDs[N]，N为递增的索引值）。具体实现：

<script>
    const addBtn = document.getElementById('addIngredientBtn');
    const groupContainer = document.querySelector('.ingredient-group');

    addBtn.addEventListener('click', () => {
        // 计算当前已有下拉数量，作为新项的索引
        const currentCount = groupContainer.querySelectorAll('select').length;
        // 创建新的select元素
        const newSelect = document.createElement('select');
        // 设置符合绑定规则的name属性
        newSelect.name = `ingredientsIDs[${currentCount}]`;
        newSelect.className = 'form-control mb-2';

        // 从现有下拉复制选项（避免重复请求数据）
        const templateSelect = groupContainer.querySelector('select');
        Array.from(templateSelect.options).forEach(option => {
            newSelect.appendChild(option.cloneNode(true));
        });

        // 将新下拉添加到容器
        groupContainer.appendChild(newSelect);
    });
</script>

关键说明 #

• 表单提交时，Razor Pages会自动识别所有name格式为ingredientsIDs[N]的表单元素，并将其值绑定到List<int> ingredientsIDs属性中。
• 如果在OnPost方法中需要重新渲染页面（比如验证失败返回），记得重新初始化ingredientsIDs集合，数量要和提交时的项数一致，避免视图出错。
• 若需要默认选中值，可在创建新select后添加newSelect.value = 0;（替换为你需要的默认值）。

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