ASP.NET Core MVC - Opening a Bootstrap modal view using a hyperlink - asp.net-mvc

Question

I am creating an ASP.NET (version 5) Core MVC application where I have a list of items. I try to make it so that when you click on an item it opens a (Bootstrap) modal view with the item's details (from another view). However, it seems like a hyperlink doesn't open the modal but instead opens the page itself (so not inside the modal). I got it working with a button, but I would like to make the user click on an item itself instead of a button.
This is the list item that I would like the user to be able to click on (the button is for testing):
I have the following page:
#model DetailsPatientFileViewModel
#section Scripts {
<script type="text/javascript">
$("#addBtn").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
$("#detailCard").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
</script>
}
<div class="patient-file-details-container">
<div class="title-container">
<h4>Treatments</h4>
<!-- This works just fine: -->
<button class=" btn-primary btn-primary" asp-controller="Treatment" asp-action="Create" asp-route-patientId="#Model.PatientId" data-toggle="ajax-modal" data-target="add-treatment" id="addBtn">Add</button>
</div>
<div id="component">
<!-- My list view component: -->
#await Component.InvokeAsync("TreatmentList", new { patientFileId = #Model.PatientFile.Id })
</div>
<!-- My modal: -->
<div id="Modal" class="modal fade">
</div>
</div>
The list view component (I also tested it with a button, see comment):
<ul class="card-list">
#foreach (var treatment in Model)
{
<li class="list-item-card">
<!-- Doesn't work: -->
<a asp-controller="Treatment" asp-action="Details" asp-route-id="#treatment.Id" data-toggle="ajax-modal" data-target="Modal" id="detailCard">
<h5>#treatment.Type</h5>
<p>#treatment.Date</p>
<p>#treatment.Employee.FirstName #treatment.Employee.LastName</p>
</a>
<!-- Does work: -->
<button asp-controller="Treatment" asp-action="Details" asp-route-id="#treatment.Id" data-toggle="ajax-modal" data-target="Modal" id="detailCard">Details</button>
</li>
}
</ul>
And finally the Details.cshtml (the to be opened view in the modal):
#using Core.Domain
#model Treatment
#{
Layout = null;
}
<h3>#Model.Type</h3>
<div class="modal-diaglog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailTreatmentLabel">Treatment details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>#Model.Date</p>
<p>#Model.Description</p>
<p>#Model.Employee.FirstName #Model.Employee.LastName</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Does anyone know if it is possible to open a seperate view in a modal using a hyperlink? And if not, would there be a workaround to still be able to click on the list item itself?
Thank you in advance!

Answer 1

You can try to call a js function when click hyperlink:
ViewComponent:
<ul class="card-list">
#foreach (var treatment in Model)
{
<li class="list-item-card">
<!-- Doesn't work: -->
<a href="javascript:Details(#treatment.Id)">
<h5>#treatment.Type</h5>
<p>#treatment.Date</p>
<p>#treatment.Employee.FirstName #treatment.Employee.LastName</p>
</a>
<!-- Does work: -->
<button asp-controller="Treatment" asp-action="Details" asp-route-id="#treatment.Id" data-toggle="ajax-modal" data-target="Modal" id="detailCard">Details</button>
</li>
}
</ul>
page js:
#section Scripts {
<script type="text/javascript">
function Details(id) {
$.ajax({
type: "GET",
url: "Treatment/Details?id="+id,
success: function (res) {
$("#Modal").html(res);
$("#Modal").modal();
}
});
}
$("#addBtn").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
$("#detailCard").click(function () {
$.ajax({
url: $(this).attr("formaction"),
}).done(function(res) {
$("#Modal").html(res);
$("#Modal").modal();
})
});
</script>
}