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

时间:2013-04-04 15:54:31

标签: asp.net-mvc html5 routing angularjs

与我提出的最后一个问题相似,但有点复杂。

我有一个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(真);

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
    }
);

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

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

我遇到的问题是,当我尝试使用可选参数点击其中一条路线时,页面会挂起,从而出现此javascript错误:

错误:达到10 $ digest()次迭代。中止!

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

如果我取出“无论什么”MVC路由上的可选参数并尝试使用散列符号(/#/ Catalog / test)命中路径,它加载就好了(它不会挂起和路由参数是的,但是html5版本(/ Catalog / test)无法找到MVC路由。

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

1 个答案:

答案 0 :(得分:0)

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

  • $locationProvider.html5Mode(true);哈希仅由旧浏览器使用时(IE <= 9)
  • 网址的哈希部分不会发送到服务器。因此,您不需要routes.MapRoute哈希
  • 当浏览器请求URI(即/ Catalog / test)时,它将首先点击 ASP.NET 路由,然后,当页面加载时,它将由 AngularJS <处理/强>
  • 它看起来像routes.MapRoute处理程序“无论什么”再次发送整个页面,这意味着当angular尝试处理路由并尝试加载/htm/catalog/search.htm时,ASP.NET路由将提供再次页面。这将导致无限循环,因为angular.js加载的页面包含其自身,并且它将尝试再次加载它。

希望它有所帮助。