How To Create A Nested LinkButtons Inside A Repeater?

Question

I need to create a nested linkbuttons in a asp.net page that looks like a treeview, but all are linkbuttons. Example is shown below:

ParentLinkButton1
    ChildLinkButton1
    ChildLinkButton2
    ChildLinkButton3
ParentLinkButton2
    ChildLinkButton1
    ChildLinkButton2
ParentLinkButton3
ParentLinkButton4
    ChildLinkButton1

I really don't know how to do this. Based on my research this can be done using repeated control but I don't know how to do that... Please if you can teach me step by step...

Thanks in advance!

Answer 1

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 can all be done declaratively without any code-behind.

Example of what the following code will produce

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></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. 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 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?