When passing a JavaScript Object Array through ajax to the controller, I noticed that if there are more than 11 objects in the array, the controller receives it as null. However, with 11 or fewer objects, the array is received successfully. Here is an example: https://i.sstatic.net/amqxP.png

Upon receiving the passed employee array in the controller, it looks like this: https://i.sstatic.net/8p0Kh.png

But when I pass a larger JavaScript array object, its value ends up being null. https://i.sstatic.net/pHFqj.png

https://i.sstatic.net/OWCTF.png

I've tested this issue with an array of 50 objects - all of which match the Model properties perfectly and have confirmed there's nothing wrong with the modal.

If anyone can point out where I might be going wrong, please let me know.

Below is a snippet of my JS code: Essentially, I'm attempting to read data from a CSV file and store it in a JavaScript array. The properties of the JavaScript array align with those of the model fields.

let employees = [];
let reader = new FileReader();

$("#btnSave").click(function () {
    Save();
})

$("#file").change(function (e) {
    //getting the uploaded file
    let fileUpload = $("#file").get(0)
    let file = fileUpload.files[0];
    //load the reader
    reader.onloadend = function (evt) {
        let lines = evt.target.result;
        if (lines && lines.length > 0) {
            let allRows = CSVToArray(lines);
            let header = allRows[0];
            let thead = $('thead tr')
            thead.html("")
            let tbody = $('tbody')
            header.forEach(h => thead.append(`<th>${h}</th>`))
            for (let i = 1; i < allRows.length; i++) {
                tbody.append('<tr>')
                let cellArr = allRows[i];
                let emp = {}
                for (let k = 0; k < cellArr.length; k++) {
                    emp[allRows[0][k]] = cellArr[k] + "";
                    tbody.append(`<td>${cellArr[k]}</td>`)
                }
                tbody.append('</tr>')
                employees.push(emp)
            }
        }
    }
    reader.readAsBinaryString(file)
})

function CSVToArray(strData, strDelimiter) {
    strDelimiter = (strDelimiter || ",");
    let objPattern = new RegExp(
        (
            "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
            "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
            "([^\"\\" + strDelimiter + "\\r\\n]*))"
        ),
        "gi"
    );
    let arrData = [[]];
    let arrMatches = null;

    while (arrMatches = objPattern.exec(strData)) {
        let strMatchedDelimiter = arrMatches[1];
        let strMatchedValue = [];
        if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {
            arrData.push([]);
        }
        if (arrMatches[2]) {
            strMatchedValue = arrMatches[2].replace(new RegExp("\"\"", "g"), "\"");
        } else {
            strMatchedValue = arrMatches[3];
        }
        arrData[arrData.length - 1].push(strMatchedValue);
    }
    return (arrData);
}

function Save() {
    console.log( employees)
    if (employees.length > 0) {
        $.ajax({
            url: '/Master/SaveMaster',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: JSON.stringify(employees),
            success: function (result) {
                /*for (let k = 0; k < result.length; k++) {
                    $('tbody tr:eq(' + (result[k].employeeId - 1) + ')').css('border', '3px solid #dc3545');
                    let props = Object.entries(employees[result[k].employeeId])
                    console.log(result[k])
                    let cellIndex = props.findIndex(p => p[0] === result[k].field)
                    $('tbody tr:eq(' + (result[k].employeeId - 1) + ') td:eq(' + cellIndex + ')').css({ 'background-color': '#dc3545', 'color': '#ffffff' });
                    $('tbody tr:eq(' + (result[k].employeeId - 1) + ') td:eq(' + cellIndex + ')').attr("title", result[k].error)
                }
                $(".main-container").append(`
                       <div class="alert alert-success alert-dismissible fade show" role="alert">
                           Data Successfully imported into the database
                       </div>
                    `)*/
            },
            error: function (result) {
                console.log(result)
            }
        })
    }
    else {
        alert("No Data Found.");
    }
}

Here is my controller:

        [Route("/Master/SaveMaster")]
        [HttpPost]
        public List<MasterError> SaveMaster(List<MasterData> masterData)
        {
            List<MasterError> masterErrorsList = new List<MasterError>();

            //for(int i = 0; i < masterData.Count(); i++)
            //{
                //Employee employee = new Employee();
                //employee.ArabicName = masterData[i].ArabicName;
                //employee.Code = masterData[i].Code;
                //employee.Email = masterData[i].Email;
                //employee.FirstName = masterData[i].FirstName;
                //employee.LastName = masterData[i].LastName;
                //employee.MiddleName = masterData[i].MiddleName;
                //employee.Mobile = masterData[i].Mobile;
                //employee.PassportName = masterData[i].PassportName;
                //employee.PassportNo = masterData[i].PassportNo;
                //employee.ResidentId = masterData[i].QatarID;
                //checkModel(employee);
            //}
            return masterErrorsList;
        }