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

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 >
    <div >
        <h4>Treatments</h4>

        <!-- This works just fine: -->
        <button  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" >
        
    </div>
</div>

The list view component (I also tested it with a button, see comment):

<ul >
    @foreach (var treatment in Model)
    {
        <li >
            <!-- 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  role="document">
    <div >
        <div >
            <h5  id="detailTreatmentLabel">Treatment details</h5>
            <button type="button"  data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div >
            <p>@Model.Date</p>
            <p>@Model.Description</p>
            <p>@Model.Employee.FirstName @Model.Employee.LastName</p>
        </div>
        <div >
            <button type="button"  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!

CodePudding user response：

You can try to call a js function when click hyperlink:

ViewComponent:

<ul >
    @foreach (var treatment in Model)
    {
        <li >
            <!-- 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>
}