将 asp-route-id 更新为 jQuery

Question

我正在构建一个 razor pages 应用程序，我想使用模态作为局部视图。

从我打开模态的地方开始的 Foreach 循环：

@foreach (var item in Model.SourceFiles)
                {

                    <tr>
                        <td>@item.Id</td>
                        <td>@item.FileName</td>
                        <td>@item.Created</td>
                        <td>
                            @(item.IsConverted == true ? "Exported" : "Imported")
                        </td>
                        <td>
                            <button type="submit" class="btn btn-primary" asp-page-handler="FileContent" asp-route-fileId="@item.Id">View</button>
                        </td>
                        <td>
                            @if ((await authorizationService.AuthorizeAsync(User, "DeletePolicy")).Succeeded)
                            {
                                <a href="#" class="btn btn-danger" onclick="triggerDeleteModal(@item.Id)">Delete</a>
                            }
                        </td>
                    </tr>
                }

我正在尝试使用 javaScript (jQuery) 设置 asp-route-id 标签的新值，但我无法让它工作。

function triggerDeleteModal(itemId) {
    $('#' + 'deleteModal').modal('toggle');
    $("#confirmDeleteButton").attr('asp-route-deleteid', itemId)
}

模态（局部视图）：

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalTitle">Caution!</h5>
            </div>
            <div class="modal-body">
                <p style="white-space: pre-wrap;">@Model.DeleteModalText</p>
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="submit" id="confirmDeleteButton" class="btn btn-secondary" data-bs-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

当在模式中按下是按钮（#confirmDeleteButton）提交表单时，id 没有在 asp-route-deleteid 标签助手中传递，id 始终为 0 OnPost 方法。

deleteid始终为0的代码：

public async Task<IActionResult> OnPostAsync(int deleteid)
{ 
    //code for deleting stuff
}

当尝试 console.log 除 asp 路由标签之外的任何属性的值时，将显示该值。尝试记录 asp-route 标记的值时，该值未定义。

关于如何将 asp-route-deleteid 传递给后面的代码有什么想法吗？

BR

Answer 1

asp-route-* 属性适用于标签助手，它们是 server-side 组件。它不会呈现给浏览器并且无法访问 JavaScript。它旨在与具有 href、action 或 formaction 属性的元素一起使用，并且它将属性值添加到生成的 href 的查询字符串中，或者作为 URL 根据目标页面的路由模板进行细分。

通常，您不应在 URL 中传递 POST 数据，因此您可以将点击事件处理程序连接到 confirmDeleteButton 以启动 [=22] =] post 即传递 deleteid:

$('#confirmDeleteButton').on('click, function(){
    $.post('/yourpage',{deleteid: itemId}, function(){
        // process the call back
    })
})

将 asp-route-id 更新为 jQuery

Update asp-route-id with jQuery

javascript

c#

jquery

asp.net-core

razor-pages