Creating dynamic repeater in asp.net

Question

Hi I am building an online sports goods shop,
I have this plan of loading in all Sports Type in the Home page, like Football,Cricket,Basketball etc
And the administrator can create a game at his own will,

Here's the confusion
How do I display the SubCategories of each Game if clicked (inside the repeater).
I thought of adding an ImageButton to it!! But then how do I link that Image Button to the games, i.e. when the user clicks the respective Image button -> The subcategories of that game should be displayed

For example:
1. If I have games such as Cricket,Football etc.
2. The Repeater should show all the games in the repeater
3. When The User clicks on for instance Cricket
4. I wish to load all subcategories of cricket goods such as the BAT,BALL,STUMPS etc.

I attempted this by loading the games in Repeater as shown in below code snippet:

       <asp:Repeater ID="RepDetails" runat="server" 
        ondatabinding="RepDetails_DataBinding">
        <HeaderTemplate>
            <table style="border: 1px solid #df5015; width: 500px" cellpadding="0">
                <tr style="background-color: #df5015; color: White">
                    <td colspan="2">
                        <b>Type of Sports</b>
                    </td>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style="background-color: #EBEFF0">
                <td>
                    <table style="background-color: #EBEFF0; border-top: 1px dotted #df5015; width: 500px">
                        <tr>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Category") %>' Font-Bold="true" />
                            </td>
                            <td>
                                <asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton2_Click" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

I've even added the ImageButton but confused about making it load the respective subcategories of that game!

Suggestions are welcome if there can be another work around which can be more effective..

Answer 1

You could try a nested repeater

In aspx

<asp:Repeater ID="RepDetails" runat="server" OnDataBinding="RepDetails_DataBinding">
    <HeaderTemplate>
        <table style="border: 1px solid #df5015; width: 500px" cellpadding="0">
            <tr style="background-color: #df5015; color: White">
                <td colspan="2">
                    <b>Type of Sports</b>
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr style="background-color: #EBEFF0">
            <td>
                <table style="background-color: #EBEFF0; border-top: 1px dotted #df5015; width: 500px">
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>' />
                        </td>
                        <td>
                            <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Category") %>' Font-Bold="true" />
                        </td>
                        <td>
                            <asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton2_Click" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <asp:Repeater ID="SportsProps" runat="server">
            <ItemTemplate>
                <tr style="background-color: #EBEFF0">
                    <td>
                        <table style="background-color: #EBEFF0; border-top: 1px dotted #df5015; width: 500px">
                            <tr>
                                <td>
                                    <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Name") %>' Font-Bold="true" />
                                </td>
                                <td>
                                    <asp:ImageButton ID="ImageButton3" runat="server" OnClick="ImageButton3_Click" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

In code behind

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RepDetails.DataSource = GetData();
            RepDetails.DataBind();
        }
    }

    protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
    {
        Repeater repeater = ((ImageButton)sender).NamingContainer.FindControl("SportsProps") as Repeater;
        Label catLabel = ((ImageButton)sender).NamingContainer.FindControl("lblSubject") as Label;
        repeater.DataSource = GetDataDetail(catLabel.Text);
        repeater.DataBind();
    }

    protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
    {
        //do something to hide the 
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id", typeof(string));
        dt.Columns.Add("category", typeof(string));
        dt.Rows.Add("1 ", "Basketball");
        dt.Rows.Add("2 ", "Football");
        dt.Rows.Add("3 ", "Soccer");
        return dt;
    }

    private DataTable GetDataDetail(string category)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("name", typeof(string));
        dt.Rows.Add("Bat");
        dt.Rows.Add("Ball");
        dt.Rows.Add("Stump");
        return dt;
    }