I have 3 tables which I wanna use to generate (auto or manually) to a treeview in HTML.
I'm using C#, MVC3, Razor and entity framework
Let me describe the tables,
system_tree
------------------------------------------------
id | parent_id | device_id | name
- If parent_id is NULL, its a root node
- If device_id is present, its a leaf. And name should be left NULL
- If device_id isn't present, name should not be NULL. This is the nodes downto the leaf
system_devices
------------------------------------------------
id | name
- List of devices, the leaves
system_permissions
------------------------------------------------
device_id | user_id
- Link together which devices a user can access. Should display the leaf plus all nodes in system_tree upto the root node
If I could just get the data into some kind of multidimensional array I could easly run it through a helper function in razor. I have try to find a decent way to do this, but I just can't find just about anything.
Thank you for any help on this, I'm pretty new to this side of the website making world
The most common way to render tree-like data is to use a <ul> with nested <ul>, like this:
<ul>
<li>Level One
<ul>
<li>Level Two</li>
</ul>
</li>
<li>Level One
<ul>
<li>Level Two</li>
</ul>
</li>
</ul>
So the only trick is to then build a view model that represents your 3 levels of data.
class Level1
{
public string Text {get;set;}
public IEnumerable<Level2> Items {get;set;}
}
class Level2
{
public string Text {get;set;}
public IEnumerable<Level3> Items {get;set;}
}
class Level3
{
public string Text {get;set;}
}
Thanks for you answers, I already checked the link you sent. But both your answers are refering to a fixed points of levels, not n-levels, I can have an leaf which is 100 level deep. And then this concept isn't the most ultimate right?
Thanks for you answers, I already checked the link you sent. But both your answers are refering to a fixed points of levels, not n-levels, I can have an leaf which is 100 level deep. And then this concept isn't the most ultimate right?
Ah, ok. I guess from your above example you said 3 tables and I assumed it was only 3 levels deep. But given the general structure above, you could easily make those view model classes more generic and then in the view recurse using Html.Partial to render
the next level.
Ah okey, I'll take a look at that. The problem I'm facing is how do I build a model class that generic in C#? Do you have any very good examples? I think I understand the Partial view thing or an @helper function.
Ah okey, I'll take a look at that. The problem I'm facing is how do I build a model class that generic in C#? Do you have any very good examples? I think I understand the Partial view thing or an @helper function.
Thank you, I see, that makes sense. I will try to fill up that list with the right data from the database, but I think its hard to fill the model from the leaf to root node, since the leaves are the only info that is saved in the database. And I need to
loop backwards through the parents I'm not sure how this would be done in a efficent and good way.
Arceus
0 Points
4 Posts
HTML Tree view generated from database
May 14, 2012 02:21 PM|LINK
Hello,
I have 3 tables which I wanna use to generate (auto or manually) to a treeview in HTML.
I'm using C#, MVC3, Razor and entity framework
Let me describe the tables,
system_tree
------------------------------------------------
id | parent_id | device_id | name
- If parent_id is NULL, its a root node
- If device_id is present, its a leaf. And name should be left NULL
- If device_id isn't present, name should not be NULL. This is the nodes downto the leaf
system_devices
------------------------------------------------
id | name
- List of devices, the leaves
system_permissions
------------------------------------------------
device_id | user_id
- Link together which devices a user can access. Should display the leaf plus all nodes in system_tree upto the root node
If I could just get the data into some kind of multidimensional array I could easly run it through a helper function in razor. I have try to find a decent way to do this, but I just can't find just about anything.
Thank you for any help on this, I'm pretty new to this side of the website making world
/Arceus
BrockAllen
All-Star
28084 Points
4997 Posts
MVP
Re: HTML Tree view generated from database
May 14, 2012 02:32 PM|LINK
The most common way to render tree-like data is to use a <ul> with nested <ul>, like this:
<ul> <li>Level One <ul> <li>Level Two</li> </ul> </li> <li>Level One <ul> <li>Level Two</li> </ul> </li> </ul>So the only trick is to then build a view model that represents your 3 levels of data.
class Level1 { public string Text {get;set;} public IEnumerable<Level2> Items {get;set;} } class Level2 { public string Text {get;set;} public IEnumerable<Level3> Items {get;set;} } class Level3 { public string Text {get;set;} }And your razor view would be like this:
@model IEnumerable<Level1> <ul> @foreach(var item in Model) { <li>@item.Text <ul> @foreach(var item2 in item.Items) { <li>@item2.Text</li> } </ul> </li> } </ul>Hopefully you get the idea... So if you're not familair with view models, then I'd suggest reading up in the tutorials section of this website.
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
ignatandrei
All-Star
137698 Points
22155 Posts
Moderator
MVP
Re: HTML Tree view generated from database
May 14, 2012 03:12 PM|LINK
http://weblogs.asp.net/raduenuca/archive/2011/04/24/asp-net-mvc-displaying-a-tree-view-using-a-recursive-declarative-helper-and-jquery.aspx
Arceus
0 Points
4 Posts
Re: HTML Tree view generated from database
May 14, 2012 03:53 PM|LINK
Thanks for you answers, I already checked the link you sent. But both your answers are refering to a fixed points of levels, not n-levels, I can have an leaf which is 100 level deep. And then this concept isn't the most ultimate right?
/Arceus
BrockAllen
All-Star
28084 Points
4997 Posts
MVP
Re: HTML Tree view generated from database
May 14, 2012 04:07 PM|LINK
Ah, ok. I guess from your above example you said 3 tables and I assumed it was only 3 levels deep. But given the general structure above, you could easily make those view model classes more generic and then in the view recurse using Html.Partial to render the next level.
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
Arceus
0 Points
4 Posts
Re: HTML Tree view generated from database
May 14, 2012 04:33 PM|LINK
Ah okey, I'll take a look at that. The problem I'm facing is how do I build a model class that generic in C#? Do you have any very good examples? I think I understand the Partial view thing or an @helper function.
/Arceus
BrockAllen
All-Star
28084 Points
4997 Posts
MVP
Re: HTML Tree view generated from database
May 14, 2012 04:36 PM|LINK
Well, I'd just think:
class Node
{
public string Text {get;set;}
public IEnumerable<Node> Children {get;set;}
}
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
Arceus
0 Points
4 Posts
Re: HTML Tree view generated from database
May 14, 2012 04:57 PM|LINK
Thank you, I see, that makes sense. I will try to fill up that list with the right data from the database, but I think its hard to fill the model from the leaf to root node, since the leaves are the only info that is saved in the database. And I need to loop backwards through the parents I'm not sure how this would be done in a efficent and good way.
/Arceus