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

Question

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?

so you do not have a single page app? Could you perhaps pass the variable in the querystring to the othersPage.html — Maccurt
– Maccurt, Commented Jul 18, 2016 at 14:56
@Maccurt I'm trying to avoid the querystring option with regards to the email that's passed in. — LatentDenis
– LatentDenis, Commented Jul 18, 2016 at 14:58

Yosvel Quintero · Accepted Answer · 2016-07-18 16:45:20Z

1

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

edited Jul 18, 2016 at 16:45

answered Jul 18, 2016 at 15:06

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

LatentDenis Over a year ago

The use of ['ngStrorage'] needs to be placed in all of the js files including app.js right?

Yosvel Quintero Over a year ago

I have removed dependency on ngStorage to make it easier.. Now you can save data directly in localStorage.

LatentDenis Over a year ago

I have one problem, I did exactly as your code states above. In HomeController.js, I get an error once I execute function which is $localStorage is not defined. But if I put $localStorage into ...('HomeController', function ($scope, $localStorage).. the code breaks and I get Error: $injector:unpr Unknown Provider

Yosvel Quintero Over a year ago

Give a try to the updated the response please.. The reason you are getting that errors is because you have to first install the module ngStorage github.com/gsklee/ngStorage and Require ngStorage and Inject the Services in the controllers..

LatentDenis Over a year ago

This is so weird. The console is empty. In my submit function, the way I redirect to the other page is this: window.location.pathname = 'Home/OtherPage'; (I have this at the end of the submit function), is this why it's not showing?

|

Leibniz · Accepted Answer · 2016-07-18 15:05:57Z

0

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.

answered Jul 18, 2016 at 15:05

Leibniz

3043 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related