How can I populate an unordered list for the jQuery treeview from SQL query?

Question

I'm totally new in ASP.NET so I think it's an easy question I have. In my application I try to use jQuery treeview, in Default page I have the following code:

<script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script src="jquery.treeview.js" type="text/javascript"></script>

            <script type="text/javascript">
                    $(document).ready(function () {
                            $("#example").treeview({
                                    persist: "location",
                                    collapsed: true,
                                    animated: "medium"
                            });

                    });
            </script>

I need to populate the tree, and so I use the following example:

<ul id="example" runat="server" class="filetree">
         <li><span class="folder">Folder 1</span>
                 <ul>
                       <li><span class="file">Item 1.1</span></li>
                 </ul>
         </li>
         <li><span class="folder">Folder 2</span>
                  <ul>
                        <li><span class="folder">Subfolder 2.1</span>
                               <ul>
                                  <li><span class="file">File 2.1.1</span></li>
                                  <li><span class="file">File 2.1.2</span></li>
                               </ul>
                        </li>
                        <li><span class="file">File 2.2</span></li>
                 </ul>
         </li>
         <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                 <ul>
                        <li><span class="file">File 3.1</span></li>
                 </ul>
         </li>
         <li><span class="file">File 4</span></li>
</ul>

Problem is I get the data for the treeview from my database by using an SQL query.

So my question is how do I populate this unordered list with my data? Thanks a lot in advance!

Hallaghan · Accepted Answer · 2011-09-15 09:55:46Z

1

EDIT: This is a way to pass your strongly typed object to your view.

Create a method to load your list and add it to your Session so you can call this method on every postback to make sure your list remains in Session, like so:

private void LoadMyListToSession()
{
          DataContext ctx = New DataContext(); // instantiate your datacontext if you haven't done so before
          List<Object> ObjectList = ctx.MyDataTable().ToList(); // load your list
          Page.Session.Add("MyVariableName", ObjectList); // add your list to the session
}

Execute a similar code on your page_load event or any other method you want to make sure your list remains in Session, like so:

private void Page_Load(object sender, System.EventArgs e) {
    LoadMyListToSession();
}

Pass your View a strongly typed object, such as a List of the class you use to store the items in your database and iterate through it to create your <ul> dynamically.

For example, consider ObjectList to be your strongly typed List:

<% List<Object> ObjectList = (List<Object>) Session["ObjectList"]; &>

<% if(ObjectList != null && ObjectList.Count > 0){ %>
   <ul>
   <% foreach(Object item in ObjectList)
   { %>
       <li><%= item.Name; %></li>
<% } %>
  </ul>
<% } %>

As you can see in the example above, if ObjectList is a List of items that you load from the database, you can iterate through it and in each iteration create a <li> with whatever property from the item of your iteration you desire. Remember that you need to load your object from the Session as shown above!

If you still got questions, please ask.

edited Sep 15, 2011 at 9:55

answered Aug 31, 2011 at 13:45

Hallaghan

1,9516 gold badges32 silver badges49 bronze badges

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

11 Comments

tube-builder Over a year ago

Thanks a lot for your answer! I will try to follow your advice!

Hallaghan Over a year ago

What version of ASP.NET are you working with? Is it a webforms application?

tube-builder Over a year ago

Yes, it's a webform, ASP.Net version 4.0. One stupid question - how exactly do I pass the list of data to my View after filling it on the server side?

Hallaghan Over a year ago

ASP.NET is popular here but Webforms isn't loved around here, that's a fact. I used to work with Webforms in the past before ASP.NET MVC showed up. I suggest you look it up. It's much easier to separate business logic from the view. One of the main differences is that you lose the codebehind file for the views and instead gain a controller file. The controller gets data to be rendered in your view or applies actions to it. I'm sure you will like MVC more and find it easier to understand and work with ;)

Hallaghan Over a year ago

So you are losing your objects when you postback the page? That is happening because we are storing the object inside a Session object, which means that it is only valid for 1 post. When you postback, if you don't want to lose your list, you have to re-add it. Why don't you create a method e.g. called FillListToSession and then you add the list to the session object on every postback of your page? That should do the trick. I will edit my answer to show you how it's done.

|

Collectives™ on Stack Overflow

How can I populate an unordered list for the jQuery treeview from SQL query?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related