ASP.NET Core 6.0 PageModel中能否用循环定义属性适配动态表单？

核心思路是用集合（List）替代单个属性，配合ASP.NET Core的集合模型绑定机制，彻底解决手动定义大量重复属性的问题，同时完美支持动态添加任意数量的字段（只需修改数量上限）。

后端代码修改（Index.cshtml.cs） #

把原来手动定义的10个Items_PC属性替换成List<Items_PC>集合，其他类型的Items同理：

namespace KelseyWeb.Pages
{
    public class IndexModel : PageModel
    {
        // 用集合替代单个属性，自动支持动态添加
        public List<Items_PC> ItemsPC { get; set; } = new List<Items_PC>();
        public List<Items_Monitor> ItemsMonitor { get; set; } = new List<Items_Monitor>();
        public List<Items_Others> ItemsOthers { get; set; } = new List<Items_Others>();

        public void OnGet()
        {
            // 可选：初始化一个空项，让页面加载时显示第一个字段
            // ItemsPC.Add(new Items_PC());
        }

        // 接收表单提交的Post方法
        public IActionResult OnPost()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }
            // 这里可以直接使用ItemsPC、ItemsMonitor、ItemsOthers集合中的数据
            // 业务逻辑处理...
            return RedirectToPage("Index");
        }
    }

    // 以下实体类保持不变
    public class Items_PC
    {
        public int Unit { get; set; }
        public string Model { get; set; } = null!;
        public string Spec { get; set; } = null!;
        public string WindowsVersion { get; set; } = null!;
        public string Warranty { get; set; } = null!;
    }

    public class Items_Monitor
    {
        public int Unit { get; set; }
        public string Model { get; set; } = null!;
        public string Warranty { get; set; } = null!;
    }

    public class Items_Others
    {
        public int Unit { get; set; }
        public string Model { get; set; } = null!;
        public string Spec { get; set; } = null!;
    }
}

前端代码修改（Index.cshtml） #

关键是动态生成字段时，直接指定符合模型绑定规则的name属性（客户端生成的asp-for不会被服务器解析，所以直接用name更可靠），同时为不同类型的Items维护独立计数器：

@page
@model KelseyWeb.Pages.IndexModel
@{
}

<form id="form" method="post" autocomplete="off">
    <select id="mySelect" name="values" style="width:95%; height:30px" class="ms-3">
        <option>Desktop/Notebook</option>
        <option>Monitor</option>
        <option>Others</option>
    </select>
    <input style="width:90px; float:right; font-size:15px" type="button" onclick="add_RequestedItems_fields();" value="Add More" />
    <div class="mb-3" id="RequestedItems_fields">
        <!-- 可选：如果OnGet初始化了集合，这里可以用foreach渲染初始字段 -->
        @*@foreach (var pc in Model.ItemsPC)
        {
            <div class="border mt-3 py-3 pe-3">
                <input type="text" asp-for="pc.Model" value="Desktop/Notebook" />
                <!-- 其他字段... -->
            </div>
        }*@
    </div>
</form>

@section Scripts{
    <script>
        // 为不同类型的Items维护独立计数器，避免索引冲突
        let pcCount = @Model.ItemsPC.Count;
        let monitorCount = @Model.ItemsMonitor.Count;
        let othersCount = @Model.ItemsOthers.Count;
        const MAX_ITEM_LIMIT = 10; // 改成100只需修改这个值

        function add_RequestedItems_fields() {
            const selectedType = document.getElementById('mySelect').value;
            let fieldHtml = '';

            switch(selectedType) {
                case 'Desktop/Notebook':
                    if (pcCount >= MAX_ITEM_LIMIT) return;
                    // 生成符合模型绑定规则的name属性：集合名[索引].属性名
                    fieldHtml = `
                        <div class="border mt-3 py-3 pe-3">
                            <input type="text" name="ItemsPC[${pcCount}].Model" value="Desktop/Notebook" />
                            <input type="number" name="ItemsPC[${pcCount}].Unit" placeholder="请输入数量" />
                            <input type="text" name="ItemsPC[${pcCount}].Spec" placeholder="请输入规格" />
                            <input type="text" name="ItemsPC[${pcCount}].WindowsVersion" placeholder="请输入系统版本" />
                            <input type="text" name="ItemsPC[${pcCount}].Warranty" placeholder="请输入保修期限" />
                        </div>
                    `;
                    pcCount++;
                    break;
                case 'Monitor':
                    if (monitorCount >= MAX_ITEM_LIMIT) return;
                    fieldHtml = `
                        <div class="border mt-3 py-3 pe-3">
                            <input type="text" name="ItemsMonitor[${monitorCount}].Model" value="Monitor" />
                            <input type="number" name="ItemsMonitor[${monitorCount}].Unit" placeholder="请输入数量" />
                            <input type="text" name="ItemsMonitor[${monitorCount}].Warranty" placeholder="请输入保修期限" />
                        </div>
                    `;
                    monitorCount++;
                    break;
                case 'Others':
                    if (othersCount >= MAX_ITEM_LIMIT) return;
                    fieldHtml = `
                        <div class="border mt-3 py-3 pe-3">
                            <input type="text" name="ItemsOthers[${othersCount}].Model" value="Others" />
                            <input type="number" name="ItemsOthers[${othersCount}].Unit" placeholder="请输入数量" />
                            <input type="text" name="ItemsOthers[${othersCount}].Spec" placeholder="请输入规格" />
                        </div>
                    `;
                    othersCount++;
                    break;
            }

            const container = document.getElementById('RequestedItems_fields');
            const newField = document.createElement('div');
            newField.innerHTML = fieldHtml;
            container.appendChild(newField);
        }
    </script>
}

方案优势 #

1. 彻底消除冗余：无需手动定义几十上百个属性，修改最大数量只需改JS里的MAX_ITEM_LIMIT值。
2. 模型绑定可靠：ASP.NET Core原生支持集合名[索引].属性名格式的name绑定，提交表单后数据会自动填充到后端的List集合中。
3. 扩展性强：后续新增其他类型的Items，只需添加对应的List集合和前端生成逻辑即可。
4. 维护成本低：集合式的结构比零散的单个属性更易维护，逻辑清晰。

注意事项 #

• 后端必须初始化集合（比如构造函数里new List<Items_PC>()），避免空引用异常。
• 如果需要表单验证，可在实体类属性上添加数据注解（如[Required]、[Range]），Post方法中通过ModelState.IsValid验证。
• 如果要支持删除字段，需确保剩余字段的索引连续，或使用非连续索引绑定（需添加Index隐藏字段）。

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