- Visual Studio 2015
- MIT
- C#
- ASP.NET MVC
- AngularJS
- ASP.NET MVC
- TreeView
- AngularJS
- 07/04/2016
MVC application. AngularJS Treeview is a expandable node list that expand the child nodes whild selected.
- Compatible: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari)
- Clone: Use Git or checkout with SVN using the web URL.
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.
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
// 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:
<textarea class="crayon-plain print-no" readonly="readonly"></textarea>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
(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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@{
ViewBag.Title
= "Index";
}
<h2>Angular Treeview</h2>
<div
ng-controller="myController"
style="padding:20px;">
<span><b>Selected Node</b> : {{ngTree.currentNode.RoleName}}</span>
<hr
/>
<div
data-angular-treeview="true"
data-tree-id="ngTree"
data-tree-model="roleList"
data-node-id="RoleID"
data-node-label="RoleName"
data-node-children="children">
</div>
</div>
|
Out Put:
