ajaxtreeviewasplinkbutton

How To Convert AJAX Treeview To Linkbuttons?


I need some advice regarding conversion of an AJAX TreeView control to a LinkButton. Why? To make the ASP.NET page lighter. Currently, when the Nodes of the TreeView is selected, records related to that node are displayed in a grid. This implementation makes the page heavy. So we decided to changed this to LinkButtons.

I just want know what are the things I need to do, consider, or is this a good idea? Honestly, whether this is a good or bad idea, I still need to do this.

My initial understanding is that this will turn out like a list ex: bullet list.


Solution

  • The following answer is based on your comment and builds on the answer provided in your other question.

    The following example uses a ListView instead of a Repeater. ListViews are great because they'll give you much more flexibility over a Repeater. Moreover, as you can see in the sample code below, binding the nested/child ListView and binding the nested/grandchild ListView can all be done declaratively without any code-behind.

    Example of what the following code will produce

    enter image description here

    ASPX

    <asp:ListView runat="server" ID="lvw">
        <LayoutTemplate>
            <ul>
                <li id="itemPlaceholder" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
            <li>    
                <asp:LinkButton runat="server" CommandArgument='<%# Eval("Name")%>'><%# Eval("Name")%></asp:LinkButton>
                <asp:ListView runat="server" ID="lvw2" DataSource='<%# Eval("Children")%>'>
                    <LayoutTemplate>
                        <ul>
                            <li id="itemPlaceholder" runat="server" />
                        </ul>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li><asp:LinkButton runat="server" CommandArgument='<%# Eval("Name")%>'><%# Eval("Name")%></asp:LinkButton>
                            <asp:ListView runat="server" ID="lvw3" DataSource='<%# Eval("Children")%>'>
                                <LayoutTemplate>
                                    <ul>
                                        <li id="itemPlaceholder" runat="server" />
                                    </ul>
                                </LayoutTemplate>
                                <ItemTemplate>
                                    <li><asp:LinkButton runat="server" CommandArgument='<%# Eval("Name")%>'><%# Eval("Name")%></asp:LinkButton></li>
                                </ItemTemplate>
                            </asp:ListView>
                        </li>
                    </ItemTemplate>
                </asp:ListView>
            </li>
        </ItemTemplate>
    </asp:ListView>
    

    C#

    lvw.DataSource = personList;
    lvw.DataBind();
    

    As you can see, in the C# code, I've created a list of "Person" as follows. Each Person object has a list of child Person objects and aach child Person object has a list of child Person objects. By creating your objects in this manner, binding the ListView is really as simple as I've shown. Use the Person object below to run a quick sample so you can see for yourself.

    Person object

    public class Person
    {
        public string name { get; set; }
        public List<Person> Children { get; set; }
    }
    

    For your test, you can create a Page_Load method as follows:

    protected void Page_Load(object sender, EventArgs e)
        {
            List<Person> personList = new List<Person>();
            Person person1 = new Person() { name = "Child 1" };
            Person person2 = new Person() { name = "Child 2" };
            List<Person> childPersonList1 = new List<Person>();
            childPersonList1.Add(person1);
            childPersonList1.Add(person2);
            Person person3 = new Person() { name = "Person 1" };
            person3.Children = childPersonList1;
            personList.Add(person3);
            Person person4 = new Person() { name = "Child 3" };
            Person person10 = new Person() { name = "Grandchild 1" };
            Person person11 = new Person() { name = "Grandchild 2" };
            Person person12 = new Person() { name = "Grandchild 3" };
            List<Person> grandchildPersonList1 = new List<Person>();
            grandchildPersonList1.Add(person10);
            grandchildPersonList1.Add(person11);
            grandchildPersonList1.Add(person12);
            person4.Children = grandchildPersonList1;
            Person person5 = new Person() { name = "Child 4" };
            List<Person> childPersonList2 = new List<Person>();
            childPersonList2.Add(person4);
            childPersonList2.Add(person5);
            Person person6 = new Person() { name = "Person 2" };
            person6.Children = childPersonList2;
            personList.Add(person6);
            Person person7 = new Person() { name = "Child 5" };
            Person person8 = new Person() { name = "Child 6" };
            List<Person> childPersonList3 = new List<Person>();
            childPersonList3.Add(person7);
            childPersonList3.Add(person8);
            Person person9 = new Person() { name = "Person 3" };
            person9.Children = childPersonList3;
            personList.Add(person9);
    
            lvw.DataSource = personList;
            lvw.DataBind();
        }
    

    See the following StackOverflow question to learn more about the differences between a Repeater and a ListView: Repeater, ListView, DataList, DataGrid, GridView ... Which to choose?