Solved

ASP.NET MVC and AngularJS passing QueryString data

Posted on 2016-07-28
7
568 Views
Last Modified: 2016-08-11
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.
0
Comment
Question by:Member_2_7967608
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 10

Assisted Solution

by:Prakash Samariya
Prakash Samariya earned 250 total points
ID: 41734165
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
 

Author Comment

by:Member_2_7967608
ID: 41737945
I am not using NewtonSoft.Json . is there alternate way.
0
 
LVL 4

Expert Comment

by:Srinivasulu Muppala
ID: 41746679
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Member_2_7967608
ID: 41750532
Are $stateParams used to access the querystring.  Mine is not a single page application. Do I need to specify URLs in the $routingprovider.
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41750791
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
 

Author Closing Comment

by:Member_2_7967608
ID: 41752943
Thanks
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41752960
You are welcome.
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

631 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question