如何使用角度路由嵌套 3 个 mvc 剃须刀模型答案

【问题标题】：how to use angular routing to nest 3 mvc razor models如何使用角度路由嵌套 3 个 mvc 剃须刀模型
【发布时间】：2015-10-05 20:27:30
【问题描述】：

我想要一个包含帐户注册、UserProfile 类和身份角色类的 UsersAdmin 视图。我正在使用带有默认个人身份验证的 MVC5。我正在使用 ui-router 进行路由。我见过许多使用视图模型将多个模型传递给单个 cshtml 视图的示例。但我需要更复杂的设置。我创建了一个我正在寻找的模型。做这个的最好方式是什么。

这是我的设置的样子

ui-路由

 // Default route
    $urlRouterProvider.otherwise('/Document');

    // Application Routes States
    $stateProvider
      .state('app', {
          abstract: true,
          controller: "CoreController",
          resolve: {
              _assets: Route.require('icons', 'toaster', 'animate')
          }
      })
      .state('app.document', {
          url: '/Document',
          templateUrl: Route.base('Document/Index'),
          resolve: {}
      })
      .state('app.register', {
          url: '/Register',
          templateUrl: Route.base('Account/Register'),
          resolve: {}
      }).state('app.applicationUser', {
          url: '/ApplicationUser',
          templateUrl: Route.base('ApplicationUsers/Index'),
          resolve: {}
      }).state('app.role', {
           url: '/Role',
           templateUrl: Route.base('Role/Index'),
           resolve: {}
     }).state('app.roleCreate', {
           url: '/RoleCreate',
          templateUrl: Route.base('Role/Create'),
          resolve: {}
     }).state('app.userProfile', {
         url: '/UserProfile',
         templateUrl: Route.base('UserProfiles/Index'),
         resolve: {}
     }).state('app.userProfileCreate', {
         url: '/UserProfileCreate',
         templateUrl: Route.base('UserProfiles/Create'),
         resolve: {}
     }).state('app.login', {
         url: '/Login',
         templateUrl: Route.base('Account/Login'),
         resolve: {}
     });
 }

_Layout.cshtml

 <div ui-view class="app-container" ng-controller="CoreController">@RenderBody()</div>

导航

 <li>
   <a ui-sref="app.userProfile" title="Layouts" ripple="">
      <em class="sidebar-item-icon icon-pie-graph"></em>
         <span>User Profile</span>
   </a>
 </li>

如果这是一个更简单的解决方案，我对创建、详细信息、编辑视图使用模式没有问题。但是我不知道如何将选定的 Id 及其属性传递给模态。

【问题讨论】：

标签： asp.net-mvc angularjs razor angular-ui-router

【解决方案1】：

我相信我已经向其他人回答了您的问题。您想通过 URL 收集信息，对吧？

Using routes in AngularJS to gather data

【讨论】：

我想看看如何使用 ui-router 而不是 ngRoute 来完成。由于我的路由设置，它实际上是一个嵌套的嵌套视图情况
@texas697 我对 ui-router 没有太多经验，但我的猜测是URL/:foo

【解决方案2】：

ui-router 可以通过使用

帮助你实现这一点

一个。

ui-sref='stateName({param: value, param: value})'

与状态名称一起传递的参数对象可以在控制器中使用 $stateParams 访问

b. 在您的控制器中，您可以执行类似

的操作

if ($stateParams.id != null) {
// service call goes here
}

c。您需要使用命名视图像

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates and/or controllers ... },
      'tabledata': {},
      'graph': {},
    }
  })

在哪里

过滤器

和

餐桌日期

是命名视图。

ui-view 在这里有一个不错的例子https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

顺便说一句，我建议您首先弄清楚动态面板（即由于某种用户交互而内容发生变化的面板）与静态面板（一旦加载它们就不会改变）。您应该只查看 ui-views 来替换动态部分，将所有内容都放在子视图中使应用程序更复杂是没有意义的。这些状态很快就会变得非常混乱。

我使用 ng-include 指令在父状态中加载静态视图，并且仅为部分更改的视图定义子状态。

<div ng-include="'/MyStaticView'" ng-show="MyCondition == true "></div>

【讨论】：