Display data in Nested repeater control & how to pass value parentID from Parent Repeater to Child Repeater using asp.net

Question

I have to display photo gallery as show in the image. I store information for photo gallery in 4 different tables. i need to show on main page CategoryName and Albums along with their respected Icon and link them to a AlbumCategoryPage.aspx.

In order to achieve this i am using nested repeater control.

Parent Repeater will show Category Image (as show in red color) and then show Top 4 albums in the same category and so in.

So far i have done it like this

            <asp:Repeater ID="rptAlbumCategory" runat="server" OnItemDataBound="rptAlbumCategory_ItemBound">
                <ItemTemplate>
                        <!-- Repeated data -->
                        <div class="AlbumRowWrapper">
                            <div id="dAlbumCategory" class="AlbumCategoryIcon">
                                <asp:Image ID="Image1" ImageUrl='<%# getImagePath(Eval("CategoryImage")) %>' runat="server" />
                            </div>
                        </div>
                        <asp:Repeater ID="rptAlbums" runat="server" >
                            <ItemTemplate>
                                <!-- Nested repeated data -->
                            </ItemTemplate>
                        </asp:Repeater>
                    </ItemTemplate>
            </asp:Repeater>

Code Behind

On Page Load

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {     //Get Gallery
            DataSet dsAlbumCat = new DataSet();
            string strSql = "SELECT * FROM AlbumCategory)";
            dsAlbumCat = DataProvider.Connect_Select(strSql);
            rptAlbumCategory.DataSource = dsAlbumCat;
            rptAlbumCategory.DataBind();
}
}

protected void rptAlbumCategory_ItemBound(Object Sender, RepeaterItemEventArgs e)
{

if (e.Item.ItemType == ListItemType.Item)
{
    Repeater childRepeater = (Repeater)e.Item.FindControl("rptAlbumCategory");
   // childRepeater.DataSource = getAlbums();
   // childRepeater.DataBind();
}

}

protected void getAlbums()
{
    DataSet dsAlbums = new DataSet();
    string strSql = "SELECT * FROM AlbumName WHERE CategoryID = " + CategoryID + ")";
    dsAlbums = DataProvider.Connect_Select(strSql);
    rptAlbums.DataSource = dsAlbums;
    rptAlbums.DataBind();
}

protected String getImagePath(object img)
{
    string url;
    url = "~/Images/gallery/" + img;

    return url;
}

With this code i am able to get the following result.

I am not sure how i can pass the CategoryID from the parent repeater to Child repeater so that it will show me the related albums.

I am using nested repeater for first time & find it confusing as i cant find complete example related to my scenario

Table structure

TABLE AlbumCategory
CategoryID
CategoryName
CategoryImageIcon
CategoryVisible
LanguageID

TABLE AlbumName
AlbumID
AlbumName
AlbumDescription
AlbumImageIcon
CategoryID
LanguageID

I would appreciate help in this regard even best approach to accomplish the same design as show in first image

Answer 1

Try this

    Dim ds As DataSet = getCategoriesAndName()
    ds.Relations.Add("relation_category", ds.Tables(0).Columns("CategoryID"), ds.Tables(1).Columns("CategoryID"))
    rptAlbumCategory.DataSource = ds
    rptAlbumCategory.DataBind()

getCategoriesAndName() will return dataset having two datatables(categories and names). Then on

 Protected Sub rptAlbumCategory_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptAlbumCategory.ItemDataBound
   Dim rptrAlbums As Repeater = TryCast(e.Item.FindControl("rptrAlbums"), Repeater)
   rptrAlbums.DataSource = TryCast(e.Item.DataItem, DataRowView).CreateChildView("relation_category")
   ' Bind the child repeater  
   rptrAlbums.DataBind()
 End Sub

I think this is easier :-)