Solved

ASP.NET MVC and AngularJS passing QueryString data

Posted on 2016-07-28
7
229 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
7 Comments
 
LVL 8

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 54

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 54

Expert Comment

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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

808 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