ASP.NET 核心 MVC - 使用超链接打开 Bootstrap 模态视图

Question

我正在创建一个 ASP.NET（版本 5）核心 MVC 应用程序，其中有一个项目列表。我尝试做到这一点，以便当您单击某个项目时，它会打开一个 (Bootstrap) 模式视图，其中包含该项目的详细信息（来自另一个视图）。但是，似乎超链接不会打开模态，而是打开页面本身（因此不在模态内）。我用一个按钮让它工作，但我想让用户点击一个项目本身而不是一个按钮。

这是我希望用户能够点击的列表项（该按钮用于测试）：

我有以下页面：

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

列表视图组件（我也用按钮测试过，见评论）：

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

最后是 Details.cshtml（在模式中打开的视图）：

@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">&times;</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>

有谁知道是否可以使用超链接在模式中打开单独的视图？如果没有，是否有解决方法仍然可以单击列表项本身？

提前致谢！

Answer 1

你可以尝试点击超链接时调用一个js函数：

视图组件：

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

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

ASP.NET 核心 MVC - 使用超链接打开 Bootstrap 模态视图

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

asp.net-mvc

asp.net-core

.net-5