在哪里填充多个下拉列表答案

【问题标题】：Where to populate multiple dropdown lists在哪里填充多个下拉列表
【发布时间】：2016-09-13 18:56:10
【问题描述】：

我正在尝试确定在使用 angularJS 的 .net MVC 应用程序的视图页面上填充多个下拉列表的正确方法。

在我的应用程序中，设计为筒仓 SLA 应用程序。我正在使用 angular 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 控制器。

我开始通过在角度控制器中使用 $http.get 从服务器调用获取列表数据 (json) 来填充 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);
    });
}

我可以为页面上的每个下拉菜单继续这种方法，创建多个服务器调用来填充我所有的下拉菜单...但这似乎很乏味且代码繁重。

一种合理的方法是考虑构建一个返回多个集合的服务器调用，每个下拉列表一个，然后我会解析这些以填充所有下拉列表？

我想在服务器端 C# 代码上预先填充列表，但是我的 cshtml 文件是空的，除了 ng-view div，所以那里没有编码。

所以对于我的问题...如果我的 HTML 视图包含所有 html 内容，并且 cshtml 为空...我应该使用什么策略从服务器端填充多个 html 列表控件？

【问题讨论】：

为什么要使用 JS DOM 操作来创建角度列表？为什么不通过 ng-repeat 以角度方式进行呢？
@Kindzoku ...这是一个有效的问题。答案是因为我无法让 ng-repeat 与我的 json 响应一起工作，所以我默认使用我所知道的。而且，我还在学习角度方式。它在我的待办事项上，将其转换为 ng-repeat。
快点完成你的 ToDo ;) 这是一个异步数据的例子。 2 种方式来创建 Angular 的下拉菜单。 plnkr.co/edit/32Sl09mOtANf27z4azW8

标签： asp.net angularjs asp.net-mvc

【解决方案1】：

使用 MVC，您可以创建一个包含所有所需集合的 ViewModel，并将该集合返回给您的 Angular 控制器。您的视图模型将类似于：

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

在您的 MVC 控制器中：

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

return Json(mvm, JsonRequestBehavior.AllowGet);

在 Angular 中的成功对象中：

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

希望这对您有所帮助或至少可以帮助您入门。

【讨论】：

感谢您的设计理念。我可以使用它。

【解决方案2】：

如果您忽略了您正在使用角度的事实，答案将是使用您需要的内容填充视图模型并剃须 cshtml，因为您使用的是角度......没有任何变化......因为你说的是服务器端这仍然是答案。

如果您将其移至客户端，则可以缓存数据的角度服务可能是最直接的方式。

【讨论】：