Web.config
<Handlers> *lt;add name="JSON" path="*.json" verb="*" modules="IsapiModule" scriptProcessor="C:\WINDOWS\system32\inetsrv\asp.dll"/> </Handlers> This allows you to access the id.json file on the web server by the mainpage.htm
MainPage.html
Overview: This template uses angularjs controller to handle the ng-click event. The path to the viewPage is passed to the loadView function in the controller. The controller builds the page and uses https to return the html to the iFrame.
<!DOCTYPE html> <html> <head> <title>List and Viewer</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="Content/bootstrap.css" rel="stylesheet" /> <link href="Content/override.css" rel="stylesheet" /> <script src="Scripts/angular.min.js"></script> <script src="Scripts/mainpage_controller.js"></script> <style> li { cursor: pointer; cursor: hand; } </style> </head> <body> <div class="container"> <div ng-app="mainpage_App" ng-controller="mainpage_Controller"> <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6"> <div class="panel panel-primary"> <div class="panel-heading"><H3>List</H3></div> <div class="panel-body"> <ul class="list-group"> <li class=list-group-item><a ng-click="loadView('viewPage.htm?memberid=1')"> Bob Smith </a> <li class=list-group-item><a ng-click="loadView('viewPage.htm?memberid=2 ')"> Jim Jones </a> </ul> </div> <!--panel-body--> </div><!--panel--> </div> <div class="col-lg-6 col-md-6 col-xs-6"> <h3>Viewer</h3> <iframe id="viewer" ng-src="{{view_page}}" width="420px" height="800px" class="iframe-class" scrolling="yes" ></iframe> </div> </div><!--row--> </div> <!--app--> </div><!--container--> <script src="Scripts/jquery-2.2.3.js"></script> <script src="Scripts/bootstrap.js"></script> </body> </html>
mainpage_controller
The controller loads the viewer with the pageview.htm content generations for an json file identified by an id.
Ovar myApp=angular.module('mainpage_App', []); myApp.controller('mainpage_Controller', function ($scope) { $scope.loadView = function (paramValue) { $scope.family_page=paramValue; };
Viewpage.htm
Overview: the viewpage_controller uses http get to load the json file and builds an html string for display in the span lblReportView id.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Viewer Page</title> <link href="Content/bootstrap.min.css" rel="stylesheet"> <script src="Scripts/angular.min.js"></script> <script src="Scripts/viewpage_treecontroller.js"></script> </head> <body> <div class="container-fluid"> <div ng-app="viewpage_App" ng-controller="viewpage_controller"> <span id='lblReportView'></span> </div> <!--App--> </div> <!--Container--> <script src="Scripts/jquery-1.9.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> </body> </html>
ViewPage_Controller
Overview: the json file has four fields: sName, sMyLable, sMyText, sMyDate. the https.get loads and parses the json string in a variable call $scope.myData. I then for each the records in the json string into a variable called "value". Value has one of the four json fields that can be accessed. I then use the prototype store the record field value to be used to create an html form with the data and assign it to the lblReportView span.
var myApp=angular.module('ViewPage_App', []); myApp.controller('ViewPage_Controller', function ($scope,$http) { var iMemberId; var Person = function() { sName; sBirthLocation; sBirthDate; } var sURL = document.URL; iMemberId = sURL.substring(sURL.indexOf('=') + 1); $http.get(iMemberId +".json").then(function(response) { $scope.myData = response.data; lblReportView.innerHTML=''; angular.forEach($scope.myData, function(value,key){ if (Person.sName==undefined) { Person.sName=value.sName; } if ((value.sMyLabel=='Birth Date') && ((value.sMyText!=undefined) || (value.sMyDate!=undefined))) { if (value.sMyText!=undefined) Person.sBirthDate=value.sMyText; if (value.sMyDate!=undefined) Person.sBirthDate=value.sMyDate; } if ((value.sMyLabel=='Birth Location') && (value.sMyText!=undefined)) { Person.sBirthLocation=value.sMyText; } }); lblReportView=document.getElementById('lblReportView'); lblReportView.innerHTML=''; lblReportView.innerHTML+="<form class='form-horizontal' role='form'>" lblReportView.innerHTML+="<div class='form-group'>" lblReportView.innerHTML+="<label for='lbl1' class='col-lg-3 control-label'>Name</label><span placeholder='lbl1' class='col-lg-8'>" + Person.sName + "</span>"; lblReportView.innerHTML+="</div>" if (Person.sBirthLocation != undefined) { lblReportView.innerHTML+="<div class='form-group'>" lblReportView.innerHTML+="<label class='col-lg-3 control-label'>Birth Location</label><span class='col-lg-8'> " + Person.sBirthLocation + "</span>"; lblReportView.innerHTML+="</div>" } if (Person.sBirthDate != undefined) { lblReportView.innerHTML+="<div class='form-group'>" lblReportView.innerHTML+="<label class='col-lg-3 control-label'>Birth Date</label><span class='col-lg-8'> " + Person.sBirthDate + "</span>"; lblReportView.innerHTML+="</div>" } lblReportView.innerHTML+="</div>" });
1.JSON file
[{"sName":"Bob Smith","sMyDate":"1/1/2001","sMyText":"","sMyLabel":"Birth Date"}]