'CRUD with pure JS on a List, no API/AJAX

I have a table, Manifest. I want to display the manifest for a particular job to the user, and let them Create, Update, and Delete on their manifest, on one page using JS. I want to do this without an api or ajax because, frankly, I can't wrap my head around it. It's probably the better way to go. But another project, not today.

I have successfully displayed the List of existing manifest items to the view. I have a table with inputs for each existing value. I have the "remove" button for each to delete the corresponding row. I have the JS to add a new, blank row to the table. And I have the "submit" button to post the data.

However, when I submit, it doesn't seem to pass/save any new records that I add to the table, and I'm not sure why. For the [HttpPost], I chose to delete the existing records, and then rewrite them into the db.

My question is why doesn't the new row data pass/save to db.

I would appreciate any help or advice.

The view [truncated slightly for easy viewing]

    @model List<AURA.Models.Manifest>

    <h4>manifest</h4>
    <form action="Manifest" method="post">
    <input type="hidden" value="@ViewBag.zero" />
    <input type="submit" value="Submit" style="float:right" />
    <br />
    <table id="tableToClone" border="1" cellpadding="1">
        <thead>
            <tr>
                
                <th style="width:30px">
                    TYPE
                </th>
                <th>
                    DESCRIPTION
                </th>
                <th>
                    WRAP?
                </th>
                <th>
                    ASSEMBLY?
                </th>
                <th>
                    NOTES
                </th>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr id="rowToClone" style="display:none;">               
                <td style="width:30px">
                    <input type="hidden" name="zero" value="@ViewBag.zero" />
                    @Html.DropDownList("manifests.Type",
                        new SelectList(new List<Object>
                        {
                            new { value = "L", text = "Large"},
                            new { value = "S", text = "Small"},
                            new { value = "H", text = "Hand"},
                            new { value = "F", text = "Fragile"},
                        },
                        "value",
                        "text"
                        )
                        )
                </td>
                <td>
                    @Html.TextBox("manifests.Name")
                </td>
                <td>
                    @Html.DropDownList("manifests.Wrap",
                        new SelectList(new List<Object>
                        {
                        new { value = "FALSE" , text = "NO"  },
                        new { value = "TRUE" , text = "YES" },
                        },
                        "value",
                        "text"
                       )
                    )
                </td>
                <td>
                    @Html.DropDownList("manifests.Assembly",
                   new SelectList(new List<Object>
                        {
                        new { value = "FALSE" , text = "NO"  },
                        new { value = "TRUE" , text = "YES" },

                        },
                        "value",
                        "text"
                       )

                    )
                </td>
                <td>
                    @Html.TextBox("manifests.Notes","")
                </td>
                <td>
                    <input type="button" id="btRemoveRow" value="REMOVE" onclick="RemoveRow(this)" />
                </td>
            </tr>
            @for (int i = 0; i < Model.Count; i++)
            @*@foreach (var item in Model.Manifests.Where(p => p.Type != "B" && p.Type != "C"))*@
            {
                <tr>
                    
                    <td style="width:30px">
                        @Html.Hidden("manifests[" + i + "].Id",
                            Model[i].Id,
                            new { @readonly = "readonly" })
                        @Html.Hidden("manifests[" + i + "].Zero",
                            Model[i].Zero,
                            new { @readonly = "readonly" })
                        @Html.DropDownList("manifests[" + i + "].Type",
                            new SelectList(new List<Object>
                            {
                                new { value = "L", text = "Large"},
                                new { value = "S", text = "Small"},
                                new { value = "H", text = "Hand"},
                                new { value = "F", text = "Fragile"},
                            },
                            "value",
                            "text",
                            Model[i].Type
                            )
                            )
                    </td>
                    <td>
                        @Html.TextBox("manifests[" + i + "].Name", Model[i].Name)
                    </td>
                    <td>
                        @Html.DropDownList("manifests[" + i + "].Wrap",
                            new SelectList(new List<Object>
                            {
                            new { value = "FALSE" , text = "NO"  },
                            new { value = "TRUE" , text = "YES" },
                            },
                            "value",
                            "text",
                            Model[i].Wrap
                           )
                        )
                    </td>
                    <td>
                        @Html.DropDownList("manifests[" + i + "].Assembly",
                       new SelectList(new List<Object>
                            {
                            new { value = "FALSE" , text = "NO"  },
                            new { value = "TRUE" , text = "YES" },
                            },
                            "value",
                            "text",
                            Model[i].Assembly
                           )
                        )
                    </td>
                    <td>
                        @Html.TextBox("manifests[" + i + "].Notes",
                            Model[i].Notes,
                            new { @readonly = "readonly" })
                    </td>
                    <td>
                        <input type="button" id="btRemoveRow" value="REMOVE" onclick="RemoveRow(this)" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>
<input type="button" value="Add Row JS" id="btAddF" style="float: left" onclick="addRow()" />
    <script>
    function addRow() { 
            var row = document.getElementById("rowToClone");
    
            var table = document.getElementById("tbody");
            var clone = row.cloneNode(true);
            clone.style.display = "table-row";
           
            table.appendChild(clone);
        }
    
        function RemoveRow(text) {
            var cell = text.parentNode;
            var row = cell.parentNode;
            $(row).remove();
        }
    </script>

and the Controller

[HttpPost]
    public async Task<IActionResult> Manifest(List<Manifest> manifests, string zero)
    {
        //string zero = "111111-1";

        //delete existing
        foreach (Manifest ListManifest in manifests)
        {
            //for existing
            if (!(ListManifest.Id == 0))
            {
                var existing = _context.Manifests.Find(ListManifest.Id);

                _context.Manifests.Remove(existing);
                //await _context.SaveChangesAsync();

            }

            Manifest manifest = new Manifest();
            manifest.Zero = zero;
            manifest.Type = ListManifest.Type;
            manifest.Name = ListManifest.Name;
            manifest.Wrap = ListManifest.Wrap;
            manifest.Assembly = ListManifest.Assembly;
            manifest.Notes = ListManifest.Notes;

            _context.Add(manifest);
            await _context.SaveChangesAsync();
        }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source