Error when passing list of objects from Controller to View using 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>