Manage.cshtml

<table class="display table" id="ManageResident" style="width:100%">
    <thead>
        <tr>
            <th>Resident ID</th>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>View</th>
        </tr>
    </thead>
    <tbody>
      @foreach (var resident in Model)
        {
            <tr>
                <td>@resident.ResidentID</td>
                <td>@resident.FirstName</td>
                <td>@resident.MiddleName</td>
                <td>@resident.LastName</td>
                <td>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#residentModal" data-resident='@Html.Raw(System.Text.Json.JsonSerializer.Serialize(resident))'>
                        View
                    </button>
                </td>
            </tr>
        }

    </tbody>
</table>

resident.js

$('#residentModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var resident = button.data('resident');

    console.log('Resident data:', resident); // Log the entire resident object to console

    var modal = $(this);
    modal.find('#modalResidentID').text(resident.residentID);
    modal.find('#modalFirstName').text(resident.firstName);
    modal.find('#modalMiddleName').text(resident.middleName);
    modal.find('#modalLastName').text(resident.lastName);
    modal.find('#modalBirthdate').text(resident.birthdate);
    modal.find('#modalAge').text(resident.age);
    modal.find('#modalEmail').text(resident.email);
    modal.find('#modalCreationDate').text(resident.creationDate);
    modal.find('#modalModifiedBy').text(resident.modifiedBy);
    modal.find('#modalModifiedDate').text(resident.modifiedDate);

    // Check if addresses are defined and not empty
    if (resident.addresses && resident.addresses.length > 0) {
        var addresses = resident.addresses;
        var addressList = modal.find('#modalAddresses').empty();
        addresses.forEach(function (address) {
            addressList.append('<li>' + address.street + ', ' + address.city + ', ' + address.state + ', ' + address.zipCode + '</li>');
        });
    } else {
        modal.find('#modalAddresses').html('<li>No addresses found.</li>');
    }

    // Check if contacts are defined and not empty
    if (resident.contacts && resident.contacts.length > 0) {
        var contacts = resident.contacts;
        var contactList = modal.find('#modalContacts').empty();
        contacts.forEach(function (contact) {
            contactList.append('<li>' + contact.contactType + ': ' + contact.contactValue + '</li>');
        });
    } else {
        modal.find('#modalContacts').html('<li>No contacts found.</li>');
    }
});

ResidentController.cs

public async Task<IActionResult> Manage()
{
    var residents = await _context.WMS_Resident
                        .Include(r => r.Addresses)
                        .Include(r => r.Contacts)
                        .ToListAsync();

    var residentViewModels = residents.Select(r => new ResidentViewModel
    {
        ResidentID = r.ResidentID,
        FirstName = r.FirstName,
        MiddleName = r.MiddleName,
        LastName = r.LastName,
        Birthdate = r.Birthdate,
        Age = r.Age,
        Email = r.Email,
        CreationDate = r.CreationDate,
        ModifiedBy = r.ModifiedBy,
        ModifiedDate = r.ModifiedDate,
        Addresses = r.Addresses.Select(a => new AddressViewModel
        {
            AddressID = a.AddressID,
            ResidentID = a.ResidentID,
            AddressType = a.AddressType,
            HouseNumber = a.HouseNumber,
            Street = a.Street,
            Barangay = a.Barangay,
            CreationDate = a.CreationDate,
            ModifiedBy = a.ModifiedBy,
            ModifiedDate = a.ModifiedDate
        }).ToList(),
        Contacts = r.Contacts.Select(c => new ContactViewModel
        {
            ContactID  = c.ContactID,
            ResidentID = c.ResidentID,
            ContactType = c.ContactType,
            ContactNumber = c.ContactNumber,
            CreationDate = c.CreationDate,
            ModifiedBy = c.ModifiedBy,
            ModifiedDate = c.ModifiedDate
        }).ToList()
    }).ToList();

    return View(residentViewModels);
}

In this scenario Manage.cshtml display all the resident but in limited fields but the resident wants to view all the information just clicking the view button it displays all the details of resident via modal.

But I encountered an issue once I clicked the view button of specific resident the modal information is NULL

Can anyone help me with this issue