如何在模态按钮上将 id 传递给 asp-route-id

Question

我的代码有问题。我有 3 列的表：类别、子类别和操作。在第三列中，我保留了“编辑”和“删除”按钮。下面是我的部分代码：

<tbody>
        @foreach (var category in Model.ToList())
        {

            <tr>
                <td class="hide">@category.Id</td>
                <td>@category.Name</td>
                <td>
                    @if (category.Subcategories != null)
                    {
                        @foreach (var subcategory in category.Subcategories.ToList())
                        {
                            <p>@(subcategory.Id + ". " + @subcategory.Name)</p>

                        }

                    }
                    else
                    {
                        <a class="btn btn-primary" style="width:auto"
                           asp-controller="administrator"
                           asp-action="CreateSubcategory">
                            Dodaj podkategorię
                        </a>
                    }
                </td>
                <td>
                    <a class="btn btn-primary"
                       asp-controller="administrator"
                       asp-action="EditCategory"
                       asp-route-id="@category.Id">
                        Edytuj
                    </a>
                    <button type="button" onclick="getId(this.data-id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-id="@category.Id">
                        Usuń
                    </button>

                </td>
            </tr>
        }
    </tbody>

当按钮“Usuń”将被点击时，我想显示模态窗口。这没关系：

<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Usuwanie kategorii</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>Czy na pewno chcesz usunąć kategorię ?</p>
        </div>
        <div class="modal-footer">
            <form method="post">
                <button id="modalDeleteButton" type="submit" class="btn btn-primary"
                        asp-controller="administrator"
                        asp-action="DeleteCategory">
                    Usuń
                </button>
            </form>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
        </div>
    </div>
</div>

最后在模态窗口中用户有两个选择——关闭模态窗口或“删除”类别。在这个地方，我必须知道在显示模式之前点击了哪一行。如何将@category.Id 传递给我的模态窗口按钮“Usuń”并设置 asp-route-id？

在我的 JS/JQuery 代码下面：

<script type="text/javascript">
$("#myModal").on('show.bs.modal', function (event) {
    $(event.currentTarget).find('asp-route-id').val(getId);
});

function getId(clicked_id) {
    return clicked_id;
}

现在我得到了返回 URL https://localhost:80888/Administrator/DeleteCategory - 没有“/7”，其中 7 是 Id。

Answer 1

在<tbody>中，这个片段的id应该是@category.Id发送的。

<tbody>
    ...
                <button type="button" onclick="getId(@category.Id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-id="@category.Id">
                    Usuń
                </button>
            </td>
        </tr>
    }
</tbody>

在js函数中，getId函数的调用需要分配参数，所以不能直接调用获取它的值。首先，设置一个全局变量。那么由于浏览器在调用modal时已经将taghelper编译成formaction，所以这里需要重新设置这个值。

<script type="text/javascript">
    var clickId;
    $("#myModal").on('show.bs.modal', function (event) {
        $(event.currentTarget).find('asp-route-id').val(getId);
        var btn = $(this).find('#modalDeleteButton');
        console.log(clickId)
        btn.attr('formaction', '/administrator/DeleteCategory/'+clickId);
    });

    function getId(clicked_id) {
        this.clickId = clicked_id;
     }
</script>

控制器代码

public class administratorController:Controller
{
    public IActionResult DeleteCategory(int id)
    {
        return Json(id);
    }
}

测试截图