How to send data from a controller method to a modal popup in razor

Hello. I'm implementing asp.net core 3.1 project. I have a razor view and in razor, I'm showing some data that are getting from the Index method in my controller which its name is RequestorsController. In razor, for each row there is a link which is called"Details" and I want when the user clicks on the Details button for each row, the related id for that row passes to a method called "Details" in RequestorsController and a list of related data returns back to the razor view and displays on a Modal popup. Now I could implement the Modal popup, but my problem is I couldn't fetch the data from the controller to show on modal. I appreciate if anyone solves my problem. after debugging I saw the error is "Failed to load resource: the server responded with a status of 500 () Requestors/Details"

<div>   

<div id="tablecontainer" class="my-5 col-sm-12  d-flex justify-content-center">        <table id="myDummyTable" class="table m-table mytable table-striped mb-4 col-12 dataTable table-bordered px-0 mx-0" style="box-sizing:content-box;">            <thead>                <tr id="headerrow">                          <th>                        requestor name                    </th>                    <th>                        items requested                    </th>                                      <th>                        operations                    </th>                </tr>            </thead>            <tbody>                @foreach (var item in Model)                {                    <tr>                                              <td>                            @Html.HiddenFor(modelItem => item.applicantID)                            @Html.DisplayFor(modelItem => item.requestorName)                        </td>                        <td>                            @Html.DisplayFor(modelItem => item.requesteditemCount)                        </td>                                                <td>                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@item.applicantID">Details</button>                        </td>                    </tr>                }            </tbody>        </table>    </div>    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">        <div class="modal-dialog" role="document">            <div class="modal-content">                <div class="modal-header">                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">                        <span aria-hidden="true">&times;</span>                    </button>                </div>                <form method="post">                    <div class="modal-body">                        <div class="form-group">                            <label for="recipient-apiname" class="col-form-label">name:</label>                            <input type="text" class="form-control" id="recipient-apiname" name="apiname">                            <input type="hidden" id="recipient-id" name="id" />                        </div>                        <div class="form-group">                            <label for="recipient-status" class="col-form-label">status:</label>                            <input type="text" class="form-control" id="recipient-status" name="status">                        </div>                    </div>                    <div class="modal-footer">                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                        <input type="submit" class="btn btn-primary" value="Save" />                    </div>                </form>            </div>        </div>    </div>    @section scripts{        <script>        @{            if (ViewBag.ModalState == null)            {                ViewBag.ModalState = "hide";            }        }        $('#exampleModal').modal('@ViewBag.ModalState');        $('#exampleModal').on('show.bs.modal', function (event) {            var button = $(event.relatedTarget);            var id = button.data('id');            var modal = $(this);            modal.find('.modal-body input[name="id"]').val(id);            $.get('@Url.Action("Details", "Requestors")/' + id, function (data) {                modal.find('.modal-body input[name="name"]').val(data.itemName);                modal.find('.modal-body input[name="status"]').val(data.requestStatus);            });        });        </script>    } 


   public async Task<IActionResult> Details(int? id)
        {
                List<ItemDTO> al = new List<ItemDTO>();

                ItemDTO apDTO;
                

                var myquery = (from t in _context.Items
                               where t.ApplicantId == id
                               select new { ItemName = t.ItemName, requestStatus = t.LastRequestStatus }).ToList();



                foreach (var index in myquery)
                {
                    apDTO = new ItemDTO();

                    apDTO.itemName = index.itemName;
                    apDTO.requestStatus = index.requestStatus;

                    al.Add(apDTO);
                }
                return View(al);
            }

</div>