具有HTML5模式和ASP.Net MVC的AngularJS可选URL参数

Similar to the last question that I asked, but a little more complicated.

类似于我提出的最后一个问题，但有点复杂。

I've got an ASP.Net MVC served Angular app.

我有一个ASP.Net MVC服务Angular应用程序。

.when("/Catalog",
{
    templateUrl: "/htm/catalog/catalog.htm"
})
.when("/Catalog/:Category1",
{
    templateUrl: "/htm/catalog/search.htm"
})
.when("/Catalog/:Category1/:Category2",
{
    templateUrl: "/htm/catalog/search.htm"
})
.when("/Catalog/:Category1/:Category2/:Category3",
{
    templateUrl: "/htm/catalog/search.htm"
})
.when("/Catalog/:Category1/:Category2/:Category3/:Category4",
{
    templateUrl: "/htm/catalog/search.htm"
});

$locationProvider.html5Mode(true);

$ locationProvider.html5Mode（真）;

And the MVC routing looks like this:

MVC路由看起来像这样：

// AngularJS Route. This is what allows angular to handle its own routing.
routes.MapRoute(
    "hash",
    "#/{whatever}/{param}/{param2}/{param3}/{param4}/{param5}",
    new
    {
        controller = "Home",
        action = "Index",
        param = UrlParameter.Optional,
        param2 = UrlParameter.Optional,
        param3 = UrlParameter.Optional,
        param4 = UrlParameter.Optional,
        param5 = UrlParameter.Optional
    }
);

// This catches all of the other requests (e.g. /img/logo.jpg);
routes.MapRoute(
    "whatever",
    "{whatever}/{param}",
    new
    {
        controller = "Home",
        action = "Index",
        param = UrlParameter.Optional,
        param2 = UrlParameter.Optional,
        param3 = UrlParameter.Optional,
        param4 = UrlParameter.Optional,
        param5 = UrlParameter.Optional
    }
);

The home/index action just returns my index page:

home / index操作只返回我的索引页面：

public void Index()
{
    String html = System.IO.File.ReadAllText(HttpContext.Server.MapPath("~/htm/index.htm"));
    HttpContext.Response.Write(html);
}

The problem that I'm having is when I try to hit one of those routes with the optional parameters, the page hangs, giving this javascript error:

我遇到的问题是当我尝试使用可选参数点击其中一条路径时，页面挂起，给出了这个javascript错误：

Error: 10 $digest() iterations reached. Aborting!

错误：达到$ $ digest（）迭代。中止！

Sometimes it will will endlessly render itself (like a mirror looking into a mirror), which makes me think that the "whatever" route is causing problems. Without having those optional parameters on it, the route fails completely. This way the page does render and the parameters are loaded into $routeParams, but the page hangs, presumably because it's rendering itself recursively.

有时它会无休止地渲染自己（就像一面镜子看着镜子），这让我觉得“无论什么”的路线造成了问题。如果没有这些可选参数，则路由完全失败。这样页面就会渲染并且参数被加载到$ routeParams中，但页面会挂起，大概是因为它以递归方式呈现自身。

If I take out the optional parameters on the "whatever" MVC route and try to hit the route with the hash notation (/#/Catalog/test), it loads just fine (it doesn't hang and the route parameters are there), but the html5 version (/Catalog/test) fails to find an MVC route.

如果我取出“无论什么”MVC路由上的可选参数并尝试使用散列符号（/＃/ Catalog / test）命中路径，它加载就好了（它没有挂起，路由参数在那里），但html5版本（/ Catalog / test）无法找到MVC路由。

So clearly my problem is with my routing, but I'm not sure what I'm doing wrong. Can somebody shed some light as ot what the problem might be?

很明显我的问题是我的路由，但我不确定我做错了什么。有人可以解决问题可能是什么？

1 个解决方案

#1

Not sure it will help. But a couple of things to keep in mind.

不确定它会有所帮助。但要记住几件事。

When $locationProvider.html5Mode(true); hash will only be used by legacy browsers (IE <= 9)
当$ locationProvider.html5Mode（true）; hash只会被旧版浏览器使用（IE <= 9）
The hash part of the url will not be sent to the server. So you don't need the routes.MapRoute for hash
url的哈希部分不会发送到服务器。所以你不需要使用routes.MapRoute来进行哈希
When a browser requests a URI (i.e /Catalog/test) it will first hit the ASP.NET routing then, when the pages is loaded, it will be handled by AngularJS
当浏览器请求URI（即/ Catalog / test）时，它将首先命中ASP.NET路由，然后在加载页面时，它将由AngularJS处理
It also looks like the routes.MapRoute handler "whatever" send the entire page again, meaning that when angular tries to handle the route and tries to load /htm/catalog/search.htm the ASP.NET route will serve up the page again. This would cause an endless loop, since the page loaded by the angular.js contains its self, and it will try to load it again.
它看起来像routes.MapRoute处理程序“whatever”再次发送整个页面，这意味着当angular尝试处理路由并尝试加载/htm/catalog/search.htm时，ASP.NET路由将再次提供页面。这将导致无限循环，因为angular.js加载的页面包含其自身，并且它将尝试再次加载它。

Hope it helps.

希望能帮助到你。

#1