如何使用部分视图修复删除记录？

Question

我想用模式从表中删除记录，但部分视图以模态显示。 我该如何解决这个问题？ 而且我无法使用OnClick ！！！

delete在控制器中删除的操作：

 public IActionResult DelPlatform(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }
        PR_Platform platformModel = _Iunit.PlatformsRepository.GenGetById(id);
        if (platformModel == null)
        {
           return NotFound();
        }
        return View(platformModel);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult DelPlatform(int id)
    {
        _Iunit.PlatformsRepository.GenDeleteById(id);
        return RedirectToAction(nameof(PlatformList));
    }

索引视图中的此删除按钮：

<a asp-controller="Platform" asp-action="DelPlatform" asp-route-id="@item.PlatformId" class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal"><i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>

此删除脚本：

<script>
    (function ($) {
        function Delete() {
            var $this = this;
            function initilizeModel() {
                $("#delete-modal").on('show.bs.modal', function (e) {
                }).on('hidden.bs.modal', function (e) {
                    $(this).removeData('bs.modal');
                });
            }
            $this.init = function () {
                initilizeModel();
            }
        }
        $(function () {
            var self = new Delete();
            self.init();
        })
    }(jQuery))
</script>

此模式（在共享文件夹中）：

<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" id="delete-modal" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header text-danger">
            <h5 class="modal-title mt-0 text-white"><strong>حذف از پایگاه داده</strong></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        
        <div class="modal-footer mr-auto">
            <button type="submit" class="btn btn-primary waves-effect waves-light">حذف شود</button>
        </div>
    </div>
</div>

此删除操作视图（用于获取记录名称）：

@model PR_Platform
@{
    Layout = null;
}
<form asp-controller="Platform" asp-action="DelPlatform" method="post">
    <div class="modal-body" id="delete-modal">
        <p><strong>آیا از حذف <em>"@Model.PlatformName"</em> مطمئن هستید؟</strong></p>
        <p class="mb-0"><small>@Model.PlatformName از پایگاه داده حذف خواهد شد</small></p>
    </div>
</form>

Answer 1

请尝试以下尝试：

查看：

@{
    ViewData["Title"] = "Home Page";
}

<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" id="delete-modal" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header text-danger">
                <h5 class="modal-title mt-0 text-white"><strong>حذف از پایگاه داده</strong></h5>
                <form asp-controller="Platform" asp-action="DelPlatform" method="post">
                    <div class="modal-body" id="delete-modal">
                        @*<em>"@Model.PlatformName"</em> <small>@Model.PlatformName از پایگاه داده حذف خواهد شد</small>*@
                        <p><strong>آیا از حذف  مطمئن هستید؟</strong></p>
                        <p class="mb-0"></p>
                    </div>
                    <button type="submit">Click if you are sure to Delete</button>
                </form>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            @*<div class="modal-footer mr-auto">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">حذف شود</button>
                </div>*@
        </div>
    </div>
</div>
@*asp-controller="Home" asp-action="DelPlatform" asp-route-id="@item.PlatformId"*@
<a class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal">Click to Delete<i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>

Answer 2

这是您可以遵循的整个工作演示：

模型：

public class PR_Platform
{
    public int PlatformId { get; set; }
    public string PlatformName { get; set; }
}

主视图（index.cshtml）：

在锚标记中添加data-id以获取单击值。

@model IEnumerable<PR_Platform>
@foreach(var item in Model)
{
<a asp-controller="Platform" asp-action="DelPlatform" asp-route-id="@item.PlatformId" data-id="@item.PlatformId" class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal"><i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>
<a asp-controller="Platform" asp-action="DelPlatform" asp-route-id="@item.PlatformId" data-id="@item.PlatformId" class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal"><i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>
}   
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" id="delete-modal" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header text-danger">
                <h5 class="modal-title mt-0 text-white"><strong>حذف از پایگاه داده</strong></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                 //add this......
            </div>
            <div class="modal-footer mr-auto">
                <button type="submit" class="btn btn-primary waves-effect waves-light">حذف شود</button>
            </div>
        </div>
    </div>
</div>

主视图中的JS：

@section Scripts
{
    <script>
          (function ($) {
            function Delete() {
                var $this = this;
                function initilizeModel() {
                    $("#delete-modal").on('show.bs.modal', function (e) {
                        var $button = $(e.relatedTarget); //Button that triggered the modal
                        var id = $button.data("id");  //get the id
                        alert(id);
                        $.ajax({
                            type: "GET",
                            url: "/Platform/DelPlatform/"+id,                   
                            contentType: "application/json",
                            success: function (data) {
                                $(".modal-body").html(data);//load the response html code to the modal
                            },
                            error: function (e) {
                                alert('Error');
                            }
                        })
                    }).on('hidden.bs.modal', function (e) {
                        $(this).removeData('bs.modal');
                    });
               }
               $this.init = function () {
                    initilizeModel();
               }
           }
        $(function () {
            var self = new Delete();
            self.init();
        })
    }(jQuery))
    </script>
}

控制器：

public IActionResult DelPlatform(int? id)
{
    if (id == null)
    {
        return NotFound();
    }
    PR_Platform platformModel = _Iunit.PlatformsRepository.GenGetById(id);
    if (platformModel == null)
    {
        return NotFound();
    }
    return View(platformModel);
}