ASP.NETCoreMVC-使用超鏈接打開引導模式視圖

我正在創建一個 ASP.NET（版本 5）Core 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>

有誰知道是否可以使用超鏈接在模式中打開單獨的視圖？如果沒有，是否有一種解決方法仍然可以單擊串列項本身？

先感謝您！

uj5u.com熱心網友回復：

點擊超鏈接可以嘗試呼叫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.NETMVC中使用SweetAlert進行捕獲錯誤

下一篇：MemoryStream在C#MVC專案中將空檔案上傳到SharePoint