logo

ASP.NET - How to create a HTML driven Master/Detail View Page that loads an external page into the view using angularjs Javascript

Overview: This code snippet shows how to create a list and viewer that loads a json string stored on the server by id. The mainpage.htm will insert into an iFrame a viewpage.html?memberid=1 angularjs page that loads its data from an the viewpage.htm. jquery is used to get the query string parameters and load the json file into the page. The advantage to this design pattern is "no database" access is required. All the data retrieved by angularjs and displayed to the html template. The design is massively scalable.

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"}]
s