AngularJS + ASP.NET WebAPI模板切换异常：URL变更但视图未更新

问题根源 #

核心问题是ASP.NET服务器端路由与AngularJS客户端路由职责混淆，加上缺少正确的ng-view配置，导致Angular无法接管视图切换；错误的嵌套渲染逻辑还引发了无限加载问题。

分步解决方案 #

1. 修正_Layout.cshtml结构 #

AngularJS路由需要ng-view作为模板渲染容器，同时要避免ASP.NET的@RenderBody()直接渲染内容引发冲突，修改后代码如下：

<body ng-app="application" class="background">
    <div id="ribbon">
        <main>
            <!-- Angular路由模板渲染容器 -->
            <div ng-view></div>
        </main>
    </div>
</body>
</html>

移除原有的@RenderBody()，让ASP.NET仅渲染主框架，所有视图切换由Angular负责。

2. 调整ASP.NET路由配置（关键） #

直接访问/Home/Main能打开视图，说明ASP.NET路由会处理这类请求，这会和Angular路由冲突。需在RouteConfig.cs中添加规则，让所有非API请求都指向Index.cshtml，交给Angular处理路由：

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        // 优先处理API路由
        routes.MapRoute(
            name: "DefaultApi",
            url: "api/{controller}/{id}",
            defaults: new { id = UrlParameter.Optional }
        );

        // 所有非API请求返回Index.cshtml，交由Angular处理路由
        routes.MapRoute(
            name: "AngularRoutes",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

3. 修正AngularJS路由配置 #

调整路由规则，避免重复加载Index视图导致循环，同时确保模板路径正确：

var app = angular.module("application", [
    "ngRoute",
    "ngResource",
    "toastr"
]);
app.config(function ($routeProvider) {
    $routeProvider
        // 根路径指向Index模板
        .when("/", { templateUrl: "/Home/Index", controller: "index-controller" })
        .when("/Main", { templateUrl: "/Home/Main", controller: "main-controller" })
        // 默认路由跳转到根路径
        .otherwise({ redirectTo: "/" });
});

// 控制器代码保持不变
app.controller("index-controller", ["$scope", "$location", function ($scope, $location) {
    $scope.goToMainPDS = function() {
        console.log("Loading view...");
        $location.path("/Main");
    }
}]);
app.controller("main-controller", ($scope) => {
    console.log("Main loaded..!");
})

4. 简化Index.cshtml内容 #

Index.cshtml作为Angular模板，无需再手动添加ng-controller指令（路由已指定控制器），简化后代码：

<div class="index">
    <button class="btn btn-primary" ng-click="goToMainPDS()">Go to MainPDS</button>
</div>

关于之前加ng-view引发无限加载的原因 #

原Layout中@RenderBody()会渲染Index.cshtml，而Angular又将Index.cshtml作为模板请求，ng-view再次渲染该模板，形成循环加载。修正后让ASP.NET仅返回一次Index布局，Angular负责后续模板切换，即可解决该问题。

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