CODEWITHSUNDEEP
javascriptasp.netangularjsasp.net-mvc
LatentDenis
LatentDenis

Reputation: 2991

How can I pass variables in AngularJS from one controller to next in ASP MVC setup?

Say for example, under Views/Index.cshtml, I have a form with a few inputs, once filled out and submitted, goes through a function in the controller js file to then window.location.pathname redirect to another page. This next page is associated with another controller/js file.

How would I pass a couple variables over from one to the other?

I've tried doing it this way and it doesn't work:

First Try

_Layout.cshtml:

<html ng-app="MIScheduler">
    <head>
        ...
    </head>
    <body>
        @RenderBody()

        // AngularJS scripts
        <script src="app.js"></script>
    </body>
</html>

Index.cshtml:

<input ng-model="userID" name="userID" />
<input ng-model="userEmail" name="userEmail" />
<input type="submit" id="submit" />

@section scripts {
    <script src="HomeController.js"></script>
}

HomeController.js:

var CID = null;
var Email = null;

$scope.submit = function() {
    CID = $scope.userID;
    Email = $scope.userEmail;
    window.location.pathname = 'Home/OtherPage';
};

Then when redirects to OtherPage.cshtml:

{{cid}}
{{email}}

@section scripts {
    <script src="OtherPageController.js"></script>
}

Doesn't output anything if my OtherPageController.js:

$scope.cid = CID;
$scope.email = Email;

I've also tried implementing a service in app.js and passing in the service to both controllers, but nothing outputs this way as well.

Second Try

Here's my second approach I tried: app.js:

angular.module('moveinScheduler', [])
    .service('ShareUserInfo', function () {
        LData = {
            cid: '',
            email: ''
        }

        return {
            getValues: function () {
                return LData;
            },
            setValues: function (cid, email) {
                LData.cid = cid;
                LData.email = email;
            }
        };
    });

Index.cshtml is same as above. HomeController.cshtml:

var CID = null;
var Email = null;

$scope.submit = function() {
    ShareUserInfo.setValues(d.data.CID, d.data.Email);
    window.location.pathname = 'Home/OtherPage';
};

OtherPageController.js:

$scope.values = ShareUserInfo.getValues();

OtherPage.cshtml:

{{values}}

Nothing is being output. Keep in mind for both of the controllers, I'm passing in ShareUserInfo into the function as a service extension.

Any ideas on what's wrong? Why my values aren't being stored/passed around?

Upvotes: 1

Views: 865

Answers (2)

Yosvel Quintero
Yosvel Quintero

Reputation: 19090

You can save the data in the Window.localStorage:

HomeController.js:

angular.controller('ExampleController', function($scope) {
    $scope.submit = function() {
        var obj = {
            cid: $scope.userID,
            email: $scope.userEmail
        };
        localStorage.setItem('data', JSON.stringify(obj));
        // Make your redirect
    };
});

PageController.js:

angular.controller('PageController', function($scope) {
    var data = JSON.parse(localStorage.getItem('data'));

    console.log('data: ', data);
});

Upvotes: 1

Leibniz
Leibniz

Reputation: 294

Since you are not using a Single Page Application, and you are avoiding the use of querystring, you can use a $http.post, and pass a view model object to your OtherPageController. In the OtherPageController, implement an [HttpPost] action method that takes the view model object passed in from your $http.post call.

Upvotes: 0

Related Questions