Project Modules In Treeview Using Angular And MVC

AngularJS is an MVC based framework. Google developed AngularJS. AngularJS is an open source project, which can be used freely, modified and shared by others.

Introduction

AngularJS is an MVC based framework. Google developed AngularJS. AngularJS is an open source project, which can be used freely, modified and shared by others.

Top features Of AngularJS

  • Two Way Data-Binding
    This means that any changes to the model update the view and any changes to the view updates the model.

  • Dependency Injection
    AngularJS has a built-in Dependency Injection, which makes application easier to develop, maintain and debug in addition to the test.

  • Testing
    Angular will test any of its code through both unit testing and end-to-end testing.

  • Model View Controller
    Split your application into MVC components. Maintaining these components and connecting them together means setting up Angular.
For More Details Visit My Below Article,
Prerequisites
  • Visual Studio 2017 Version 15.7.3
  • Microsoft .NET Framework Version 4.7
  • Microsoft SQL Server 2016
  • SQL Server Management Studio v17.7 
Description
 
In this project, the description is about the steps to create treeview structure of File and SubFile using AngularJS in MVC and This procedure can be implemented in case of Modules and related pages under each module in ERP type of project.
 
So, here I show you a  project  which you can implement in a real-time scenario for better understanding of how many pages there are under respective Modules and the relation between Module and its corresponding pages.
 
Steps To Be Followed:
 
Step 1
 
Create a table named "Treeviewtbl". 
 
Here I have a general script of Table creation with some dummy records inserted. You can find this SQL file inside the project folder named
"Treeviewtbl.sql" 
 
Step 2
 
Then I have created an MVC application named "FileStructureAngular".
 
Step 3
 
Here I have added Entity Data Model named "SatyaModel.edmx" .
 
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add. A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
 
Step 4 
 
Inside HomeController I've added the following code.
 
Code Ref
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace FileStructureAngular.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.   
  18.         public JsonResult GetFileStructure()  
  19.         {  
  20.             List<Treeviewtbl> list = new List<Treeviewtbl>();  
  21.             using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
  22.             {  
  23.                 list = dc.Treeviewtbls.OrderBy(a => a.FileName).ToList();  
  24.             }  
  25.   
  26.             List<Treeviewtbl> treelist = new List<Treeviewtbl>();  
  27.             if (list.Count > 0)  
  28.             {  
  29.                 treelist = BuildTree(list);  
  30.             }  
  31.   
  32.             return new JsonResult { Data = new { treeList = treelist }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };  
  33.         }  
  34.    
  35.         public void GetTreeview(List<Treeviewtbl> list, Treeviewtbl current, ref List<Treeviewtbl> returnList)  
  36.         {  
  37.             var childs = list.Where(a => a.ParentID == current.ID).ToList();  
  38.             current.Childrens = new List<Treeviewtbl>();  
  39.             current.Childrens.AddRange(childs);  
  40.             foreach (var i in childs)  
  41.             {  
  42.                 GetTreeview(list, i, ref returnList);  
  43.             }  
  44.         }  
  45.   
  46.         public List<Treeviewtbl> BuildTree(List<Treeviewtbl> list)  
  47.         {  
  48.             List<Treeviewtbl> returnList = new List<Treeviewtbl>();    
  49.             var topLevels = list.Where(a => a.ParentID == list.OrderBy(b => b.ParentID).FirstOrDefault().ParentID);  
  50.             returnList.AddRange(topLevels);  
  51.             foreach (var i in topLevels)  
  52.             {  
  53.                 GetTreeview(list, i, ref returnList);  
  54.             }  
  55.             return returnList;  
  56.         }  
  57.     }  
  58. }  
Code Description
 
Fetch data from the database and return it as a JSON result. 
  1. public JsonResult GetFileStructure()  
  2.         {  
  3.             List<Treeviewtbl> list = new List<Treeviewtbl>();  
  4.             using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
  5.             {  
  6.                 list = dc.Treeviewtbls.OrderBy(a => a.FileName).ToList();  
  7.             }  
  8.   
  9.             List<Treeviewtbl> treelist = new List<Treeviewtbl>();  
  10.             if (list.Count > 0)  
  11.             {  
  12.                 treelist = BuildTree(list);  
  13.             }  
  14.   
  15.             return new JsonResult { Data = new { treeList = treelist }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };  
  16.         }   
I used a recursion method required for angularTreeview directive. 
 
Recursion method for recursively getting all child nodes and getting a child of the current item:
  1. public void GetTreeview(List<Treeviewtbl> list, Treeviewtbl current, ref List<Treeviewtbl> returnList)  
  2.         {  
  3.             var childs = list.Where(a => a.ParentID == current.ID).ToList();  
  4.             current.Childrens = new List<Treeviewtbl>();  
  5.             current.Childrens.AddRange(childs);  
  6.             foreach (var i in childs)  
  7.             {  
  8.                 GetTreeview(list, i, ref returnList);  
  9.             }  
  10.         }  
To find top levels items:
  1. public List<Treeviewtbl> BuildTree(List<Treeviewtbl> list)  
  2.         {  
  3.             List<Treeviewtbl> returnList = new List<Treeviewtbl>();  
  4.             var topLevels = list.Where(a => a.ParentID == list.OrderBy(b => b.ParentID).FirstOrDefault().ParentID);  
  5.             returnList.AddRange(topLevels);  
  6.             foreach (var i in topLevels)  
  7.             {  
  8.                 GetTreeview(list, i, ref returnList);  
  9.             }  
  10.             return returnList;  
  11.         }  
Step 5
 
Add a partial class of "Treeviewtbl" class for adding an additional field for holding child items. 
 
Code Ref
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace FileStructureAngular  
  7. {  
  8.     public partial class Treeviewtbl  
  9.     {  
  10.         public List<Treeviewtbl> Childrens { getset; }  
  11.     }  
  12. }  
Code Description
 
Here is a field property "children" for identifying child nodes. So we need to add an additional field in our Model. So, I will add a partial class to add an additional field to hold child items. 
 
Step 6
 
Add required files into our project. In this article, I am going to use angularTreeview directive. This a very popular directive to render treeview from hierarchical data in AngularJS application.
  • angular.treeview.css
  • angular.treeview.js
  • image folder
 
The angular.treeview.css file is present in the Contents Folder. The angular.treeview.js file is present in Scripts Folder. I have added 3 png files for folder closed, folder opened, and files inside folders.
 
Here folders are the Modules and files are the pages under respective modules.
 
Step 7
 
I have added a Javascript file, where we will write AngularJS code for creating an Angular module and an Angular controller.  
 
In our application, I will add a Javascript file into the Scripts folder. Go to Solution Explorer > Right click on "Scripts" folder > Add > New Item > Select Javascript file under Scripts > Enter file name (here in my application it is "myApp.js") > and then click on Add button.
 
Code Ref
  1. var app = angular.module('myApp', ['angularTreeview']);  
  2. app.controller('myController', ['$scope''$http'function ($scope, $http) {  
  3.     $http.get('/home/GetFileStructure').then(function (response) {  
  4.         $scope.List = response.data.treeList;  
  5.     })  
  6. }])  
Code Description
 
Add a dependency to your application module.
  1. var app = angular.module('myApp', ['angularTreeview']);   
Here I created a module named myApp and registered a controller named myController and then added GetFileStructure controller action method of HomeController for fetching data from the database and it returned as a JSON result.
  1. $http.get('/home/GetFileStructure').then(function (response) {  
  2.         $scope.List = response.data.treeList;  
  3.     })  
Step 8
 
Add view for that (here index action) named "Index.cshtml".
 
Code Ref
  1. @{  
  2.     ViewBag.Title = "Satyaprakash - Website Modules In Treeview";  
  3. }  
  4.   
  5. @*<h2>Website Modules In Treeview</h2>*@  
  6.   
  7. <fieldset>  
  8.     <legend style="font-family:Arial Black;color:blue">Website Modules In Treeview File Structure</legend>  
  9.     <div ng-app="myApp" ng-controller="myController">  
  10.         <span style="font-family:Arial Black;color:forestgreen">Selected Node : <span style="font-family:Arial Black;color:red">{{mytree.currentNode.FileName}}</span> </span>  
  11.         <br/>  
  12.         <br/>  
  13.         <div data-angular-treeview="true"  
  14.              data-tree-id="mytree"  
  15.              data-tree-model="List"  
  16.              data-node-id="ID"  
  17.              data-node-label="FileName"  
  18.              data-node-children="Childrens">  
  19.         </div>  
  20.     </div>  
  21.   
  22.     <link href="~/Content/angular.treeview.css" rel="stylesheet" />  
  23.     @section Scripts{  
  24.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>  
  25.         <script src="~/Scripts/angular.treeview.js"></script>  
  26.         <script src="~/Scripts/myApp.js"></script>  
  27.     }  
  28. </fieldset>  
Code Description
 
Here I have created a module name and registered a controller name under this module.
  1. <div ng-app="myApp" ng-controller="myController">  

Copy the script and css into your project and add a script and link tag to your page.

  1. <link href="~/Content/angular.treeview.css" rel="stylesheet" />  
  2.   @section Scripts{  
  3.       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>  
  4.       <script src="~/Scripts/angular.treeview.js"></script>  
  5.       <script src="~/Scripts/myApp.js"></script>  
  6.   }  

Attributes of angular treeview are below.

  • angular-treeview: the treeview directive.
  • tree-id : each tree's unique id.
  • tree-model : the tree model on $scope.
  • node-id : each node's id.
  • node-label : each node's label.
  • node-children: each node's children.
  1. <div data-angular-treeview="true"  
  2.             data-tree-id="mytree"  
  3.             data-tree-model="List"  
  4.             data-node-id="ID"  
  5.             data-node-label="FileName"  
  6.             data-node-children="Childrens">  
  7.        </div>  
Then I mentioned a span tag for showing the text of selected folder and file name inside treeview.
  1. <span style="font-family:Arial Black;color:forestgreen">Selected Node : <span style="font-family:Arial Black;color:red">{{mytree.currentNode.FileName}}</span> </span>  
TREE attribute
  • angular-treeview: the treeview directive
  • tree-id : each tree's unique id.
  • tree-model : the tree model on $scope.
  • node-id : each node's id
  • node-label : each node's label
  • node-children: each node's children
Note 
I have used angularTreeview directive for generating treeview from hierarchical data. 
OUTPUT
 
For initial page load, here all folders or modules are open and all related files or pages of corresponding modules are as shown below in blue icon.
  • Folder or Module in the yellow icon.
  • Files or Pages in the blue icon. 
 
 
Folder or Module In Closed Option.
 
 
As per selection of module or pages, the text is shown in red.
 
 
SUMMARY
  • Treeview using AngularJS in MVC.
  • AngularTreeview directive for generating treeview from hierarchical data.
  • Sample project about Modules and Pages in treeview. 
  • Implement Recursion method for recursively getting all children.