Get list of object from a form in .net core data binding

Question

i am using .net core with razor pages and i have a model as a list of object as below :

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

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

and i have a form to fill the object as below :

<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>

and the user can add a object dynamically from the page when he clicks on a button i duplicate for him for div to add a new member as below :

<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);
        });
    });

how can i bind the text fields in the form in order to return to the controller the list of members added on submit?

Refer [Submit same Partial View called multiple times data to controller?](https://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options — , Oct 25 '18 at 21:42

score 1 · Answer 1 · answered Oct 25 '18 at 20:24

You should generate element with index number like this code :

$(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);
   });

});

Please see this link for more information:

link

Ryan · Answer 2 · 2018-10-26T09:35:17.470

What I find is that List field in model needs to begin with a capital letter.Otherwise, I could not get a correct model binding.

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

}

Create view

@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>
}

Controller:

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

Get list of object from a form in .net core data binding

2 Answers2