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

我想要一個包含帳戶註冊、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>

如果這是一個更簡單的解決方案，我對 Create、Details、Edit 視圖使用模式沒有問題。但是我不知道如何將選定的 Id 及其屬性傳遞給模態。

ui-router 可以幫助您通過使用

一種。

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

可以使用 $stateParams 在控制器中訪問與狀態名稱一起傳遞的參數對象

灣。在您的控制器中，您可以執行類似的操作

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>

我相信我已經向其他人回答了你的問題。您想通過 URL 收集資訊，對嗎？

在 AngularJS 中使用路由來收集數據

引用自：https://stackoverflow.com/questions/31453420