asp.net-core - 引导模式确认 - 删除操作不起作用

问题描述

我正在尝试创建一个简单的 ASP.Net Core Razor Page 应用程序来执行一些数据库内容，例如添加、编辑和删除项目。在这种情况下，记录是“应用程序”。我创建了一个 Index.cshtml 填充加载部分视图 (_ViewAllPartial.cshtml)。

@page
@model MasterDataManagement.Web.Pages.Application.IndexModel
@{
    ViewData["Title"] = "Applications";
}

<h1>Overview Applications:</h1>

<div class="card">
    <div class="col-sm-12" style="padding:20px">
        <a onclick="jQueryModalGet('?handler=CreateOrEdit','Create Application')" class="btn btn-outline-success">
            New...
        </a>
    </div>
    <div id="viewAll" class="card-body table-responsive"></div>
</div>


@section Scripts
{
    <script>
        $(document).ready(function () {
            $('#viewAll').load('?handler=ViewAllPartial');
        });
        $(function () {
            $('#reload').on('click', function () {
                $('#viewAll').load('?handler=ViewAllPartial');
            });
        });
    </script>
}

在局部视图中，项目从数据库中加载并显示在列表中：

@using MasterDataManagement.Models
@model IEnumerable<Application>

<div class="table">
    <table class="table table-hover" id="applicationTable">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Description</th>
                <th scope="col">Owner</th>
                <th scope="col">Last changed</th>
                <th scope="auto"></th>
            </tr>
        </thead>
        <tbody>

            @foreach (var table in Model)
            {
                <tr>
                    <th scope="row">@table.ID</th>
                    <td>@table.Description</td>
                    <td>@table.Owner</td>
                    <td>@table.Changed</td>
                    <td>
                        <a onclick="jQueryModalGet('?handler=CreateOrEdit&id=@table.ID','Edit Application')" class="btn btn-info text-white"> Edit</a>
                        <a id="deleteCustomerModal"
                           data-toggle="modal"
                           data-target="#modal-delete"
                           data-id="@table.ID"
                           class="btn btn-danger">
                            Delete
                        </a>
                    </td>

                </tr>

            }
        </tbody>
    </table>
    <hr />

    <script>
        $(document).ready(function () {
            $("#applicationTable").DataTable();

        });
    </script>

    <form asp-page-handler="delete" method="post" role="form" id="myForm">
        <div class="modal" id="modal-delete" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="model-content">
                    <div class="modal-header">
                        <h4 style="position:center" class="modal-title">Delete Confirmation</h4>
                        <button type="button" class="close" data-dismiss="modal" value="delete" aria-hidden="true">X</button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this application ?
                    </div>
                    <div class="modal-footer">
                        <button 
                                data-dismiss="modal" 
                                type="button" 
                                class="btn btn-primary">
                            No
                        </button>

                        <button 
                                type="submit" 
                                class="btn btn-danger" 
                                id="modalDeleteButtonX">
                            Yes
                        </button>


                    </div>
                </div>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        $(function () {
            console.log("Document Ready starting....");

            $(document).on("click", "#modalDeleteButtonX", function(event){
                console.log("Click should go here.");
            });
          
            $('#modal-delete').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);        // Button that triggered the modal
                var id = button.data("id");                 // Get id of the button
                var modal = $(this);
                console.log("related id = " + id);
            });


            console.log("Document Ready finished....");
        });

    </script>
</div>

当我单击删除按钮时，模式会出现。但是当我在模式对话框上按否时，浏览器的控制台日志中没有显示任何内容。它应该记录消息“单击应该转到此处”，但我看到的唯一行是“文档就绪开始”和“文档就绪完成”，因此脚本似乎已加载。仍然无法正常工作。

我做错了什么，我尝试了在 SO 和/或 Google 上找到的几种技术......

标签： asp.net-corerazormodal-dialog

asp.net-core - 引导模式确认 - 删除操作不起作用

问题描述

解决方案

推荐阅读