Post an array of object from view to controller, in asp.net core

Question

My problem is following. I have a class lets call it MyModel. It contains a list of Item,

public class MyModel
{
    public int Value { get; set; }
    public string Identity { get; set; }
    public List<Item> Items { get; set; }
}

public class Item
{
    public string Name { get; set; }
    public string Description { get; set; }
}

What i want to do is to create a View (form) in .cshtml and post the result to controller I know how to do it for a model where i do have only strings or numbers but how do i do it when i want the user to enter Value, Identity and then a list with Item. So the user should enter
Value, Identity and (many times) Item.

Any suggestion how to do it? Have not seen any example with that so therefore i am asking.

Answer 1

For posting an array of object from view to controller, you could refer to following demo :

View

@model Demo3.Models.MyModels.MyModel

<div class="row">
 <div class="col-md-4">
    <form asp-action="CreateModel">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Value" class="control-label"></label>
            <input asp-for="Value" class="form-control" />
            <span asp-validation-for="Value" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Identity" class="control-label"></label>
            <input asp-for="Identity" class="form-control" />
            <span asp-validation-for="Identity" class="text-danger"></span>
        </div>
        <div class="form-group">
            <table id="myRows" class="table">
                <tr class="myrow">
                    <td class="section table-column-center">
                        <label asp-for="Items[0].Name" class="control-label"></label>
                        <input asp-for="Items[0].Name" class="form-control" />
                        <span asp-validation-for="Items[0].Name" class="text-danger"></span>
                    </td>
                    <td class="section table-column-center">
                        <label asp-for="Items[0].Description" class="control-label"></label>
                        <input asp-for="Items[0].Description" class="form-control" />
                        <span asp-validation-for="Items[0].Description" class="text-danger"></span>
                    </td>
                </tr>

            </table>
        </div>
        <div class="item-add">
            <a id="add-row" class="link-button">Add Row</a>
        </div>
        <br/>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
 </div>
</div>

@section Scripts
{
<script>
$("#add-row").click(function () {
        var nextId = $(".myrow").length;

        var rowHtml = '<tr class="myrow">' +
            '<td class="section table-column-center" >' +
            '<input class="form-control" type="text" id="Items_' + nextId + '_Name" name="Items[' + nextId + '].Name" value=""/>' +

            '<span class="text-danger field-validation-valid" data-valmsg-for="Items[' + nextId + '].Name" data-valmsg-replace="true"></span>' +

            '</td>' +

            '<td class="section table-column-center">' +
            '<input class="form-control" type="text" id="Items_' + nextId + '_Description" name="Items[' + nextId + '].Description" value=""/>' +

            '<span class="text-danger field-validation-valid" data-valmsg-for="Items[' + nextId + '].Description" data-valmsg-replace="true"></span>' +

            '</td>'+

            '</tr>';

        $("#myRows").append(rowHtml);
    });
 </script>
 }

Controller

    public IActionResult PassDataList()
    {
        return View();
    }

    [HttpPost]
    public IActionResult  CreateModel(MyModel model)
    {
        return Json(model);
    }

Result