ASP.NET Core Razor页面项目中Author关联属性绑定问题求助

问题根源 #

前端生成关联名称输入框时，name属性未正确关联对应Author的索引，导致后端无法将AssociatedNames数据映射到对应的Author对象；同时多余的隐藏字段会干扰模型绑定逻辑，使得关联集合始终为空或null。

修复步骤 #

1. 修正前端JavaScript的name属性绑定 #

修改生成AssociatedNames输入框的代码，确保name属性包含当前Author的索引，让模型绑定能识别关联数据所属的作者：

$("#addRow").click(function () {
    var rowCount = parseInt($("#total").val());
    rowCount++;
    $("#total").val(rowCount);
    var authorIndex = rowCount - 1; // 当前作者的索引
    var html = '';
    html += '<div class="author-row">'; // 用class替代重复id，避免DOM冲突

    html += '<label for="Author_' + authorIndex + '__FirstName">Author ' + rowCount + ' First Name</label>';
    html += '<input type="text" id="Author_' + authorIndex + '__FirstName" name="Author[' + authorIndex + '].FirstName" class="form-control" required />';
    // 移除多余的集合隐藏字段，模型绑定会自动处理集合初始化
    html += '<button type="button" class="btn btn-danger removeRow">Remove</button>';

    html += '</div>';

    html += '<div class="associated-names-container">';
    html += '<h3>Associated Names</h3>';
    for (var i = 0; i < 2; i++) {
        html += '<label for="Author_' + authorIndex + '__AssociatedNames_' + i + '_nameString">Associated Name ' + (i + 1) + '</label>';
        // 关键修正：name属性包含Author索引，明确关联归属
        html += '<input type="text" id="Author_' + authorIndex + '__AssociatedNames_' + i + '_nameString" name="Author[' + authorIndex + '].AssociatedNames[' + i + '].nameString" class="form-control" />';
    }
    html += '</div>';

    $('#newRow').append(html);
});

$(document).on('click', '.removeRow', function () {
    var rowCount = parseInt($("#total").val());
    rowCount--;
    $("#total").val(rowCount);
    // 同时移除作者行和对应的关联名称容器
    $(this).closest('.author-row').next('.associated-names-container').remove();
    $(this).closest('.author-row').remove();
});

2. 后端代码优化 #

去掉手动初始化集合的冗余代码，改用AuthorID直接关联子实体，提升可靠性：

foreach (var author in Author)
{
    var newAuthor = new AuthorModel
    {
        FirstName = author.FirstName
        // 无需手动初始化集合，模型绑定会自动创建（前端数据正确时）
    };

    await context.authorModels.AddAsync(newAuthor);
    await context.SaveChangesAsync();

    // 此时author.AssociatedNames可正确获取前端传入的数据
    if (author.AssociatedNames != null)
    {
        foreach (var associatedName in author.AssociatedNames)
        {
            if (!string.IsNullOrEmpty(associatedName.nameString))
            {
                var newAssociatedName = new AssociatedNames
                {
                    nameString = associatedName.nameString,
                    AuthorModelID = newAuthor.AuthorID // 用ID关联，避免导航属性延迟加载问题
                };
                await associatedNamesRepsitory.AddAsync(newAssociatedName);
            }
        }
    }
}

3. 前端HTML调整 #

移除可能干扰绑定的冗余元素：

<button id="addRow" type="button" class="btn btn-info">Add New Author</button>
<form method="post" enctype="multipart/form-data">
    <input type="hidden" name="MangaID" value="@Model.MangaID" />
    <div id="newRow">
        <input type="hidden" id="total" value="0" />
    </div>
    <input type="submit" class="btn btn-primary" value="Post" />
</form>

关键注意事项 #

• 表单字段name必须严格遵循ASP.NET Core模型绑定格式：集合名[父索引].子集合名[子索引].属性名，确保数据能正确映射到对应实体。
• 避免使用重复id属性，改用class标识可操作元素，防止DOM冲突。
• 无需手动添加集合隐藏字段，模型绑定会根据输入框name自动创建集合实例。

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