How can I bind data from nested List<> objects to nested ListView controls?

Question

So I have an asp.net web page where I display some results from an image recognition service. The results are in the form of an object of class OrpObject (the name is irrelevant), which contains a List<> of type Labels_texture. Each of these Labels_texture objects contains their own List<> of type Labels_color.

What I want to do is use a ListView to display each of the results from the Labels_texture list; and then inside each of those individual elements of the ListView, display another (nested) ListView corresponding to the elements in the nested Labels_color List<> in my OrpObject.

The main catch is that there could be a variable number of elements (or none at all) in any of these lists at any time, since they are results from an image recognition service. My main question is: how can I bind the data from the inner List<> in my OrpObject called Labels_color to the corresponding inner ListViews in my webpage, without specifying array indexes when setting the DataSource and doing the DataBind() for those inner ListViews?

Hopefully I was able to make some sense out of all that. Here are the relevant code snippets:

The OrpObject:

public class OrpObject
{
    public List<texture> Labels_texture { get; set; }

}

public class texture
{
    public string detector { get; set; }
    public string category { get; set; }
    public string matched_url { get; set; }
    public List<color> Labels_color { get; set; }
}

public class color
{
    public string category { get; set; }
    public string categoryID { get; set; }
    public string confidence { get; set; }
    public string matched_url { get; set; }
}

And here is the ListView Code from my .aspx file (trimmed down for brevity) (NOTE: I'm new to ASP.NET and I have been blindly attaching runat="server" to everything in my LayoutTemplate just in case it needs to be there. If I don't need all that, could you let me know?)

<asp:ListView ID="ListView_Orp_Results" runat="server">
     <LayoutTemplate>
        <div id="outer_result_container" runat="server">
        <div id="itemPlaceholder" runat="server">
            <div id="result_photo" runat="server">
            </div>
            <div id="result_category" runat="server">
            </div>
            <div id="result_detector" runat="server">
            </div>
        </div>
        </div>
        <div id="inner_result_container" runat="server">
            <asp:ListView ID="ListView_inner_results" runat="server">
                <LayoutTemplate>
                <div id="outer_result_container" runat="server">
                <div id="itemPlaceholder" runat="server">
                    <div id="inner_result_photo" runat="server">
                    </div>
                    <div id="inner_result_category" runat="server">
                    </div>
                    <div id="inner_result_categoryID" runat="server">
                    </div>
                </div>
                </div>
                </LayoutTemplate>
                <ItemTemplate>
                    ...
                </ItemTemplate>
                <EmptyDataTemplate>
                    ...
                </EmptyDataTemplate>
                <EmptyItemTemplate>
                    ...
                </EmptyItemTemplate>
            </asp:ListView>
        </div>
     </LayoutTemplate>
     <ItemTemplate>
        ...
     </ItemTemplate>
     <EmptyDataTemplate>
        ...
    </EmptyDataTemplate>
    <EmptyItemTemplate>
        ...
    </EmptyItemTemplate>
</asp:ListView>

Finally, here is the snippet from my code-behind file where I try to set my OrpObject and the corresponding Lists to the ListViews' DataSources:

ListView_Orp_Results.DataSource = myOrp.Labels_texture;
ListView_Orp_Results.DataBind();

foreach (texture myTexture in myOrp.Labels_texture)
{
    ListView_inner_results.DataSource = myTexture.Labels_color;
    ListView_inner_results.DataBind();
}

I know a foreach loop here probably won't work... But it's the only thing I could think of to make sure I generate a nested ListView for every texture object contained in the Labels_texture list...

Sorry for the novel, and thanks in advance for any input you might be able to offer!

Answer 1

You can bind the datasource of your inner list view to a property of the items bound to your outer listview. However, to do that the inner listview as to be in the itemtemplate of the outer listview.

See the code below and note the DataSource='<%# Eval("Labels_color") %>' attribute for the inner list view.

<asp:ListView ID="ListView_Orp_Results" runat="server" ItemPlaceholderID="itemPlaceholder">
 <LayoutTemplate>
    <div id="outer_result_container">
        <div id="itemPlaceholder" />
    </div>
 </LayoutTemplate>
 <ItemTemplate>
     <div id="result_photo">...</div>
     <div id="result_category">...</div>
     <div id="result_detector">...</div>
     <div id="inner_result_container" runat="server">
         <asp:ListView ID="ListView_inner_results" runat="server" ItemPlaceholderID="itemPlaceholder" DataSource='<%# Eval("Labels_color") %>'>
            <LayoutTemplate>
                <div id="outer_result_container" runat="server" >
                    <div id="itemPlaceholder" runat="server"> </div>
                </div>
            </LayoutTemplate>
            <ItemTemplate>
                 <div id="inner_result_photo">...
                </div>
                <div id="inner_result_category">...
                </div>
                <div id="inner_result_categoryID">...
                </div>
            </ItemTemplate>
        </asp:ListView>
    </div>
     </div>
 </ItemTemplate>
</asp:ListView>

This way you don't need to bond the nested listview from the code behind. Just bind the main listview, and all inner listview will be automatically bound to the Labels_texture property of the bound objects

About the runat="server" it is a required attribute for asp.net controls. Basically, this attribute means that asp.net will parse the tag and create a corresponding object.

Most of the time you don't need it on html elements (div, p, ...) but under some circumstance you might want it to manipulate the corresponding object in your code behind.