ASP.net MVC4: Add elements to a collection taken from a database request using AJAX and send them to the controller

Question

I’m trying to create a form based on data from an AJAX request. Users should be able to add elements by selecting them and add those elements to a form that can be submitted. The elements should be added to a collection named Employees.

The elements are requested via AJAX from the database and have the primary key of the entity. When I look at the HTML generated by the framework helpers it looks kind of like this for the hidden fields with the Ids:

<input id="Employees_0__EmployeeId" name="Employees[0].EmployeeId" value="1" type="hidden">

Like I see the 0 is the index for the collection-element. How can I manage it to add and remove the elements dynamically the right way using the framework? Are there some helpers, that can support me on doing so?

If possible, I don't wanna code a workaround that manages the used indizes, to prevent overwriting an item for the collection.

UPDATE:

I tried the suggested solution but it fails, cuz it seems the index must be incremental, starting by 0:

            var dummyindex = (new Date()).getTime();

        var inputelement = $('<input data-val="true" id="Employees_'
            + dummyindex
            + '_EmployeeId" name="Employees['
            + dummyindex
            + '].EmployeeId" value="'
            + $(this).parent().attr('id') // this is the parent key
            + '" type="hidden">');

Refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Apr 13 '16 at 08:15
@StephenMuecke thanks for the links. Somehow it doesnt work with this solutions, only indizes beginning with 0 and +1 for each another will be accepted, otherwise the collections is null at httppost. Code is appended to my post on top. — Programmosaurus, Apr 13 '16 at 09:58
What does the code in your edit have to do with the my answers I linked to. Did you even bother to try it (in which case you would know it works) — , Apr 13 '16 at 10:05
I added the client side code for the item generation and used the client-side solution (Option 2), which doesnt contact the server every time the item is added. Like I said, it only works incremental. I am using IEnumerable as collection @MVC4 — Programmosaurus, Apr 13 '16 at 10:16

score 0 · Answer 1 · edited May 23 '17 at 11:59

To achieve this you have to generate an HTML output, that has the following syntax for all the elements you wanna send to the server:

<input name="Employees.Index" value="1460543662419" type="hidden">
<input name="Employees[1460543662419].EmployeeId" value="1" type="hidden">
...other input elements you want to send to the server...
<label>Emp1</label>

Source

First a hidden field with the generated index from the above tried solution. The next one contains the attribute of the object you want to post (here I used EmployeeId). It uses the index you defined in the hidden previously. In the end I used a tag to display some name.

So I just had to extend the above mentioned solution by one line of code:

var dummyindex = (new Date()).getTime();
var inputindexfield = '<input type="hidden" name="Employees.Index" value="' + dummyindex + '" />';

Hope it helps if you cannot use the solutions in the below mentioned link :)

Tried Solution

ASP.net MVC4: Add elements to a collection taken from a database request using AJAX and send them to the controller

1 Answers1