需要在MVC视图中的下拉列表中使用Angular

时间:2015-07-09 14:25:39

标签: c# asp.net-mvc angularjs asp.net-mvc-4

我是MVC和AngularJs的新手,所以如果这是一个愚蠢的问题,请原谅。我在使用AngularJs填充的Asp.net MVC视图中有一个下拉列表。当用户在下拉列表中选择公司时,我使用companyId填充无序列表。我的问题是,我需要在另一个控制器和C#方法中使用相同的选定CompanyID。我已经找到了一些关于在服务中保存数据以重用它的信息,但是我不确定这是否是我真正需要的(或者如果有一种比创建服务更简单的方法),但是如果它是,我不知道如何在服务中保存价值。

这是我的观看代码:

                          {{company.vchCompanyName}}                  
        
        当前的仪表板模块:         
                {{m.vchRankingWidgetModuleHeaderText}}         
    
Here is my Angular Controller code:

    myApp.controller("CompanyController", 
    function($scope, $timeout, companyService)
    {
        getCompanies();
        function getCompanies() {
            companyService.getCompanies()
                .success(function (data) {
                    $scope.companies = data;
                })
             .error(function (error) {
                 $scope.status = 'Unable to load customer data: ' + error.message;
             });
        };


        $scope.getCurrentModules = function(){
            companyId = $scope.company;
            companyService.getCurrentModules(companyId)
            .success(function (newdata){
                $scope.currentModules = newdata;
            });

        }

    });

这是我的角色服务:

angular.module('dashboardManagement')
       .service('companyService', ['$http', function ($http) {
    this.getCompanies = function () {
        return $http.get('/Home/GetAllCompanies');
    };

    this.getCurrentModules = function (id) {
        return $http.get('/Home/GetCurrentModules?companyId=' + id);
    };
}

]);

非常感谢任何帮助!

我尝试使用该服务,但我无法让它工作。如果选中“业务单位”复选框,则需要显示公司的业务单位。我把功能" getBusinessUnits"在ng-checked上并尝试使用该服务来检索CompanyID。我的观点如下:

            <div ng-controller="BusinessUnitsController">
            <input id="ckBusinessUnit" type="checkbox" ng-checked="getBusinessUnits()"/>Exclude by Business Units<br />
            <ul>
                <li ng-repeat="unit in businessUnits">{{unit.Description}}</li>
            </ul>
        </div>

我的控制器看起来像这样:

myApp.controller("BusinessUnitsController",
    function ($scope, $timeout, companyService) {
        $scope.getBusinessUnits = function () {
            companyId = companyService.selectedCompanyId;

            companyService.getBusinessUnits(companyId)
                .success(function (data) {
                    $scope.businessUnits = data;
                 });
        };
    });

服务中的代码完全按照您的建议:

   angular.module('dashboardManagement')
.service('companyService', [
    '$http', function ($http) {

        this.selectedCompanyId = null;

        this.getCompanies = function () {
            return $http.get('/Home/GetAllCompanies');
        };

        this.getCurrentModules = function (companyId) {
            this.selectedCompanyId = companyId;
            return $http.get('/Home/GetCurrentModules?companyId=' + companyId);

        };

        this.getBusinessUnits = function (companyId) {
            return $http.get('/Home/GetBusinessUnits?companyId=' + companyId);
        }
    }
]);

我显然遗失了一些东西。

2 个答案:

答案 0 :(得分:0)

CompanyService可用于将selectedCompanyId存储为属性。

angular.module('dashboardManagement')
       .service('companyService', ['$http', function ($http) {

    this.selectedCompanyId = null;

    this.getCompanies = function () {
        return $http.get('/Home/GetAllCompanies');
    };

    this.getCurrentModules = function (companyId) {
        this.selectedCompanyId = companyId;
        return $http.get('/Home/GetCurrentModules?companyId=' + companyId);
    };
}]);

然后,您可以通过注入companyService来访问其他控制器/指令中的selectedCompanyId。

请注意,它就像具有单个实例的Singleton,因此您只能为整个角度应用程序选择一个公司。

答案 1 :(得分:0)

如果我理解你需要在你的View中保存select companyId然后将它传递给你的控制器(c#)吧?

试试这个,在angularjs控制器中添加一个新属性

       $scope.SelectedCompanyId = '';

然后在您的下拉列表中添加此属性

     ng-model="SelectedCompanyId"

然后添加新的隐藏输入

 <input type="hidden" name="CompanyId" value="{{SelectedCompanyId}}" />

现在,如果你在视图中使用的模型中有一个属性CompanyId,当你回发它时它会映射值,或者只是在你的控制器中添加一个新参数

     [HttpPost]
     public ActionResult YourActionName(YourModel model, int? CompanyId)
     {
         //you can access to the CompanyId
         //int? CompanyId --> this is only if your model doesn't have a property called CompanyId

     }