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

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>
}