Asp.net MVC 4 捕获所有路由答案

【问题标题】：Asp.net MVC 4 Catch All RoutingAsp.net MVC 4 捕获所有路由
【发布时间】：2015-12-31 16:06:41
【问题描述】：

我一直在学习并使用 Angular 和 Asp.Net MVC 做示例。我遇到了一个catch all route的问题。添加全部路线后，我的浏览器一直崩溃。如果我删除全部捕获，则 url 可以正常工作，但刷新页面会给出 404 错误消息。我在这里做错了什么？

My App and Controller:
var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider
        .when('/AddNewOrder', {
            templateUrl: 'templates/AddOrder',
            controller: 'AddOrderController'
        }).when('/ShowOrders', {
            templateUrl: 'templates/ShowOrders',
            controller: 'ShowOrdersController'
        }).otherwise({
            redirectTo: '/ShowOrders'
        });
        $locationProvider.hashPrefix('!').html5Mode(true);
    }
]);

myApp.controller('AddOrderController', function ($scope) {
    $scope.message = 'This is the add new order controller screen';
});

myApp.controller('ShowOrdersController', function ($scope) {
    $scope.message = 'This is the show orders controller';
});

这是我创建的路由配置。

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

            routes.MapRoute(
            name: "AddNewOrder",
            url: "templates/Add_Order",
            defaults: new { controller = "Templates", action = "AddOrder" });

            routes.MapRoute(
                name: "ShowOrders",
                url: "templates/show_orders",
                defaults: new { controller = "Templates", action = "ShowOrders", donuts = UrlParameter.Optional });

            routes.MapRoute(
             name: "Default",
             url: "{*url}",
             defaults: new { controller = "Home", action = "Index" });
        }
    }

//索引页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AngularJS Routing example</title>
    </head>
  <body ng-app="myApp">
    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <class="nav">
            <><href="/AddNewOrder"> Add New Order </a></li>
                <><href="/ShowOrders"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>
       <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>  

    @*<script src="app.js"></script>*@
      <script src="~/Scripts/myApp.js"></script>
  </body>
</html>

【问题讨论】：

标签： angularjs asp.net-mvc-4 angularjs-routing asp.net-routing

【解决方案1】：

主要问题是使用 ['ui.router'] 而不是 ['ngRoute']。我改变了它[ngRoute'，我仍然得到相同的行为。但是，在清除缓存并重新启动浏览器后，我看到了预期的行为。

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-strict-di>
  <head>
    <title>AngularJS Routing example</title>
  </head>

  <body>

    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="/NewOrder"> Add New Order </a></li>
                <li><a href="/ShowOrders/123"> Show Order </a></li>
               <div ng-controller="CalculatorController">
                <li><a href="/Calculator">Calculator</a></li>
              </div>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>


   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>  
   @*   <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>*@
    @*<script src="app.js"></script>*@
      <script src="~/Scripts/myApp.js"></script>
  </body>


//the new module using ngRoute.

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

【讨论】：