如何将动态表单字段值传递给List<ushort>类型的模型绑定？

我用以下脚本动态添加/删除表单内的输入字段，想要把这些字段的值传递给模型中类型为List<ushort>的Ports属性，但尝试用隐藏字段存储JSON数组的方式无法成功绑定。

初始HTML和JS代码：

<div style="width:40%;">
    <div>
        <div class="col-lg-12">
            <div id="row">
                <div class="input-group m-3">
                    <div class="input-group-prepend">
                        <button class="btn btn-danger" id="DeleteRow" type="button">
                            <i class="bi bi-trash"></i>
                            Delete
                        </button>
                    </div>
                    <input type="text" class="form-control m-input">
                </div>
            </div>

            <div id="newinput"></div>
            <button id="rowAdder" type="button" class="btn btn-dark">
                <span class="bi bi-plus-square-dotted"></span> ADD
            </button>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#rowAdder").click(function () {
            newRowAdd =
                '<div id="row"> <div class="input-group m-3">'+ 
                '<div class="input-group-prepend">'+ 
                '<button class="btn btn-danger" id="DeleteRow" type="button">'+ 
                '<i class="bi bi-trash"></i> Delete</button> </div>'+ 
                '<input type="text" class="form-control m-input"> </div> </div>';

            $('#newinput').append(newRowAdd);
        });
        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })
</script>

尝试的隐藏字段方案（无效）：

function updatePortsInput() {
    console.log("updatePortsInput called");
    var ports = [];
    $(".m-input").each(function () {
        var portValue = parseInt($(this).val());
        if (!isNaN(portValue) && portValue >= 0 && portValue <= 65535) {
            ports.push(portValue);
        }
    });

    $('[name="Ports"]').val(JSON.stringify(ports));
}

<input type="hidden" id="portsInput" name="Ports" asp-for="Ports" />

解决方案1：直接让输入框符合模型绑定命名规则 #

ASP.NET Core的模型绑定可以自动收集同名表单值到List<T>，只需给每个输入框设置统一的name属性即可，无需手动处理JSON转换。

修改步骤： #

1. 修改初始输入框，添加name="Ports"：

<input type="text" class="form-control m-input" name="Ports" />

2. 修改动态生成输入框的代码，给新输入框加上name="Ports"：

$("#rowAdder").click(function () {
        newRowAdd =
            '<div class="row"> <div class="input-group m-3">'+ 
            '<div class="input-group-prepend">'+ 
            '<button class="btn btn-danger DeleteRow" type="button">'+ 
            '<i class="bi bi-trash"></i> Delete</button> </div>'+ 
            '<input type="text" class="form-control m-input" name="Ports"> </div> </div>';

        $('#newinput').append(newRowAdd);
    });

3. 移除之前的隐藏字段和updatePortsInput函数，删除按钮的选择器改用类名（避免重复ID冲突）：

$("body").on("click", ".DeleteRow", function () {
    $(this).parents(".row").remove();
})

提交表单时，ASP.NET Core会自动将所有name="Ports"的输入值转换为List<ushort>（只要输入值在0-65535范围内）。

解决方案2：修复隐藏字段的JSON绑定方案（可选） #

如果坚持使用隐藏字段存储JSON数组，需要在后端处理字符串到列表的转换：

1. 将模型中的Ports属性改为string类型：

public string Ports { get; set; }

2. 在控制器POST方法中反序列化JSON字符串：

using System.Text.Json;

// 处理请求时转换
var portsList = JsonSerializer.Deserialize<List<ushort>>(model.Ports);

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