Clever Geek Handbook

Need to keep the value selected in the dropdown in the MVC view with Angular

I am new to MVC and AngularJs, so please excuse me if this is a stupid question. I have a dropdown in an Asp.net MVC view that is populated with AngularJs. When the user selects a company from the dropdown, I use companyId to populate the unordered list. My problem is I need to use the same selected CompanyID in another controller and C # method. I found some information on storing data in a service for reuse, but I'm not sure if this is what I really need here (or if there is an easier way to do this than creating a service), but if it is, I don't know. how to store the value in the service.

Here is my code like:

                    {{}} Company.vchCompanyName              

      

      Current dashboard modules:       
  •           {{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;
            });

        }

    });

Here is my 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);
    };
}

]);

Any help is greatly appreciated!

I tried using the Service, but I can't seem to get it to work. I need to show Business Units for a company if Business Units is checked. I put function "getBusinessUnits" on checked ng and tried to use service to get CompanyID. My view looks like this:

            <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>

My controller looks like this:

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

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

The code in the Service is exactly the same as you suggested:

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

I am clearly missing something.

+3


source to share


2 answers


CompanyService can be used to store the selected object as a property.

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


Then you can access the selectedCompanyId everywhere in your other controller / directive by injecting companyService.

Note that this is like a Singleton with one instance, so you can only have one chosen company for your entire angular app.

0


source


If I understand well, you need to store the selected company in your view and then pass it to the correct controller (C #)?

try this add new property to your angularjs controller

       $scope.SelectedCompanyId = '';

then in the dropdown add this attribute

     ng-model="SelectedCompanyId"


then add a new hidden input

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

now if there is a CompanyId property in the model you are using in your view, when you do post back it displays the value or just in your controller add a new parameter

     [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

     }
0


source






More articles:


All Articles