複数のドロップダウンリストを設定する場所

Question

私は、angularJSを使用している.net MVCアプリケーションのビューページに複数のドロップダウンリストを設定する正しいアプローチを決定しようとしています。

私のアプリでは、サイロSLAアプリケーションとして設計されています。私は角度ngRouteモジュールと$ routeProviderを使用して、単一のCSHTMLページの複数のHTMLページを記述しています。

.config(function ($routeProvider, $locationProvider) { 
     $routeProvider.when('/club', { templateUrl: '/App/Club/Views/MCLView.html', controller: 'mclViewModel' }); 
     $routeProvider.when('/club/list', { templateUrl: '/App/Club/Views/MCLView.html', controller: 'mclViewModel' }); 
     $routeProvider.when('/club/show/:clubId', { templateUrl: '/App/Club/Views/ClubView.html', controller: 'clubViewModel' }); 
     $routeProvider.otherwise({ redirectTo: '/club' }); 
     $locationProvider.html5Mode(true); 
    }); 

私のCSHTMLページは、<div ng-view></div>タグを除いて基本的に空です。ルーティングされたHTMLページは、ng-view divにロードされます。

<div data-ng-app="club" id="club" data-ng-controller="rootViewModel"> 
    <h2>{{ pageHeading }}</h2> 
    <div ng-view></div> 
</div 

ng-viewに読み込まれた各HTMLページには、関連するviewmodel javascript controllerがあります。

サーバーコールからリストデータ（json）を取得するために、角度コントローラで$ http.getを使用してhtmlページの最初のドロップダウンを作成し始めました。次に、result.dataでJSON.parseを実行し、htmlページで定義されている選択リストコントロールに値を設定します。

$scope.refreshColorsDropdown = function() { 

    var sel = document.getElementById('colorDropdown'); 
    var colors = JSON.parse($scope.mycolors); 
    angular.forEach(colors, function(color) { 
     var opt = document.createElement('option'); 
     opt.innerHTML = color.name; 
     opt.value = color.hex; 
     sel.appendChild(opt); 
    }); 
} 

私はいくつかのサーバーを作成し、自分のページ上の各ドロップダウンのために、このアプローチを続けることができたが、すべて私のドロップダウンを移入するために呼び出す...しかし、これは退屈でコード重いようです。

妥当なアプローチは、複数のコレクションを返す1つのサーバー呼び出しを作成すること（それぞれのドロップダウンごとに1つずつ）を検討し、それらを解析してすべてのドロップダウンを設定することですか？

サーバサイドのC＃コードにリストをあらかじめ入力したいのですが、ng-view divを除いて私のcshtmlファイルは空ですので、コーディングはありません。

私のHTMLビューにすべてのHTMLコンテンツが含まれていて、cshtmlが空の場合...サーバー側から複数のhtmlリストコントロールを挿入するにはどのような戦略を使用する必要がありますか？

Answer 1

MVCを使用すると、必要なすべてのコレクションを含むViewModelを作成し、このコレクションを角度コントローラに戻すことができます。角度でのあなたの成功のオブジェクトで

MyViewModel mvm = new MyViewModel(); 
mvm.Colors = get colors here; 
mvm.Fabrics = get fabrics here; 

return Json(mvm, JsonRequestBehavior.AllowGet); 

：あなたのMVCコントローラで

public class MyViewModel 
{ 
public List<ColorModel> Colors{get;set;} 
public List<FabircModel> Fabrics {get;set;} 
} 

： あなたのビューモデルは次のようなものになるだろううまくいけば

myservice.getData() 
.success(function(data){ 
$scope.colors = data.Colors; 
$scope.fabrics = data.Fabrics; 
}) 

、助けまたは少なくとも取得しますあなたは始まった。

Answer 2

角度を使用しているという事実を無視すると、角度を使用しているために必要なものを表示モデルに挿入し、cshtmlを剃ることになります。SERVER- SIDEはまだ答えです。

これをクライアントに移動すると、おそらくデータをキャッシュできる角度サービスが最も直接的な方法です。