在 Asp.Net MVC 和 AngularJS 中路由到不同的视图（在视图中使用 @Html.ActionLink 和 ng-view），ng-view 只工作一次，位置 url 奇怪

Question

在我的例子中，我需要使用 @Html.ActionLink 来路由到每个 AngularJS.In 的不同视图 view1/index.cshtml 在 asp.net 中有 <div ng-view></div> 将加载其 html 模板。

下图link是我的项目结构：
click

我的问题是：它只首先路由成功 time.I 认为它导致错误的位置 url。

Views/Share/_Layout.cshtml:

<ul>
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("Device Management", "Index", "DeviceManagement")</li>
</ul>

Views/Home/index.cshtml:

@{
    ViewBag.Title = "Home Page";
    ViewBag.InitModule = "homeIndex";
}
@section Scripts {
    <script src="~/app/home/homeIndex.js"></script>
}
<div ng-view><div>

app/home/homeIndex.js

var homeIndex = angular.module('homeIndex', ["ngRoute"]);

homeIndex.config(["$routeProvider", function($routeProvider){
    $routeProvider
        .when("/home",{
            templateUrl:"app/home/homeIndex.html",
            controller:"homeCtrl"

        })

        .otherwise({
            redirectTo:"/home"
        });
}]);

app/home/homeIndex.html

<a href="#/home2">HOME2</a>

app/deviceManagement/deviceManageIndex.js

var deviceManageIndex = angular.module('deviceManageIndex', ["ngRoute"]);

deviceManageIndex.config(["$routeProvider", function($routeProvider) {
    $routeProvider
        .when("/device", {
            templateUrl: "app/deviceManagement/deviceManagementIndex.html",
            controller: "deviceManageCtrl"

        })
        .otherwise({
            redirectTo:"/device"
        });

}]);

网站有边栏，边栏中有主页和 设备管理 按钮。

当我点击主页时，它会重定向到正确的位置，它可以加载homeIndex.html成功：

位置是：

http://localhost:13060/#/home

但是当我第二次点击主页按钮时，它无法再加载 homeIndex.html。

位置将更改为：

http://localhost:13060/#

同样的问题发生在另一个按钮设备管理

当我点击设备管理时，它会重定向到正确的位置，它可以加载deviceManagementIndex.html成功：

位置是：

http://localhost:13060/DeviceManagement#/device

但是当我第二次点击设备管理按钮时，它无法再加载deviceManagementIndex.html。

位置将更改为：

http://localhost:13060/DeviceManagement#

我觉得位置比较奇怪，第一次来应该是：

http://localhost:13060/DeviceManagement/#/device

我想这是没有正确加载 html 模板的主要原因...

但是为什么位置url不能正确显示，请帮我解决头疼的问题....

Answer 1

感谢 Shawn 提示！在我的例子中，我应该在客户端使用 angular 路由，$routeProvider 和 templateUrl 来触发服务器端控制器加载服务器端视图，那是我找到了解决方案，这样 actionlink 行为就可以通过服务器端，它将遵循服务器端路由规则来选择合适的视图。它应该是工作...:D

在 Asp.Net MVC 和 AngularJS 中路由到不同的视图（在视图中使用 @Html.ActionLink 和 ng-view），ng-view 只工作一次，位置 url 奇怪

Route to different View(use @Html.ActionLink and ng-view in View) in Asp.Net MVC with AngularJS, ng-view only work one time, location url strange

asp.net-mvc

routes

html.actionlink

angularjs

ng-view