Model not capturing dynamic input fields

Question

I have a view model InvoiceViewModel and inside the InvoiceViewModel I have a property Items which is type list.

public class InvoiceViewModel
{
    [Key]
    public int InvoiceNumber { get; set; }
    public int ClientID { get; set; }
    public List<ItemsViewModel> Items { get; set; }
    ...
}

The ItemsViewModel model looks like this

public class ItemsViewModel
{
    public string Name { get; set; }
    public string UnitPrice { get; set; }
    public string Quantity { get; set; }
    public string TotalAmount { get; set; }
}

The following fields get added into the HTML using jQuery dynamically

<tr id="InvoiceLine-606818967">
    <td class="text-left line-description">
        <textarea name="Items[].Name" id="line-description-606818967" class="band autogrow" rows="1"></textarea>
    </td>
    <td class="text-right line-unit-cost">
        <input type="number" name="Items[].UnitPrice" placeholder="0.00" min="0.00" step="0.01">
    </td>
    <td class="text-right line-quantity">
        <input type="number" name="Items[].Quantity" placeholder="0">
    </td>
</tr>
<tr id="InvoiceLine-2196849859">
    <td class="text-left line-description">
        <textarea name="Items[].Name" id="line-description-2196849859" class="band autogrow" rows="1"></textarea>
    </td>
    <td class="text-right line-unit-cost">
        <input type="number" name="Items[].UnitPrice" placeholder="0.00" min="0.00" step="0.01">
    </td>
    <td class="text-right line-quantity">
        <input type="number" name="Items[].Quantity" placeholder="0">
    </td>
</tr>
<tr id="InvoiceLine-7114958211">
    <td class="text-left line-description">
        <textarea name="Items[].Name" id="line-description-7114958211" class="band autogrow" rows="1"></textarea>
    </td>
    <td class="text-right line-unit-cost">
        <input type="number" name="Items[].UnitPrice" placeholder="0.00" min="0.00" step="0.01">
    </td>
    <td class="text-right line-quantity">
        <input type="number" name="Items[].Quantity" placeholder="0">
    </td>
</tr>

When the form is submitted, the following is what I see during debugging of the InvoiceViewModel

Please advise what am I doing wrong?

You say fields are dynamically added, do you specify the index for each item on the `name` of the input? It should be something like `name="Items[0].Name"`. — colinD, Aug 23 '19 at 10:28
@colinD I didn't specify the index like `Items[0].Name` however I did something like `Items[].Name` — Red Virus, Aug 23 '19 at 10:32
Yes, see the link. You need to specify the indexes. Actually a better way to do that using editor templates is described in the answer. — colinD, Aug 23 '19 at 10:34

Emre KAS · Answer 1 · 2019-08-23T09:50:58.610

3

I don't know your error message but maybe you can write Items[iterationIndex].Quantity or item.Quantity etc. Probably when submit your form, model not know which index is mine

edited Aug 23 '19 at 09:50

answered Aug 23 '19 at 09:36

Emre KAS

62
4

Hello, I have edited my question with the image of the property values in the model. Please see if you can help. – Red Virus Aug 23 '19 at 10:23

Model not capturing dynamic input fields

1 Answers1