ASP.NET Core MVC中如何同时使用href与asp-controller/asp-action？

你遇到的核心矛盾是ASP.NET Core的Tag Helper不允许href和asp-*路由属性共存，但又要保留UI模板的JS功能，下面是几个可行的解决办法：

方法1：用自定义data属性存储路由地址 #

保留href="javascript:void(0);"满足模板JS要求，同时用data-url存储Tag Helper生成的路由地址，通过JS控制跳转：

<a class="nav-link active" href="javascript:void(0);" 
   data-url="@Url.Action("Profile", "Home")">
    <i class="bx bx-user me-1"></i> Profile
</a>

然后添加JS监听点击事件（可放在页面底部或外部JS文件）：

// 给需要跳转的导航链接绑定点击事件
document.querySelectorAll('.nav-link[data-url]').forEach(link => {
    link.addEventListener('click', function() {
        // 先执行模板自带的JS逻辑（比如侧边栏折叠、菜单高亮等）
        // 保留原模板的交互代码，比如模板初始化菜单的函数
        
        // 跳转到目标页面
        window.location.href = this.getAttribute('data-url');
    });
});

方法2：移除href，用JS阻止默认行为后跳转 #

让Tag Helper正常生成href，通过JS阻止默认跳转行为，先执行模板逻辑再手动跳转：

<a class="nav-link active" asp-controller="Home" asp-action="Profile">
    <i class="bx bx-user me-1"></i> Profile
</a>

对应的JS代码：

document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', function(e) {
        // 执行模板内置的JS功能
        // 比如原模板中处理导航交互的逻辑
        
        // 阻止默认跳转行为
        e.preventDefault();
        // 手动跳转到Tag Helper生成的地址
        window.location.href = this.href;
    });
});

方法3：直接在onclick中整合逻辑 #

把模板JS逻辑和页面跳转逻辑写在onclick事件里，href保留javascript:void(0);：

<a class="nav-link active" href="javascript:void(0);" 
   onclick="handleProfileNavigation()">
    <i class="bx bx-user me-1"></i> Profile
</a>

JS函数实现：

function handleProfileNavigation() {
    // 先运行模板自带的JS代码
    // 比如模板中处理菜单激活状态、侧边栏收起的逻辑
    
    // 跳转至Profile页面
    window.location.href = '@Url.Action("Profile", "Home")';
}

这三个方法都能解决冲突，你可以根据模板JS的复杂度选择最适合的方式。

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