Student attendance form data unable to stored in database tables

I created a attendance system in asp.net,
there are A to Z alphabet, when teacher click on A alphabet then student name start with A alphbet will show, then teacher can click or select student name then selected student name appeared in Attendees box. after that i submit the Attendees list but data is not stored in database table. data seen in console but not in db tables.

type here
aspx front end
<span class="alphabates" onclick="filterNames('A')">A</span>
<span class="alphabates" onclick="filterNames('B')">B</span>

<asp:Button ID="btn_saveAttendance" runat="server" class="btn btn-primary btn-rounded" Text="Save Attendance" OnClientClick="saveAttendance(); return false;" />

js
 const studentsSet = new Set();

    document.addEventListener('DOMContentLoaded', function () {
        fetchStudents();
    });

    function fetchStudents(letter = '') {
        var xhr = new XMLHttpRequest();
        var url = letter ? 'StudentAttendacePage.aspx/GetStudentsByLetterJson' : 'StudentAttendacePage.aspx/GetAllStudentsJson';
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    var students = JSON.parse(response.d);
                    displayStudents(students);
                } else {
                    console.error('Error fetching students:', xhr.statusText);
                }
            }
        };
        xhr.send(JSON.stringify({ letter: letter }));
    }

    function displayStudents(students) {
        const namesList = document.querySelector('.attendancename .names');
        namesList.innerHTML = '';

        students.forEach(name => {
            const li = document.createElement('li');
            li.textContent = name;
            li.onclick = () => addToAttendees(name);
            namesList.appendChild(li);
        });
    }

    function addToAttendees(name) {
        if (!studentsSet.has(name)) {
            studentsSet.add(name);
            const attendeesList = document.querySelector('.attendeeslist');
            const div = document.createElement('div');
            div.textContent = name;

            const removeButton = document.createElement('button');
            removeButton.textContent = 'Remove';
            removeButton.onclick = () => removeFromAttendees(div, name);
            div.appendChild(removeButton);

            attendeesList.appendChild(div);
        }
    }

    function removeFromAttendees(element, name) {
        element.remove();
        studentsSet.delete(name);
    }

    function filterNames(letter) {
        fetchStudents(letter);
    }

    function saveAttendance() {
        const studentIds = Array.from(studentsSet); // Ensure IDs are integers
        const isLate = false; // Adjust based on your actual logic

        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:55042/attendance/StudentAttendacePage.aspx/SaveAttendance', true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    alert(response.d); // Assuming response.d contains the success message
                } else {
                    console.error('Error saving attendance:', xhr.statusText);
                    alert('Error saving attendance. Check the console for details.');
                }
            }
        };

        const data = JSON.stringify({ studentIds, isLate });
        console.log('Sending data:', data); // Log data for debugging
        xhr.send(data);
    }



aspx.cs for db entry
[WebMethod]
    public static void SaveAttendance(List<string> attendeeIDs, int sessionID, int? specialSessionID, DateTime date)
    {
        string connectionString = "Server=IN-03;Database=ats;Integrated Security=True;MultipleActiveResultSets=True";

        try
        {
            using (SqlConnection cn = new SqlConnection(connectionString))
            {
                cn.Open();

                foreach (string studentName in attendeeIDs)
                {
                    int? studentID = GetStudentID(studentName, cn);

                    if (studentID.HasValue)
                    {
                        // Insert attendance record
                        string insertQuery = "INSERT INTO AttendanceRecord (Date, SessionID, SpecialSessionsID, StudentID, Late) VALUES (@Date, @SessionID, @SpecialSessionsID, @StudentID, @Late)";

                        using (SqlCommand cmdInsert = new SqlCommand(insertQuery, cn))
                        {
                            cmdInsert.Parameters.AddWithValue("@Date", date);
                            cmdInsert.Parameters.AddWithValue("@SessionID", sessionID);
                            cmdInsert.Parameters.AddWithValue("@SpecialSessionsID", (object)specialSessionID ?? DBNull.Value);
                            cmdInsert.Parameters.AddWithValue("@StudentID", studentID.Value);
                            cmdInsert.Parameters.AddWithValue("@Late", false);

                            cmdInsert.ExecuteNonQuery();
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            // Log the exception or handle it as needed
            throw new Exception("An error occurred while saving attendees.", ex);
        }
    }

i tried the javascript json to send, stored data,
i am expecting solution, like which code or things i missed in the code.
front end
console log