使用 Html.BeginForm() ASP.NET MVC 将对象列表从控制器传递到视图时出错

Question

I want to get multiple instances of my model objects sent to the controller as a list but for some reason, my code gives the error:System.ArgumentNullException: 'Value cannot be null.

This is my View:

 @model List<MVCModel.Models.Student> <b>Items</b> @ViewBag.Items <br /> <b>Value</b> @ViewBag.Value <br /> @using (Html.BeginForm("Form", "Home", FormMethod.Post)) { <table> <tbody id="GenaratorList"> <tr> @{ for (int c = 0; c < Model.Count(); c++) { <td>Enter Name: </td> <td>@Html.TextBoxFor(m => m[c].Name, new {id = "Name"})</td> <td>Enter Age: </td> <td>@Html.TextBoxFor(m => m[c].Age, new {id = "Age"})</td> <td><input type="button" value="Add" onclick="addGenarator()" /></td> } } </tr> <tbody> </table> <input type="submit" value="Submit Form"/> } <script> count = 0; function addGenarator() { var Name = $('#Name').val(); var Age = $('#Age').val(); var Student = "studentModels[" + count + "]"; $('#GenaratorList').append('<tr><td><input id="' + Student + '.Name" Name="' + Student + '.Name" type="text" class="form-control" readonly value="' + Name + '"></td><td><input id="' + Student + '.Age" Age="' + Student + '.Age" type="text" class="form-control" readonly value="' + Age + '"></td></tr>'); $('#Name,#Age').val(''); count++; } </script>

This is my Controller:

 [HttpPost] public ActionResult Form(List<Student> s) { ViewBag.Items = s.Count; ViewBad.Value = s[0].Age return View("Index"); }

This is my model:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCModel.Models { public class Student { public string Name { get; set; } public int Age { get; set; } } }

Answer 1

    <script>
    count = 0;
    function addGenarator() {
        var Name = $('#Name').val();
        var Age = $('#Age').val();
        var Student = "s[" + count + "]";

        var html = `
        <tr>
            <td><input id="${Student}.Name" name="${Student}.Name" type="text" class="form-control" readonly value="${Name}" /></td>
            <td><input id="${Student}.Age" name="${Student}.Age" type="text" class="form-control" readonly value="${Age}" /></td>
        </tr>
    `;
        $('#GenaratorList').append(html);
        $('#Name,#Age').val('');
        count++;
    }
</script>