CODEWITHSUNDEEP
angularjsasp.net-mvcasp.net-web-api
WorkJ
WorkJ

Reputation: 200

How to call MVC Web API Controller after AngularJS popup completes

I have an AngularJS module with code that calls a modal popup. I also have code that calls an MVC Web API controller method. Both of these functions work independently of one another right now. What I would like to happen is after the user clicks the OK button on the modal, I want to get the value of the modal text box and send it to the API controller as a parameter. The code I have so far is below:

app.js:

(function () {
    'use strict';

    var app = angular.module("CRNApp", ['ui.bootstrap','trNgGrid']);

    var MainController = function ($scope, $http, $log, $uibModal) {
        $scope.showGrid = false;
        $scope.showPolicyScreen = false;

        $scope.CRNViewModel = {
            policyId: 0
        };

        $scope.openPolicyId = function () {

            $uibModal.open({
                templateUrl: 'templates/popupGetPolicy.cshtml', 
                backdrop: false, 
                windowClass: 'modal', 
                controller: function ($scope, $uibModalInstance, $log, CRNViewModel) {
                    $scope.CRNViewModel = CRNViewModel;
                    $scope.submit = function () {

                    }
                    $scope.cancel = function () {
                        $uibModalInstance.dismiss('cancel');
                    };
                },
                resolve: { CRNViewModel: function () { return $scope.CRNViewModel; } }
            });//end of modal.open

        }; // end of scope.open fu

        $scope.policyLookup = function (policyNumber) {
            $scope.loading = true;

            $scope.CRNViewModel.policyId = policyNumber; //"WCZ25999"

            $http.post("/api/Policy"
                , $scope.CRNViewModel
                , { header: { 'Content-Type': 'application/json' } }) 
                .then(function (response) {
                    $scope.policy = response.data;
                    $scope.loading = false;
                    $scope.showGrid = false;
                    $scope.showPolicyScreen = true;
                })
                .catch(function (error) {
                    console.log(error);
                    $scope.loading = false;
                    $scope.showGrid = false;
                });
        };
    };

    app.controller("MainController", MainController); 
}());

The MVC API Controller method:

 // POST: api/Policy
        public IHttpActionResult Post([FromBody]CRNViewModel policy)
        {
            CRNViewModel _crnVM = new CRNViewModel();
            IConditionalRenewalNotices _crn = new ConditionalRenewalNoticesRepository();
            _crnVM = _crn.GetPolicyByPolicyId(policy.PolicyId);
            return Json(_crnVM);
        }

Upvotes: 0

Views: 537

Answers (1)

peco
peco

Reputation: 4000

Return the textbox value when you close the $uibModalInstance instance and then add a callback for the modal result:

var modal = $uibModal.open({
    templateUrl: 'templates/popupGetPolicy.cshtml',
    backdrop: false,
    windowClass: 'modal',
    controller: function($scope, $uibModalInstance, $log, CRNViewModel) {
        $scope.CRNViewModel = CRNViewModel;
        $scope.submit = function () {
            // pass in the value you want to return
            $uibModalInstance.close('WCZ25999');
        }
        $scope.cancel = function() {
            $uibModalInstance.dismiss('cancel');
        };
    },
    resolve: { CRNViewModel: function() { return $scope.CRNViewModel; } }
});

modal.result.then(function (value) {
    $scope.policyLookup(value);
});

Upvotes: 1

Related Questions