How to display treeview structure for database data in MVC4

Question

i am trying to display treeview structure for maintower and subtower (subtower has to be displayed under maintower) in mvc4. I used the below code in View. It displays structure like,

maintower1
    subtower1
maintower1
    subtower2

but, i want to display like

maintower1
    subtower1
    subtower2

Can anyone help me please?

 @foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
    <div id="treeview">
     @if( maintower  != @Html.Encode(dr[0]))
     {
         maintower = @Html.Encode(dr[0]);

        <ul>
            <li>@Html.Encode(dr[0])
                <ul>

                     @foreach (System.Data.DataRow drow in ViewBag.treedata.Rows)
                     {
                       if( maintower == @Html.Encode(drow [0]))
                        {
                         <a href="~/Home/Index"><li> @Html.Encode(drow [1]) </li></a>
                        }
                     }

                </ul>
            </li>
        </ul>
      }
 </div>
}

Aravindan · Accepted Answer · 2014-12-17 09:59:35Z

1

Before doing the following steps please make sure your ViewBag.treedata is in order by its column 0 (Order by ViewBag.treedata.Column[0])

 <body style="font-family : Arial; ">
   @{
     var name = "";
    }

    @foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
    {
        <div id="treeview">
         if( name  != @Html.Encode(dr[0]))
         {
             name = @Html.Encode(dr[0]);

            <ul>
                <li>@Html.Encode(dr[0])
                    <ul>

                         @foreach (System.Data.DataRow drow in ViewBag.treedata.Rows)
                         {
                           if( name == @Html.Encode(drow [0])
                            {
                              <li>@Html.Encode(drow [1])</li> 
                            }
                         }

                    </ul>
                </li>
            </ul>
          }
     </div>
    }
</body>

answered Dec 17, 2014 at 9:59

Aravindan

8556 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3793029 Over a year ago

One more help pls, for every subtower, i have to crates link in such a way that if i clik subtower1, it has to navigate to corresponding page and the same for other subtowers too. If i used <a href=' '> @Html.Encode(drow[1]), obviously the same page is displaying for all subtowers. can you please guide me that how to do it?

Aravindan Over a year ago

Please give me the full code that you used in <a href=' '> for a link i need to know how did it looks like when you loaded in browser.

Aravindan Over a year ago

You have mentioned the URl as "~/Home/Index" in <a href=""> tag, so it will definitely goes to the in index controller only, then it will automatically return to View in Index action method, you have to pass the URl from the ViewBag.treedata for each row in it. Then can able to pass the url as <a href="@Html.Encode(drow [112])">. drow[112] is an example column index.

Marcin · Accepted Answer · 2014-12-17 08:31:50Z

0

You must use two loops one for maintower and one for subtower

Or something like that

@{var previousMainTower = String.Empty;
  var closePreviousTag = false;}
<div id="treeview">
    <ul>
    @foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
    {

       @if(previousMainTower != dr[0])
       {
            if(closePreviousTag)
            {
                </ul>
                </li>
            }
            <li>@Html.Encode(dr[0])
            <ul>
                <li>@Html.Encode(dr[1])</li> 
            @closePreviousTag = false;  
       }
       else
       {
            <li>@Html.Encode(dr[1])</li> 
            @closePreviousTag   = true;
       }
       @previousMainTower = dr[0]
    }
    </ul>
</div>

It's not a fully working code it's shows how you should figured it out.

In short you must check in each step of the loop if the current 'maintower' is the same as in previous steap and if it's equal then do not create it.

edited Dec 17, 2014 at 8:31

answered Dec 17, 2014 at 8:22

Marcin

8311 gold badge12 silver badges20 bronze badges

2 Comments

user3793029 Over a year ago

Hi,Thank you for the update. But,I have already tried by using two loop, one for maintower and another one for subtower that is resulted as for every maintower, it shows all the subtower. But i want to display subtower equals to maintower only has to be display

Marcin Over a year ago

If you want to use two loops in the second one (nested loop) you must check name of the maintower and adds subtower only if names are equals.

Collectives™ on Stack Overflow

How to display treeview structure for database data in MVC4

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related