adding new values to database from view whose model is a list

Question

in an ASP.NET-MVC 5 application I have the following models

class Employee {
 int EmployeeID {get;set;}
 string FirstName {get;set;}
 List<OfficeLocations> OfficeLocations {get;set;}
}

class OfficeLocations {
 int OfficeLocationsID {get;set;}
 //foreign key
 int EmployeeID {get;set;}
 string Value1 {get;set;}
 string Value2 {get;set;}
}

I have an edit view for modifying or ADDING different office locations that an employee could belong to. It looks something like this:

@model List<Project.Models.OfficeLocations>
 @for (int i = 0; i < Model.Count; i++) {
  @Html.EditorFor(m => m[i].CitLocation, new { htmlAttributes = new { @class = "my_editor" } })
  @Html.HiddenFor(m => m[i].OfficeLocationsID)
  @Html.HiddenFor(m => m[i].EmployeeID)
 }
 //extra editor box for adding a new value
 @Html.Editorfor(??????.Value)

I'm a little confused as to how to add new entries to my model (list) in the database table. What do I put in the parameter for the extra Editorfor box (where all the ???? are)

also, what would the controller action method look like?

For that you are going to need javascript/jquery. [This example](http://stackoverflow.com/questions/24026374/adding-another-pet-to-a-model-form/24027152#24027152) may help you get started — , Oct 23 '14 at 13:14
thank you for the example, do you mind adding an answer to the question, and add a bit more detail like what does the post method accept as a parameter? Just the same list that was passed to the view initially? — Abdul Ahmad, Oct 24 '14 at 13:50
I can add an answer with more detail, but a few things I don't understand. Do you want your `@model` to be `Employee` so you can add `OfficeLocations` to the employee, or is it just `@model List` in which case how do you pass `EmployeeID`? and what is `@Html.EditorFor(m => m[i].Value1` - you don't have a property named `Value1` - do you mean `m => m[i].CityLocation`? — , Oct 24 '14 at 23:38
lol good points.. actually I'll update my code, but yes I nee the model to be List and I can pass a model by doing m => m[i].EmployeeID — Abdul Ahmad, Oct 25 '14 at 00:00
You cant necessary use `m => m[i].EmployeeID` because at some point the collection will not contain any values so `m => m[i].EmployeeID` will not return anything (e.g. when you first create and employee). I'm not sure why your model would not be `Employee`? Aren't you creating or editing and `Employee` and trying to add `OfficeLocations` to `Employee`? — , Oct 25 '14 at 00:04
oh yea sorry.. I'm trying to tie my code to this simple example, its a bit more complex on my end. Let's assume there isn't an EmployeeID- I'm actually using your example from the first comment, so I'm using and cloning it using the javascript- but the javascript isn't replacing the "#" with the right index, is there a syntax error? (Sorry I don't know how to make the code in the comments different) — Abdul Ahmad, Oct 25 '14 at 00:12
I mean I don't know how to put code in a code block in the comments section — Abdul Ahmad, Oct 25 '14 at 00:21
Use backticks. See [Comment formatting](http://stackoverflow.com/editing-help#comment-formatting) (click help to the right of the comment block then Learn more) — , Oct 25 '14 at 00:30
The snippet you posted in your last comment has no relationship to the model posted in your question. If your still having problems I suggest you edit you question with the html and script you have tried and I'll take a look. — , Oct 25 '14 at 02:15
I actually figured out how to solve the issue by using the link you provided as a guide. Please see my added answer and let me know how bad of a fix it is ;), lol jk, let me know what you think — Abdul Ahmad, Oct 25 '14 at 23:08

score 1 · Answer 1 · answered Oct 23 '14 at 13:14

change your viewmodel to have an officelocation and a list of officelocation... With that you can add the non list officelocation object in you extra editor box... Or you can just retain your viemodel like that and just manually create a model using jquery and pass it using an ajax jquery...

score 0 · Accepted Answer · answered Oct 25 '14 at 23:13

To fix this issue I came up with the following javascript:

<script>

    $(document).ready(function () {
        index = 0;
    });

    $('#add_button').click(function () {

        var placeHolderNameAttribute = "List2[#].Value1";
        var indexedNameAttribute = "List2[" + index + "].Value1";

        var placeHolderIdAttribute = "new_lastName_input";
        var indexedIdAttribute = "new_lastName_input" + index;

        document.getElementById(placeHolderIdAttribute).name = indexedNameAttribute;
        document.getElementById(placeHolderIdAttribute).id = indexedIdAttribute;

        var clone1 = $("#new_lastName_input" + index).clone();

        document.getElementById(indexedIdAttribute).name = placeHolderNameAttribute;
        document.getElementById(indexedIdAttribute).id = placeHolderIdAttribute;

        if (index == 0) {
            $('#nlnPlaceHolder').remove();
        }
        $('#LN_editor_box').append(clone1);
        index += 1;
    });

</script>

and the following placeholder input field

<input id="new_lastName_input" class="my_editor" type="text" name="List2[#].Value1" value="New Last Name"  />

and now my controller post method accepts two parameters, the original list of updated/edited values, and a new list of only new values.

ActionResult myMethod(List<OfficeLocations> list1, OfficeLocations[] list2)

and if the value is in list1 then it will update in the database, and if it's in list2 it will be added

adding new values to database from view whose model is a list

2 Answers2