[BattlFrog]

Top of the morning to you. I am researching how to dynamically add rows to a table, based on user input and I have found (what seems like) 6 different ways, none of which seem to fit m exactly. So I am looking for advice on what to research.
Here is what I am trying to do. I have a one page form. In the middle of the form is a spot for the user to enter a list of name (first, middle, last) into 3 separate text boxes. There is an 'add' button which they click which should:

• Save the name to some kind of temp storage, my first thought was session variable.
  
• Send the first, last, middle names to the view, so they are displayed in a new row of the table on the form.

All entered rows need to persist and be written to the database when the entire form is submitted. They can not be saved to the DB before hand, because the 'person' record is not in the db until the whole form is submitted.

I have tried creating a List object, thought about session variables and I think I need to use some ajax here. Did I mention I am new to MVC?

Anyway, I am hoping to find out the preferred method for doing this, a good tutorial or write up on how to do it, and I hoping to fully understand the mechanics behind what ever the correct methoid is, as I will need to do this on several occasions in this one app.

I have not included any code here, though I have a bunch of it, because I am not even sure I am going about this correctly. Once we establish the correct way to do it, I will go from there.

Thank you for reading my post.

[BattlFrog]

I have figured out how to do this, and I want to post it here, in case someelse runs into the same issue. I ended up using a combination of javascript and c#.

View. Just add a regular table with an ID. I also added a row with class 'tempRow' so I dont just have a floating table header, because that is just dumb. The 'tempRow' is removed when data is entered.:

    <table id="aliasTable" class="data-table">
            <tr>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>            
            </tr>
            <tr class="tempRow">
                <td colspan = 3>No information entered.</td>
            </tr>
        
        </table>

Here is a javascript function that adds a row, fills in the values to the table and hidden fields, removes the tempRow, clears the textbox fields and focuses on the first field again.:

        function AliasHandle()
        {
            var First = document.getElementById("PersonAliasModel_FirstNameAlias").value;
            var Middle = document.getElementById("PersonAliasModel_MiddleNameAlias").value;
            var Last = document.getElementById("PersonAliasModel_LastNameAlias").value;
            count++;
            $('.tempRow').remove();

            var row = $("<tr><td><input type='hidden' name='AliasFirstNames' value='" + First + "'>" + First + "</td><td><input type='hidden' name='AliasMiddleNames' value='" + Middle + "'>" + Middle + "</td><td><input type='hidden' name='AliasLastNames' value='" + Last + "'>" + Last + "</td></tr>");
            $("#aliasTable").append(row);

            document.getElementById("PersonAliasModel_FirstNameAlias").value = "";
            document.getElementById("PersonAliasModel_MiddleNameAlias").value = "";
            document.getElementById("PersonAliasModel_LastNameAlias").value = "";

            document.getElementById("PersonAliasModel_FirstNameAlias").focus();

        }

Next is the model. I am using a viewmodel in this case. I added 3 arrays to hold the values, so a person can enter multiple names. Model:

       public PersonAlias PersonAliasModel { get; set; }
        public string[] AliasFirstNames { get; set; }
        public string[] AliasMiddleNames { get; set; }
        public string[] AliasLastNames { get; set; }

Lastly is the controller. In here I remove the values from the array and put them in a list for later sending to the DB, I have not gotten to the 'sending to the DB' part yet and if I remember, I will post it. Controller:

                List<PersonAlias> AliasList = new List<PersonAlias>();

                for (int i = 0; i < model.AliasFirstNames.Count(); i++)
                {
                    PersonAlias pa = new PersonAlias();
                    
                    pa.FirstNameAlias = model.AliasFirstNames[i];
                    pa.MiddleNameAlias = model.AliasMiddleNames[i];
                    pa.LastNameAlias = model.AliasLastNames[i];
                    AliasList.Add(pa);
                }