将动态添加的html表行作为参数发布到控制器- ASP.NET核心/MVC

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

<button onclick="addRow()">Add Row</button>
<form action="/controller/action" method="post" id="myForm">
  <input type="submit" value="Submit">
</form>

<script>
function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "<input type='text' name='name'>";
  cell2.innerHTML = "<input type='text' name='age'>";
}

document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // Prevent form submission
  var formData = new FormData(this); // Get form data
  fetch("/controller/action", {
    method: "POST",
    body: formData
  }).then(function(response) {
    // Handle response
  });
});
</script>

[HttpPost]
public IActionResult Action([FromForm]List<PersonModel> persons)
{
    // Handle submitted data
    foreach (var person in persons)
    {
        // Process each person
        // ...
    }
    return RedirectToAction("Index");
}

public class PersonModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}