locked
Display a Number of Different Photo Galleries on One ASPX Page RRS feed

  • Question

  • User-1286266314 posted

    Hi, 

    Below are 2 tables in my SQL Server Database:

    Groups

    Group_Id

    Group_Name

    Group_Description

    SlideShowTable

    ID

    filename

    imageDesc

    groupName

    I can display all the images in a gallery using the following code:

      <asp:DataList ID="dlImages" runat="server" DataKeyField="ID" DataSourceID="SqlDataSource2" RepeatDirecton="Horizontal" RepeatColumns="3" CellPadding="5">
                                                    <ItemTemplate>
                                                        <a id="imageLink" href='<%# Eval("filename","~/SlideImages/{0}") %>' title='<%#Eval("imageDesc") %>' rel="lightbox[Brussels]" runat="server">
                                                            <asp:Image ID="Image1" ImageUrl='<%# Bind("filename", "~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
                                                        </a>
                                                    </ItemTemplate>
      </asp:DataList>
      <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:BallinoraDBConnectionString1 %>" SelectCommand="SELECT * FROM [SlideShowTable]"></asp:SqlDataSource>

    However, I would instead, like to display a separate gallery for each group. Above, I have a DataList for all the images, but I would like a separate DataList for each row in the Groups table. I have tried wrapping a Repeater control around the above code, but that doesn't seem to be working.

    Would anyone have any suggestions on how to move forward?

    Thanks a lot in advance!

    Thursday, January 5, 2017 9:00 PM

All replies

  • User-707554951 posted

    Hi damosull

    I would instead, like to display a separate gallery for each group

    For your problem above, I suggest you could try to use the Nested DataList.

    The below code is for your reference.

    <asp:DataList ID="DataLis1" runat="server" DataSourceID="SqlDataSource2" OnItemDataBound="DataList1_ItemDataBound">
    <ItemTemplate>
    <asp:Label ID="lblCategory" runat="server" Text='<%# Eval("Group_Name") %>'></asp:Label>
    <asp:DataList ID="DataList2" runat="server" Width="197px">
    <ItemTemplate>
    <a id="imageLink" href='<%# Eval("filename","~/SlideImages/{0}") %>' title='<%#Eval("imageDesc") %>' rel="lightbox[Brussels]" runat="server">
    <asp:Image ID="Image1" ImageUrl='<%# Bind("filename", "~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
    </a>
    </ItemTemplate>
    </asp:DataList>
    </ItemTemplate>
    </asp:DataList>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:BallinoraDBConnectionString1 %>" SelectCommand="SELECT Group_Name FROM [Groups]"></asp:SqlDataSource>

    CodeBehind:

    NorthwindDataContext ctx = new NorthwindDataContext();
    
    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
    DataList DataList2 = e.Item.FindControl("DataList2") as DataList;
    string Group_Name = (e.Item.FindControl("lblCategory") as Label).Text;
    var c = ctx.Groups.Where(x => x.Group_Name == Group_Name);
    DataList2.DataSource = c;
    DataList2.DataBind();
    }
    }

    Best Regards

    Cathy

    Monday, January 9, 2017 6:03 AM
  • User-1716253493 posted

    From your code, i add a label (or hiddenfield), modify sqldatasource selectcommand, adding parameter to filter the data based group_name like this

      <asp:Label ID="LabelGroup" runat="server" Text="Group1"></asp:Label>
      <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
    ConnectionString="<%$ ConnectionStrings:BallinoraDBConnectionString1 %>"
    SelectCommand="SELECT * FROM [SlideShowTable] WHERE Group_Name=@group_name"> <SelectParameters> <asp:ControlParameter ControlID="LabelGroup" Name="group_name" PropertyName="Text" /> </SelectParameters> </asp:SqlDataSource>

    You will get the data if you set LabelGroup text to specific group_name for example "Group1"

    Now, simply add repeater that show group_name only then move the datalist, label and sqldatasource2 into repeater itemtemplate

    Because DataList filtered by LabelGroup text, then bind the LabelGroup text to repeater data.

    <asp:Label ID="LabelGroup" runat="server" Text='<%# Bind("Group_Name") %>'></asp:Label>

    The repeater like this

            <asp:Repeater ID="RepeaterGroupList" runat="server" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <asp:DataList ID="DataLis1" runat="server" DataSourceID="SqlDataSource2" OnItemDataBound="DataList1_ItemDataBound">
                        <ItemTemplate>
                            <asp:DataList ID="DataList2" runat="server" Width="197px">
                                <ItemTemplate>
                                    <a id="imageLink" href='<%# Eval("filename","~/SlideImages/{0}") %>' title='<%#Eval("imageDesc") %>' rel="lightbox[Brussels]" runat="server">
                                        <asp:Image ID="Image1" ImageUrl='<%# Bind("filename", "~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
                                    </a>
                                </ItemTemplate>
                            </asp:DataList>
                            <asp:Label ID="LabelGroup" runat="server" Text='<%# Bind("Group_Name") %>'></asp:Label>
                            <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                                ConnectionString="<%$ ConnectionStrings:BallinoraDBConnectionString1 %>"
                                SelectCommand="SELECT * FROM [SlideShowTable] WHERE Group_Name=@group_name">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="LabelGroup" Name="group_name" PropertyName="Text" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                        </ItemTemplate>
                    </asp:DataList>
                </ItemTemplate>
            </asp:Repeater>

    Run it, you should get image galery grouped by group_name.

    Monday, January 9, 2017 8:03 AM