asp.net-mvc – 如何使用角度路由来嵌套3个mvc剃须刀模型

我想拥有一个具有帐户注册,UserProfile类和Identity Role类的UsersAdmin视图.我使用默认的个人认证的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与其属性传递给模态.

解决方法

ui路由器可以通过使用来帮助您实现这一点

一个.

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

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

湾
在你的控制器你可以做一些类似的事情

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

C.您需要使用命名视图
就像是

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

哪里

filters

和

tabledate

是命名的观点.

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

Btw,我建议你先弄清楚动态的面板(即由于某种用户交互而变化的面板)与静态面板(一旦加载就不会改变).您只应该查看ui视图来替换动态部分,通过将所有内容放在子视图中,使应用程序变得更加复杂,没有任何意义.各州可能非常混乱非常快.

我使用ng-include指令将静态视图加载到父状态,并且仅为更改的部分视图定义子状态.

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