从.net核心数据绑定中的表单获取对象列表

Question

我正在使用带有剃须刀页面的 .net 核心，并且我有一个模型作为对象列表，如下所示：

public class Member
{
    public List<User> member { get; set; }
}

public class User
{
    public String fname { get; set; }
    public String lname { get; set; }
}

我有一个表格来填充对象，如下所示：

<form asp-controller="Population" asp-action="AddMember" method="post" class="form-horizontal" role="form" style="font-family:Cairo-Bold">
<div class="new-help add-form-container">
    <input asp-for="member.LastName" type="text" />
    <input asp-for="member.Firstname" type="text" />
</div>

当用户点击我为div复制的按钮时，用户可以从页面动态添加对象，以添加新成员，如下所示：

<div class="row">
   <div class="col-lg-12">
    <a class="clone-button"><u> Add another</u></a>
   </div>
</div>

   $(function () {
        $(".clone-button").on('click', function () {
            var ele = $(this).closest('.new-help').clone(true);
            $(this).closest('.new-help').after(ele);
        });
    });

如何绑定表单中的文本字段，以便将提交时添加的成员列表返回给控制器？

Answer 1

您应该生成带有索引号的元素，如下代码：

$(function () {

   $("#add").click(function (e) {
       e.preventDefault();
       var i = $(".items").length;
       var n = '<input type="text" class="items" name="ListItems[' + i + '].Name" />';
       $("#item-list").append(n);
   });

});

请查看此链接了解更多信息：

link

Answer 2

我发现模型中的 List 字段需要以大写字母开头。否则，我无法获得正确的模型绑定。

public class Member
{
    public int MemberId { get; set; }
    public List<User> Users { get; set; }

}

创建视图

@model AddMember.Models.Member


<form asp-action="Create" method="post">

<div class="form-group" id="item-list">
    <a href="#" id="add">Add</a>
    <br/>
    <input type="text" asp-for="Users" class="items" name="Users[0].fname"/>
    <input type="text" asp-for="Users" class="items" name="Users[0].lname" />
</div>
<input type="submit" value="Create" class="btn btn-default" />
</form>
@section Scripts {
<script>
    $(function () {

       $("#add").click(function (e) {
           e.preventDefault();
           var i = ($(".items").length) / 2;
           var n = '<input type="text" class="items" name="Users[' + i + '].fname" />' +
               '<input type="text" class="items" name="Users[' + i + '].lname" />'

           $("#item-list").append(n);
       });

    });
</script>
}

控制器：

[HttpPost]
    public async Task<IActionResult> AddMember(Member member)