angularjs 和 asp.net mvc 路由问题答案

【问题标题】：angularjs and asp.net mvc routing issueangularjs 和 asp.net mvc 路由问题
【发布时间】：2014-12-09 09:31:58
【问题描述】：

我在我的 asp.net mvc 项目中使用 angularjs，并在 asp.net 视图中有以下链接：

<a href="/Organization/Employee/@user.Alias#info">@user.Alias.ToUpper()</a>

这给了我一个这样的链接，例如：

http://localhost:53315/Organization/Employee/15#/info

我想由 mvc 控制器处理，然后使用 angularjs 路由在返回的 asp.net 视图中显示模板。

这是我的 asp.net mvc 控制器：

      public ActionResult Employee(String id)
        {
          ...
          return View();
        }

路由配置：

    context.MapRoute(
       "Organization_Employee",
       "Organization/Employee/{id}/{*mod}",
       new { controller = "User", action = "Employee" }
   );

还有 angularjs 的东西：

 $routeProvider
      .when('/info', {
        controller: 'UserCtrl',
        templateUrl: baseTemplateUrl + 'info.html'
    })

    .controller('UserCtrl', ['$scope', '$location', '$routeParams', 'User', function ($scope, $location, $routeParams, User) {
        $scope.user = User.get({ id: $routeParams.id });

如何从角度控制器中的 url 获取 id('15') 参数？

【问题讨论】：

你为什么同时使用 mvc 路由和 angularjs？我宁愿选择一个选项（angularjs 或 mvc 路由）。

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

【解决方案1】：

在您的情况下，您可以通过解析窗口 url $window.location.href 或 $location.absUrl() 来获取 id

.controller('UserCtrl', ['$window', '$location', '$routeParams', 'User', function ($window, $location, $routeParams, User) {
    var splitUrl=$window.location.href.split("#")[0].split("/");
    //or 
    //var splitUrl=$location.absUrl().split("#")[0].split("/");
    var  userId=splitUrl[splitUrl.length]; // some like that
    $scope.user = User.get({ id: userId });

如果您的网址看起来像 http://localhost:53315/Organization/Employee/#/info/15 或 http://localhost:53315/Organization/Employee/15#/info/15

。您可以通过这种方式获取 id：

 $routeProvider
  .when('/info/:id', {
    controller: 'UserCtrl',
    templateUrl: baseTemplateUrl + 'info.html'
})

.controller('UserCtrl', ['$scope', '$location', '$routeParams', 'User', function ($scope, $location, $routeParams, User) {
    $scope.user = User.get({ id: $routeParams.id });

这是因为 $location 在非 HTML5 模式下使用 hashbang 之后的路径。

【讨论】：