需要在MVC视图中持久化下拉列表中选择的值

本文关键字：下拉列表 选择 持久化 MVC 视图 | 更新日期: 2023-09-27 18:02:05

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

下面是我的View代码:

{{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 Service: 
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);
    };
}

]);

非常感谢任何帮助!

我试着使用服务，但我不能让它工作。如果选中Business Units复选框，我需要显示公司的Business Units。我将函数"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);
        }
    }
]);

需要在MVC视图中持久化下拉列表中选择的值

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，所以你在整个angular应用程序中只能选择一个公司。

如果我理解得好，你需要在视图中保存select companyId，然后将其传递给控制器(c#)，对吗?

试试这个，在你的angularjs控制器中添加一个新属性

       $scope.SelectedCompanyId = '';

然后在下拉列表中添加这个属性

     ng-model="SelectedCompanyId"

然后添加一个新的隐藏输入

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

如果你在视图中使用的模型中有一个属性CompanyId，当你post back时它会映射值，或者在控制器中添加一个新参数

     [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
     }
相关文章：