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

Question

我想拥有一个UsersAdmin视图,其中包含Account Registration,UserProfile类和Identity Role类.我使用MVC5默认个人身份验证.我正在使用ui-router进行路由.我见过许多使用viewmodel将多个模型传递给单个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及其属性传递给模态.

Answer 1

ui-router 可以帮助你通过使用来实现这一点

A。

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>