如何不刷新网页调用控制器的IActionResult方法，避免JS代码被重置

问题根因 #

asp-action和asp-controller是ASP.NET Core的服务端标签助手，最终渲染到浏览器时会生成标准的<a>超链接标签，默认点击行为就是跳转对应URL触发整页重载，页面所有资源包括JS都会重新加载，运行时存储的JS状态自然会被重置。

解决方案 #

如果需要无刷新切换视图，推荐用AJAX加载局部视图的方案，改造成本最低：

1. 改造导航链接，添加自定义类标识，同时保留原有标签助手的功能做降级兼容

<ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
        <a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link text-white ajax-nav" aria-current="page">
            <i class="fi fi-br-home"></i> 首页
        </a>
    </li>
    <!-- 其余导航链接统一添加ajax-nav类 -->
</ul>

2. 页面中预留内容承载容器

<div id="view-container">
    <!-- 不同Action返回的视图内容会加载到这里 -->
</div>

3. 添加JS代码拦截导航点击行为，异步加载内容

document.querySelectorAll('.ajax-nav').forEach(link => {
    link.addEventListener('click', e => {
        // 阻止默认的整页跳转行为
        e.preventDefault();
        const targetUrl = link.getAttribute('href');
        // 异步请求对应Action的内容
        fetch(targetUrl, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(res => res.text())
        .then(html => {
            // 替换容器内容
            document.getElementById('view-container').innerHTML = html;
            // 如果新内容里有需要初始化的JS逻辑，在这里手动调用初始化方法
        })
        .catch(err => console.error('加载视图失败:', err));
    })
})

4. 改造Controller对应的Action，判断如果是AJAX请求就返回局部视图，避免返回带公共布局的完整页面

public IActionResult Index()
{
    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    {
        return PartialView();
    }
    return View();
}
// 其余AboutMe、Resume等Action做相同改造即可

如果需要保留浏览器前进后退功能、同步地址栏URL，可以在上述JS逻辑中额外加入History.pushState相关逻辑即可，不需要额外引入重的前端框架。

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