Friday, 2 September 2016

Implementing TreeView using angularjs in asp.net MVC5

2 comments
Hi every one in this application i am going to explain about implementing Tree view in asp.net mvc5 application using angular js frame work.previously we have created many applications using angular and angular User Interface in this blog.Lets look at few application below..
1.In this application i am going to implement Tree View using Data coming from data base.Now lets begin the implementation...

Creating Data base tables with data required for TreeView

1.Add a Database to Empty MVC project solution by right clicking --> App_data folder --> Add --> Sql Database(under data section).
2.Double click on Database to open it in Server explorer.
3.Use below server code to create table schema and insert some values.

CREATE TABLE [dbo].[TFileStructure] (
    [FileID]   INT          NOT NULL,
    [FileName] VARCHAR (50) NOT NULL,
    [ParentID] INT          NOT NULL,
    PRIMARY KEY CLUSTERED ([FileID] ASC)
);
4.Here ParentID column is used to retrieve the Child elements in TreeView.
5.Insert some data using below sql code..
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (1, N'TreeViewAngularjs', 0)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (2, N'App_Data', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (3, N'App_Start', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (4, N'Content', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (5, N'Controllers', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (6, N'Scripts', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (7, N'Views', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (8, N'Models', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (9, N'Images', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (10, N'Global.asax', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (11, N'We.Config', 1)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (12, N'Database.mdf', 2)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (13, N'Database_log.ldf', 12)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (14, N'RouteConfig.cs', 3)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (15, N'Bundle.config', 3)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (16, N'bootstrap.css', 4)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (17, N'Site.css', 4)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (18, N'treeview.css', 4)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (19, N'HomeController.cs', 5)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (20, N'Home', 7)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (21, N'Shared', 7)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (22, N'Index.cshtml', 20)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (23, N'_Layout.cshtml', 21)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (24, N'angular.treeview.js', 6)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (25, N'bootstrap.js', 6)
INSERT INTO [dbo].[TFileStructure] ([FileID], [FileName], [ParentID]) VALUES (26, N'modernier.js', 6)
6.Add ADO.NET Entity data model to the Models folder(If you do not know how to add it refer previous articles).
7.Add another partial entity model class in Models folder to store the child data of folders.
Note: we can add it in .edmx file also but it not a good idea to change the visual studio generated code.So i am creating another class with same model name.
namespace TreeViewusingAngularjs.Models
{
    public partial class TFileStructure
    {
        public List Childs { get; set; }
    }
}
8.Download the resource file for Tree View from this link
Contents required are:
  1. angular.treeview.js
  2. treeview.css

Create Controller to send data for View

1.Create a Controller .here i named it as HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TreeViewusingAngularjs.Models;

namespace TreeViewusingAngularjs.Controllers
{
    public class HomeController : Controller
    {
        // To render Index View
        public ActionResult Index()
        {
            return View();
        }
        //loads the child files based on list
        public void GetTreeView(List list,TFileStructure current,ref List returnlist)
        {
            var childs = list.Where(a => a.ParentID == current.FileID).ToList();
            current.Childs = new List();
            current.Childs.AddRange(childs);
            foreach (var i in childs)
            {
                GetTreeView(list, i, ref returnlist);
            }
        }
        //bulids the tree 
        public List BuildTree(List list)
        {
            List returnList = new List();
            var topLevels = list.Where(a => a.ParentID == list.OrderBy(b => b.ParentID).FirstOrDefault().ParentID);
            returnList.AddRange(topLevels);
            foreach (var i in topLevels)
            {
                GetTreeView(list, i, ref returnList);
            }
            return returnList;
        }
        //Sends the data to TreeView in JSON format
        public JsonResult GetFileStructure()
        {
            List list = new List();
            using (DatabaseEntities db = new DatabaseEntities())
            {
                list = db.TFileStructures.OrderBy(a => a.FileName).ToList();
            }

            List treelist = new List();
            if (list.Count > 0)
            {
                treelist = BuildTree(list);
            }

            return new JsonResult { Data = new { treeList = treelist }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }
}

Add Angular script to get data from server

1.In this code injected angularTreeview as a dependency to angular application.
2.$http service communicates with server to get/post data.
var app = angular.module('myApp', ['angularTreeview']);
    app.controller('myController', function ($scope, $http) {
        $http.get('/Home/GetFileStructure').then(function (response) {
            $scope.List = response.data.treeList;
        });
    });
3.The Complete View code is like below...
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/treeview.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="~/Scripts/angular.treeview.js"></script>
<h3>Angular Tree view</h3>
<div ng-app="app" ng-controller="treecontroller">
    <div data-angular-treeview="true"
         data-tree-id="mytree"
         data-tree-model="List"
         data-node-id="FileID"
         data-node-label="FileName"
         data-node-children="Childs">
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('app', ['angularTreeview']);
    app.controller('treecontroller', function ($scope, $http) {
        $http.get('/Home/GetFileStructure').then(function (response) {
            $scope.List = response.data.treeList;
        });
    });
</script>

4.After running the application we will get TreeView like below.I inserted Visual studio solution data.
Implementing TreeView using angularjs in asp.net MVC5
Download source code for this application here Source Code(VS2015).

Conclusion

I hope this tutorial is understandable and useful for every reader.Please comment if you suggest any modification to improve the quality of article.If you are not subscribed to this blog subscribe.follow on Social networks for daily awesome updates[Facebook,twitter,google plus].

2 comments:

  1. how do i add checkbox for each node in treeview.

    ReplyDelete
  2. I am newbie to mvc 5 treeview concept.I want using sitemapprovider.I want the sitemapprovider text to be displayed in treeview and when I click the link corresponding page is displayed.

    ReplyDelete