Today we are going to implement AngularJS Treeview with ASP.Net MVC application. AngularJS Treeview is a expandable node list that expand the child nodes whild selected.

1. Compatible: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari)
2. Clone: Use Git or checkout with SVN using the web .

Attributes of angular treeview are below.

1. angular-treeview: the treeview directive.
2. tree-id : each tree’s unique id.
3. tree-model : the tree model on $scope.
4. node-id : each node’s id.
5. node-label : each node’s label.
6. node-children: each node’s children.

Let’s get started with visual studio, create a new MVC project to experiment.

Install AngularJS and reference them to Layout page.

Let’s create a method to get all data from server with api.

// GET: api/Roles
public IHttpActionResult GetRoles()
{
    object[] objRole = null;
    try
    {
        objRole = (
                from rl in db.Roles
                where rl.ParentID == 1 && rl.Child == null
                select new
                {
                    RoleID = rl.RoleID,
                    RoleName = rl.RoleName,
                    ParentID = rl.ParentID,
                    Child = rl.Child,
                    collapsed = true,
                    children = from cl in db.Roles
                                where cl.ParentID == rl.RoleID && cl.Child == 1
                                select new
                                {
                                    RoleID = cl.RoleID,
                                    RoleName = cl.RoleName,
                                    ParentID = cl.ParentID,
                                    Child = cl.Child,
                                    collapsed = true,
                                    children = from cld in db.Roles
                                                where cld.ParentID == cl.RoleID && cl.Child == 1
                                                select new
                                                {
                                                    RoleID = cld.RoleID,
                                                    RoleName = cld.RoleName,
                                                    ParentID = cld.ParentID,
                                                    Child = cld.Child,
                                                    collapsed = true
                                                }
                                }
                }).ToArray();
    }
    catch (Exception e)
    {
        e.ToString();
    }
    return Json(new
    {
        objRole
    });
}

Check the JSON result

Here you can see our server is responding with data. Now let’s bind this data to our UI to represent the tree.

Angular Controller:

(function () {

    //angular module
    var myApp = angular.module('myApp', ['angularTreeview']);

    //controller
    myApp.controller('myController', function ($scope, $http) {
        fetch();
        function fetch() {
            $http({
                method: 'GET',
                url: '/api/Roles'
            }).then(function successCallback(response) {
                console.log(response.data.objRole);
                $scope.roleList = response.data.objRole;
            }, function errorCallback(response) {
                console.log(response);
            });
        }
    });

})();

Html View:

@{
    ViewBag.Title = "Index";
}

Angular Treeview


    Selected Node : {{ngTree.currentNode.RoleName}}
    

    

    

Out Put:

Source Code: I’ve uploaded the full source code to download/clone , Hope this will help 🙂