ASP.NET MVC and AngularJS passing QueryString data

Hi,

I have sub application in AngularJS . I thought of creating a ASP.NET MVC project as baseline project since I needed web api as wrapper for cross domain access.

This AngularJS UI calls external Rest Service.

This subapplication is opened from another Main Application which passes data in query string.
> SessionID
> TID
> AuthCode

I need to call the external Rest service passing these variables from angularjs.

This is one page application.

1. How do I pass variable from MVC model to Angularjs coming in Querystring when application Page loads
2. I am handling these variables as Session objects in MVC after getting from QueryString. These are important keys variables for this sub application.   What is the best practice to maintain these variables in MVC.    As mentioned this is one page application for now.
Member_2_7967608Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Are you able to represent your URL in hashbang format i.e.

Open in new window

http://some.domain.com/#/?SessionID=123&TID=678&AuthCode=A120

If so then you can do this
<html ng-app="ee1474">
<body>
<div ng-controller="myController"></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js"></script>
<script>
(function() {
  'use strict';
  angular.module('ee1474',[])
    .controller('myController', function($scope, $location) {
      var paramValue = $location.search();
      console.log(paramValue);
    });
})();
</script>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t1474.html#?SessionID=123&TID=678&AuthCode=A120
0
 
Prakash SamariyaConnect With a Mentor IT ProfessionalCommented:
Hope you are getting data into your MVC page like below
@model IEnumerable<Models.Object>

Open in new window

Now pass this to angularJS Scope using ng-init like below
<div ng-app="MyApp" ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">
</div>

Open in new window

In angularJS code, in controller create "init" method to take object like below
var myApp = angular.module('MyApp', []);

myApp.controller('myController', function ($scope) {
    $scope.init = function (object) {
        $scope.object= object;
    }
});

Open in new window


Now you can pass this scope object to webapi using angularJS service

Hope this will work!
0
 
Member_2_7967608Author Commented:
I am not using NewtonSoft.Json . is there alternate way.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Srinivasulu MuppalaLead DeveloperCommented:
Hi
Inject the $stateParams service in your angular controller to access below mentioned params and pass them to $http service that will resolve you issue and utilize angular options.

> SessionID
> TID
> AuthCode
0
 
Member_2_7967608Author Commented:
Are $stateParams used to access the querystring.  Mine is not a single page application. Do I need to specify URLs in the $routingprovider.
0
 
Member_2_7967608Author Commented:
Thanks
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.