problem in showing a modal popup after clicking a link - asp.net-core

Question

I'm implementing an asp.net core 3.1 project in visual studio 2019. I have implemented HoursController and in its view I have a table which has 3 columns and i the last column for each record there is a link called "Details" and if the user clicks on it, he should see a modal that contains the related data. Here is what i have tried to implement it:
<table id="myDummyTable" class="table m-table mytable table-striped table-bordered bg-light">
<thead>
<tr>
<th>
Amount
</th>
<th>
Operations
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.HourModel)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ScoreAmount)
</td>
<td>
<a data-toggle="modal" href="#exampleModal" data-id="#item.ID">Details</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<form method="post">
<div class="modal-body">
<div id="result">
<table id="classTable" class="table table-bordered">
<thead>
<tr id="headerrow">
<th>
ID
</th>
<th>
cost
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" id="exitbutton" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</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");
console.log("id:"+id);
var modal = $(this);
modal.find('.modal-body input[name="id"]').val(id);
$.get('#Url.Action("Details", "Hours")/' + id, function (data) {
$.each(data, function (index, value) {
var markup = "<tr><td>" + value.ID + "</td><td>" + value.Cost + "</td><td>";
$("#classTable").append(markup);
})
});
//if I remove this '});' from here, after clicking on Details link, a modal //is being displayed and if I keep '});' here, any modal isn't going to be //displayed.
});
</script>
}
Now my problem is if I remove this '});' from the specified line in my code, after clicking on Details link, a modal is being displayed but it doesn't populate its data because it doesn't call Details method in HoursController and if I keep '});' here, any modal isn't going to be displayed and in debugger console I see the error:
Uncaught TypeError: $.get is not a function
I appreciate if anyone can tell me what the problem is and how to fix it

Answer 1

You can remove this '});', because it could result in incorrect matching. Also, please pay attention to capitalization, although the attributes in the model are uppercase. This is the return value of $.get. (I simulated some data in Details)
Modify this code.
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data("id");
console.log("id:"+id);
var modal = $(this);
modal.find('.modal-body input[name="id"]').val(id);
var url = '#Url.Action("Details", "Hours")/' + id
$.get(url, function (data) {
$("#classTable").empty()
$.each(data, function (index, value) {
console.log(value, index)
var markup = "<tr><td>" + value.id + "</td><td>" + value.cost + "</td><td>";
$("#classTable").append(markup);
})
});
});
Result