Error when passing list of objects from Controller to View using Html.BeginForm() ASP.NET MVC-CodePudding

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"  readonly value="'   Name   '"></td><td><input id="'   Student   '.Age" Age="'   Student   '.Age" type="text"  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; }
    }
}

CodePudding user response：

    <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"  readonly value="${Name}" /></td>
            <td><input id="${Student}.Age" name="${Student}.Age" type="text"  readonly value="${Age}" /></td>
        </tr>
    `;
        $('#GenaratorList').append(html);
        $('#Name,#Age').val('');
        count  ;
    }
</script>