Solved

ASP.NET MVC and AngularJS passing QueryString data

Posted on 2016-07-28
7
392 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
Technology Partners: 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 57

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 57

Expert Comment

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

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

751 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