Display multiple photos (images) in ASP.Net DataList column using C# and VB.Net

Hi ashish007,

For Image column you need to add another DataList control.

Check this example. Now please take its reference and correct your code.

Bind the record from database. I have used dynamic DataTable for binding.

HTML

<asp:DataList ID="Datalistpost" runat="server" BorderWidth="1px" RepeatLayout="Table">
    <ItemStyle CssClass="grid1" />
    <ItemTemplate>
        <table>
            <tr>
                <td style="width: 50px">
                    <asp:Label Text='<%# Eval("Id") %>' runat="server" />
                </td>
                <td class="style11">
                    <asp:Label ID="lablepost" runat="server" Text='<%# Eval("Name") %>' Font-Names="Verdana" Font-Size="10pt" ForeColor="Black"></asp:Label><br />
                    <asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="2">
                        <ItemStyle CssClass="grid1" />
                        <ItemTemplate>
                            <asp:Image ID="IMUSERPHOTO" runat="server" ImageUrl='<%#Eval("image_url") %>' Width="100px" Height="100px" />
                        </ItemTemplate>
                    </asp:DataList>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        show_post();
    }
}

private void show_post()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[]
    {
        new DataColumn("Id"),
        new DataColumn("Name")
    });
    dt.Rows.Add(1, "Post 1");
    dt.Rows.Add(2, "Post 2");
    Datalistpost.DataSource = dt;
    Datalistpost.DataBind();
    foreach (DataListItem item in Datalistpost.Items)
    {
        DataList imageDL = item.FindControl("dlImages") as DataList;
        imageDL.DataSource = GetImages();
        imageDL.DataBind();
    }
}

private DataTable GetImages()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[]
    {
        new DataColumn("image_url")
    });
    dt.Rows.Add("Images/02.jpg");
    dt.Rows.Add("Images/08.jpg");
    dt.Rows.Add("Images/11.jpg");
    dt.Rows.Add("Images/12.jpg");

    return dt;
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        show_post()
    End If
End Sub

Private Sub show_post()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Name")})
    dt.Rows.Add(1, "Post 1")
    dt.Rows.Add(2, "Post 2")
    Datalistpost.DataSource = dt
    Datalistpost.DataBind()

    For Each item As DataListItem In Datalistpost.Items
        Dim imageDL As DataList = TryCast(item.FindControl("dlImages"), DataList)
        imageDL.DataSource = GetImages()
        imageDL.DataBind()
    Next
End Sub

Private Function GetImages() As DataTable
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("image_url")})
    dt.Rows.Add("Images/02.jpg")
    dt.Rows.Add("Images/08.jpg")
    dt.Rows.Add("Images/11.jpg")
    dt.Rows.Add("Images/12.jpg")
    Return dt
End Function

Screenshot

Filter the records using the Id and bind in DataList.

Refer below code.

private void show_post()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[]
    {
        new DataColumn("Id"),
        new DataColumn("Name")
    });
    dt.Rows.Add(1, "Post 1");
    dt.Rows.Add(2, "Post 2");
    Datalistpost.DataSource = dt;
    Datalistpost.DataBind();
    foreach (DataListItem item in Datalistpost.Items)
    {
        Label lblId = item.FindControl("lblId") as Label;
        DataList imageDL = item.FindControl("dlImages") as DataList;
        imageDL.DataSource = GetImages(Convert.ToInt32(lblId.Text));
        imageDL.DataBind();
    }
}

private DataTable GetImages(int id)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT ph_name FROM photo WHERE postid = @Id";
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            cmd.Parameters.AddWithValue("@Id", id);
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}