Pass (send) HTML Table rows from View to Controller in ASP.Net MVC

Article: Pass (send) HTML Table rows from View to Controller in ASP.Net MVC

Hello, Dear Colleagues

I ended up here because I'm trying to achieve making a contacts telephone list ASP.Net core MVC web app (Contacts can have any number of Telephones, so they are in another table in the DB linked by an FK). I took the example in this article, but my model is not just only a list of objects, but an object with some single properties and a List of Telephone objects (the Javascript Array). The issue I'm running into is, though while debugging I can see the values of the Telephone objects in the JS code, the List<Telephone> doesn't arrive to my Controller Action method (Insert/Update), but the other objects (Name, EMail, etc) do.

I give you the .js code as I retouched it, just in case you can help me. My action method in this case is NewOrEdit, not an Index or a List View, that is I have to populate the Telephone List and the other single properties in my View, and then in the Controller Save the Contact and his Telephone objects each one in their Table, with EF, that works fine.

$("body").on("click", "#btnAdd", function () {
    var txtTel = $("#tel");
    var txtDesc = $("#desc");
    var tBody = $("#tblTelefonos > TBODY")[0];
    var row = tBody.insertRow(-1);
    var cell = $(row.insertCell(-1));
    cell.html(txtTel.val());
    cell = $(row.insertCell(-1));
    cell.html(txtDesc.val());
    cell = $(row.insertCell(-1));
    var btnRemove = $("<input />");
    btnRemove.attr("type", "button");
    btnRemove.attr("onclick", "Remove(this)");
    btnRemove.val("Remove");
    cell.append(btnRemove);
    txtTel.val("");
    txtDesc.val("");
});

function Eliminar(boton) {
    var row = $(boton).closest("TR");
    var tel = $("TD", row).eq(0).html();
    var desc = $("TD", row).eq(1).html();
    if (confirm("¿Seguro que quieres eliminar : " + tel + " - " + desc + "?")) {
        var tabla = $("#tblTelephones")[0];
        tabla.deleteRow(row[0].rowIndex);
    }
};

$("body").on("click", "#btnSaveAll", function () {
    var telephones = new Array();
    var contact = { };

    $("#tblTelephones TBODY TR").each(function () {
        var row = $(this);
        var telephone = { };
        telephone.NroTelefono = row.find("TD").eq(0).html();
        telephone.Descripcion = row.find("TD").eq(1).html();
        //telefono.ContactoId = $("#contId").val();
        telephones.push(telephone);
    });

    contact.FullName = $("#nombre").val();
    contact.EMail = $("#mail").val();
    contact.Address = $("#direc").val();
    contact.Telephones = telephones;
    contact.IsActive = 'true';

    $.ajax({
        type: "POST",
        url: "/Contact/NewOrEdit",
        data: JSON.stringify(contact),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        succes: function (tels) {
            alert(tels + " Telephones registered.");
        }
    });
});

The Contact Model

    public class Contact
    {
        public int ContactId { get; set; }  //PK 
        public string? FullName { get; set; }
        public string? EMail {  get; set; }
        public string? Address { get; set; }
        public IEnumerable<Telephone>? Telephones { get; set; }
        public bool IsActive { get; set; }
    }

The Action method in the Controller

        [HttpPost]
        public JsonResult NewOrEdit(Contact contact)
        {
            if (contact.ContactId == 0)
            {
                _unitOfWork.Contacts.Add(contact);
                _unitOfWork.Telephones.AddRange(contact.Telephones);
            }
            else
            {
                _unitOfWork.Contacts.Update(contact);
                _unitOfWork.Telephones.UpdateRange(contact.Telephones);
            }
            return Json(_unitOfWork.Save());
        }

I would appreciate your help. Thank you!

Regards, Pablo