ASP.NET Core MVC点击链接误触发Index方法，如何正确加载分部视图？

嘿，我看出来问题出在哪了——你点击按钮后走了Index方法，主要是两个小错误导致的，咱们一步步来修正：

第一个坑：静态JS文件不认Razor语法 #

你把@Url.Action写在单独的JS文件里了对吧？ASP.NET Core只会解析.cshtml这类Razor视图里的@语法，静态的.js文件是不会被处理的，所以这个表达式根本没转换成正确的路由地址，导致请求发错了地方。

第二个坑：Url.Action的控制器参数写错了 #

你写的@Url.Action("LoadVB6Upgrades","/Home")里，第二个参数是控制器名称，不需要加前导斜杠，正确的写法应该是@Url.Action("LoadVB6Upgrades", "Home")，加了斜杠反而会导致路由解析出错。

给你两种解决办法，选适合你的就行： #

办法一：把JS代码挪到Razor视图里（最快搞定）

如果这段JS代码只在这个页面用，直接把它放到Index.cshtml的底部就行，这样Razor就能正确解析@Url.Action生成正确的URL：

<!-- 放在Index.cshtml的</body>标签之前 -->
<script>
$("#VB6Upgrades").click(function () { 
    $.get('@Url.Action("LoadVB6Upgrades", "Home")', {}, function (response) { 
        $("#MainContent").html(response); 
    }); 
});
</script>

办法二：通过视图传递URL给JS文件（适合JS代码分离的场景）

要是你想保持JS文件的独立性，就在视图里把正确的URL存到按钮的data属性里，然后JS文件去读这个值：

1. 修改Index页面里的按钮：

<div class="carousel-caption" role="option"> 
    <p> Upgrade your Legacy VB6 Applications to .Net Core! 
        <a class="btn btn-default" id="VB6Upgrades" data-request-url='@Url.Action("LoadVB6Upgrades", "Home")'> Learn More </a> 
    </p> 
</div>

2. 然后修改你的JS文件：

$("#VB6Upgrades").click(function () { 
    // 从按钮的data属性里拿正确的URL
    var targetUrl = $(this).data('request-url');
    $.get(targetUrl, {}, function (response) { 
        $("#MainContent").html(response); 
    }); 
});

最后再检查下这两点： #

• 确认_LoadVB6Upgrades.cshtml这个部分视图确实在Views/Home文件夹里
• 点击按钮前打开浏览器的开发者工具（按F12），切换到Network标签，看看请求的URL是不是/Home/LoadVB6Upgrades，这样能快速确认问题是否解决

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