Angular 路由在 asp.net mvc 4 中不起作用，为什么？答案

【问题标题】：Angular routing isnt work in asp.net mvc4, why?Angular 路由在 asp.net mvc 4 中不起作用，为什么？
【发布时间】：2014-12-16 17:59:29
【问题描述】：

我是 Angular 新手并尝试在 asp.net mvc 4 应用程序中实现路由。我的控制器正在工作和路由进行更新，但不将信息加载到视图中。有人知道为什么吗？

JobParsing.js

var JobParsing = angular.module('JobParsing', []);

JobParsing.controller('LandingPageController', LandingPageController);

var configFunction = function($routeProvider) {
    $routeProvider.
        when('/routeOne', {
            templateUrl: 'home/one',
            controller: 'LandingPageController'
        })
        .when('/routeTwo', {
            templateUrl: 'home/two',
            controller: 'LandingPageController'
        });
};
configFunction.$inject = ['$routeProvider'];

JobParsing.config(configFunction);

LandingPageController.js

var LandingPageController = function($scope) {
    $scope.models = {
        helloAngular: 'I work! Hello!'
    };
};

LandingPageController.$inject = ['$scope'];

_布局

<!DOCTYPE html>
<html lang="en" data-ng-app="JobParsing" data-ng-controller="LandingPageController">
<head>
    <meta charset="utf-8" />
    <title data-ng-bind="models.helloAngular"></title>
</head>
<body>
    @RenderBody()

    <input type="text" data-ng-model="models.helloAngular" />
    <h1>{{models.helloAngular}}</h1>

    <ul>
        <li><a href="/#/routeOne">Route One</a></li>
        <li><a href="/#/routeTwo">Route Two</a></li>
    </ul>

    <div data-ng-view=""></div>

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    @Scripts.Render("~/bundles/JobParsing")
</body>
</html>

一个.cshtml（两个.cshtml相同）

<h2>One</h2>

【问题讨论】：

你的 One.cshtml 文件是否放在 Views/Home/One.cshtml 中？
我建议使用部分视图。我试过了，没有问题。
@DaniCE 是的，你说得对
@blacai 部分视图也不起作用
如果您在 routeconfig 中定义这样的部分视图：when('/myapp/:partialViewId', { templateUrl: function (params) { return '/MainController/Action/' + params.partialViewId; }, }) 并且您的 MainController 使用 PartialViewResult 定义的方法应该可以工作。

标签： c# asp.net asp.net-mvc angularjs asp.net-mvc-4

【解决方案1】：

我不明白你为什么使用 .$inject。您可以使用“普通”injection

在这里您可以看到使用部分视图的解决方案：

_Layout.cshtml

<!DOCTYPE html >
<html ng-app="JobParsingApp" ng-controller="lpCtrl">
<head>
   <meta charset="utf-8" />
   <title></title>
</head>
<body>
    <div>
        <h1>{{test}}</h1>
        @RenderBody()
        <input type="text" ng-model="models.helloAngular"
            ng-model-options="{ getterSetter: true }" />
        <h1>{{models.helloAngular()}}</h1>
        <br />
        <ul>
            <li><a href="#/routeOne">Route One</a></li>
            <li><a href="#/routeTwo">Route Two</a></li>
        </ul>

        <div ng-view>

        </div>

    </div>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    @Scripts.Render("~/bundles/JobParsing")
</body>
</html>

JobParsing.js

var JobParsing = angular.module('JobParsingApp', ['ngRoute', 'JobParsingApp.LandingPageController']);

JobParsing.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider.
        when('/routeOne', {
                templateUrl: '/Home/One'
                //controller: 'LandingPageController' <-- they are partial, you don't need
        }).
        when('/routeTwo', {
                templateUrl: '/Home/Two'
                //controller: 'LandingPageController' <-- same... adapt your routing when using complete views.
        }).
        otherwise({
            redirectTo: '/'
        });
    }
]);

LandingPageController.js

var LandingPageController = angular.module('JobParsingApp.LandingPageController', []);

LandingPageController.controller('lpCtrl', ['$scope', function ($scope) {
   $scope.test = 'test data';

   var _helloAngular = 'I work! Hello!';
   $scope.models = {
      helloAngular: function (newMsg) {
         if (angular.isDefined(newMsg)) {
           _helloAngular = newMsg;
         }
         return _helloAngular;
      }
   };
}]);

BundleConfig.cs

...

bundles.Add(new ScriptBundle("~/bundles/JobParsing").Include(
    "~/Scripts/JobParsing/LandingPageController.js",
    "~/Scripts/JobParsing/JobParsing.js"
));

...

HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public PartialViewResult One()
    {
        return PartialView();
    }

    public PartialViewResult Two()
    {
        return PartialView();
    }
}

Index.cshtml

<h1>Index</h1>

One.cshtml

<h2>One</h2>

Two.cshtml

<h2>Two</h2>

【讨论】：

【解决方案2】：

你需要引用templateUrl中的一个文件

templateUrl: 'home/two.html'

【讨论】：

我不能，因为使用 HomeController.cs 有 ActionResult One()
控制器返回什么？
asp.net mvc 控制器返回 One.cshtml
你需要返回html。