Project Modules In Treeview Using Angular And MVC

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.

• Introduction To AngularJS In ASP.NET MVC

• Visual Studio 2017 Version 15.7.3
• Microsoft .NET Framework Version 4.7
• Microsoft SQL Server 2016
• SQL Server Management Studio v17.7

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;
7. namespace FileStructureAngular.Controllers
8. {
9. public class HomeController : Controller
10. {
11. //
12. // GET: /Home/
13. public ActionResult Index()
14. {
15. return View();
16. }
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. }
26. List<Treeviewtbl> treelist = new List<Treeviewtbl>();
27. if (list.Count > 0)
28. {
29. treelist = BuildTree(list);
30. }
32. return new JsonResult { Data = new { treeList = treelist }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
33. }
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. }
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. }
9. List<Treeviewtbl> treelist = new List<Treeviewtbl>();
10. if (list.Count > 0)
11. {
12. treelist = BuildTree(list);
13. }
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;
6. namespace FileStructureAngular
7. {
8. public partial class Treeviewtbl
9. {
10. public List<Treeviewtbl> Childrens { get; set; }
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. }
5. @*<h2>Website Modules In Treeview</h2>*@
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>
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.

• Link to the source code

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.