如何在Razor视图中实现自定义类型链接需用户确认后打开？

修正后的Razor视图代码 #

首先完善动态生成的链接标签，确保闭合并通过return控制默认跳转行为：

@foreach (var link in Model.Links)
{
    <!-- 注意添加链接文本（比如@link.Text），否则链接会是空的 -->
    <a onclick="return myFunc('@link.type', '@link.url')" target="_blank" href="@link.url">@link.Text</a>
}

完善JavaScript逻辑 #

修正原函数的语法错误，实现弹窗确认逻辑：

<script>
function myFunc(type, url) {
    // 严格匹配自定义链接类型
    if (type === "Custom link") {
        // 弹出原生确认窗口
        const isConfirmed = confirm("确定要打开该自定义链接吗？");
        
        if (isConfirmed) {
            // 用户确认后手动打开新窗口
            window.open(url, '_blank');
        }
        // 阻止默认跳转，避免重复打开
        return false;
    } else {
        // 非自定义链接，允许默认跳转
        return true;
    }
}
</script>

关键说明 #

• onclick="return myFunc(...)"：通过返回值控制浏览器是否执行a标签的默认跳转，返回false时会阻止默认行为，true则允许正常跳转。
• type === "Custom link"：使用严格相等运算符避免类型转换导致的判断错误。
• 自定义链接处理：调用原生confirm获取用户选择，确认后用window.open手动打开链接，和target="_blank"的行为保持一致。

自定义弹窗扩展（可选） #

如果需要使用自己设计的弹窗而非原生confirm，可以用异步Promise实现：

<script>
function myFunc(type, url) {
    if (type === "Custom link") {
        // 调用自定义弹窗，异步等待用户选择
        showCustomConfirm("确定打开该链接吗？").then(isConfirmed => {
            if (isConfirmed) {
                window.open(url, '_blank');
            }
        });
        // 先阻止默认跳转
        return false;
    } else {
        return true;
    }
}

// 示例自定义弹窗函数（可根据需求修改样式和逻辑）
function showCustomConfirm(message) {
    return new Promise((resolve) => {
        // 创建弹窗元素
        const modal = document.createElement('div');
        modal.style.cssText = `position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:2rem; background:#fff; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.2); z-index:9999;`;
        modal.innerHTML = `
            <p>${message}</p>
            <div style="margin-top:1rem; display:flex; gap:1rem;">
                <button id="confirm-yes" style="padding:0.5rem 1rem; cursor:pointer;">确定</button>
                <button id="confirm-no" style="padding:0.5rem 1rem; cursor:pointer;">取消</button>
            </div>
        `;
        document.body.appendChild(modal);

        // 绑定按钮事件
        document.getElementById('confirm-yes').addEventListener('click', () => {
            resolve(true);
            document.body.removeChild(modal);
        });
        document.getElementById('confirm-no').addEventListener('click', () => {
            resolve(false);
            document.body.removeChild(modal);
        });
    });
}
</script>

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