ASP.NET Razor Pages：如何在操作流程中加入确认对话框

方案1：直接给链接绑定确认弹窗（最简实现） #

修改你的<a>标签，添加onclick事件，利用原生JS的confirm()对话框拦截默认跳转：

<a href="@Url.Action("DeleteCat", "GlobalTagging", new { id = Model.MainNodes[i].Id })" 
   onclick="return confirm('确定要删除该分类吗？');">
    Löschen
</a>

逻辑说明：点击链接时弹出确认框，用户选「确定」则返回true，链接正常跳转执行后台方法；选「取消」则返回false，阻止跳转。

方案2：分离JS逻辑（便于复用维护） #

如果需要复用确认逻辑或自定义提示内容，可把确认逻辑封装成独立函数：

1. 页面中添加JS函数：

function confirmDelete() {
    return confirm('确定要删除该分类吗？');
}

2. 修改链接调用该函数：

<a href="@Url.Action("DeleteCat", "GlobalTagging", new { id = Model.MainNodes[i].Id })" 
   onclick="return confirmDelete();">
    Löschen
</a>

方案3：AJAX无刷新删除（更友好的用户体验） #

不想跳转页面的话，可结合AJAX实现无刷新删除：

1. 修改链接结构，用data-*属性存储分类ID：

<a href="#" class="delete-cat-link" data-cat-id="@Model.MainNodes[i].Id">
    Löschen
</a>

2. 添加JS事件监听：

// 给所有删除链接绑定点击事件
document.querySelectorAll('.delete-cat-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转
        const catId = this.dataset.catId;
        
        if (confirm('确定要删除该分类吗？')) {
            // 发起AJAX请求到后台
            fetch(`/GlobalTagging/DeleteCat?id=${catId}`, {
                method: 'GET'
            })
            .then(response => {
                if (response.ok) {
                    alert('删除成功');
                    location.reload(); // 可选：刷新页面或移除对应DOM元素
                } else {
                    alert('删除失败，请重试');
                }
            })
            .catch(error => {
                console.error('请求出错：', error);
                alert('删除请求失败');
            });
        }
    });
});

安全优化：使用POST请求执行删除（推荐） #

出于安全考虑，删除操作建议用POST而非GET（避免误触发、爬虫抓取），调整如下：

1. 修改后台方法，添加[HttpPost]特性：

[HttpPost]
public ActionResult DeleteCat(int? id) { 
    // 执行删除逻辑
    if (id == null) {
        return Json(new { success = false, message = "无效的分类ID" });
    }
    // 这里写删除数据库记录的逻辑
    return Json(new { success = true, message = "删除成功" });
}

2. 前端AJAX发送POST请求（需包含防伪造令牌）：

fetch('/GlobalTagging/DeleteCat', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRF-Token': document.querySelector('input[name="__RequestVerificationToken"]').value
    },
    body: `id=${catId}`
})
// ...后续处理和方案3一致

注：页面需添加@Html.AntiForgeryToken()生成防伪造令牌的input元素。

为什么C#无法直接实现？ #

C#是服务器端代码，在页面渲染到浏览器前就已执行完毕，无法感知浏览器端的用户交互（比如确认对话框的选择）。必须通过客户端JavaScript先处理用户确认，再决定是否向服务器发起删除请求。

内容的提问来源于stack exchange，提问作者inno