Question

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

在我的应用中，设计为silo-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);
    });

除<div ng-view></div>标记外，我的CSHTML页面基本上是空的。路由的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来填充html页面上的第一个下拉列表，以从服务器调用中获取列表数据（json）。然后在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＃代码上预先填充列表，但是除了ng-view div之外我的cshtml文件是空的，所以那里没有编码。

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

Answer 1

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

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;
})

希望这有助于或至少让你开始。

Answer 2

如果你忽略了你使用角度的事实，答案就是用你需要的东西填充视图模型并剃刀cshtml，因为你正在使用角度...没有任何变化....因为你说SERVER-SIDE这仍然是答案。

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

填充多个下拉列表的位置

2 个答案: