如何为ASP.NET Core视图中的Delete链接添加操作确认弹窗？

方案一：原生确认弹窗（简洁快速） #

直接利用浏览器原生对话框实现基础需求：

1. 修改Delete链接，添加点击事件处理：

<a class="nav-link text-dark" asp-controller="Home" asp-action="Delete" onclick="return handleDelete(event, this)">Delete</a>

2. 添加对应JavaScript逻辑：

function handleDelete(event, link) {
    // 阻止链接默认跳转行为
    event.preventDefault();
    // 弹出确认框
    if (confirm("Are you sure?")) {
        // 点击Yes，跳转至控制器Delete方法
        window.location.href = link.href;
    }
    // 点击No，弹窗自动关闭，无后续操作
}

方案二：自定义样式弹窗（可定制外观） #

如果需要更美观的弹窗样式，可自定义模态框实现：

1. 在页面中添加弹窗HTML结构：

<!-- 自定义确认弹窗容器 -->
<div id="deleteModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center;">
    <div style="background: #fff; padding: 2rem; border-radius: 8px; text-align: center;">
        <p>Are you sure?</p>
        <div style="margin-top: 1rem; gap: 1rem; display: flex; justify-content: center;">
            <button id="modalYes" style="padding: 0.5rem 1.5rem; cursor: pointer;">Yes</button>
            <button id="modalNo" style="padding: 0.5rem 1.5rem; cursor: pointer;">No</button>
        </div>
    </div>
</div>

2. 修改Delete链接并添加交互脚本：

<a class="nav-link text-dark" asp-controller="Home" asp-action="Delete" id="deleteLink">Delete</a>

<script>
const deleteLink = document.getElementById('deleteLink');
const confirmModal = document.getElementById('deleteModal');
const yesBtn = document.getElementById('modalYes');
const noBtn = document.getElementById('modalNo');

// 点击Delete链接打开弹窗
deleteLink.addEventListener('click', function(e) {
    e.preventDefault();
    confirmModal.style.display = 'flex';
});

// 点击No按钮关闭弹窗
noBtn.addEventListener('click', function() {
    confirmModal.style.display = 'none';
});

// 点击Yes按钮关闭弹窗并执行跳转
yesBtn.addEventListener('click', function() {
    confirmModal.style.display = 'none';
    window.location.href = deleteLink.href;
});
</script>

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