Create albums and photos gallery like Facebook using C# and VB.Net in ASP.Net

Hi IamAzhar,

Refer below sample.

HTML

<asp:TextBox ID="txtId" runat="server"></asp:TextBox>
<asp:Button Text="Search" runat="server" OnClick="Search" />
<br />
<br />
<asp:Repeater ID="rptImages" runat="server">
    <ItemTemplate>
        <div style="border: 1px solid #ccc; text-align: center;">
            <asp:ImageButton ID="ImageButton1" ImageUrl='<%# Eval("ImageUrl") %>' runat="server"
                CommandArgument='<%# Eval("Id") %>' OnClick="FilterAllImages" />
        </div>
    </ItemTemplate>
</asp:Repeater>
<br />
<asp:DataList ID="dlAlbums" runat="server" RepeatColumns="2">
    <ItemTemplate>
        <div style="border: 1px solid #ccc; text-align: center;">
            <img src='<%# Eval("ImageUrl") %>' alt="Alternate Text" />
        </div>
    </ItemTemplate>
</asp:DataList>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

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

protected void Search(object sender, EventArgs e)
{
    DataTable dt = GetThumbnailImages();
    DataTable dtFilter = dt.Select("Id = '" + txtId.Text + "'").Length > 0 ? dt.Select("Id = '" + txtId.Text + "'").CopyToDataTable() : dt.Clone();
    rptImages.DataSource = dtFilter;
    rptImages.DataBind();
    rptImages.Visible = true;
    dlAlbums.Visible = false;
}

protected void FilterAllImages(object sender, EventArgs e)
{
    ImageButton img = sender as ImageButton;
    string id = img.CommandArgument;
    DataTable dt = GetImages();
    DataTable dtFilter = dt.Select("Id = " + id).CopyToDataTable();
    dlAlbums.DataSource = dtFilter;
    dlAlbums.DataBind();
    dlAlbums.Visible = true;
    rptImages.Visible = false;
}

private static DataTable GetThumbnailImages()
{
    DataTable dt = GetImages();
    dt = dt.AsEnumerable()
            .GroupBy(r => r["Id"])
            .Select(g => g.OrderBy(r => r["Id"]).First())
            .CopyToDataTable();
    return dt;
}

private static DataTable GetImages()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id", typeof(int)), new DataColumn("ImageUrl", typeof(string)) });
    dt.Rows.Add(1, "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
    dt.Rows.Add(1, "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
    dt.Rows.Add(1, "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
    dt.Rows.Add(2, "http://static.flickr.com/77/199481108_4359e6b971_s.jpg");
    dt.Rows.Add(2, "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
    dt.Rows.Add(2, "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
    return dt;
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        rptImages.DataSource = GetThumbnailImages()
        rptImages.DataBind()
    End If
End Sub

Protected Sub Search(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As DataTable = GetThumbnailImages()
    Dim dtFilter As DataTable = If(dt.Select("Id = '" & txtId.Text & "'").Length > 0, dt.[Select]("Id = '" & txtId.Text & "'").CopyToDataTable(), dt.Clone())
    rptImages.DataSource = dtFilter
    rptImages.DataBind()
    rptImages.Visible = True
    dlAlbums.Visible = False
End Sub

Protected Sub FilterAllImages(ByVal sender As Object, ByVal e As EventArgs)
    Dim img As ImageButton = TryCast(sender, ImageButton)
    Dim id As String = img.CommandArgument
    Dim dt As DataTable = GetImages()
    Dim dtFilter As DataTable = dt.Select("Id = " & id).CopyToDataTable()
    dlAlbums.DataSource = dtFilter
    dlAlbums.DataBind()
    dlAlbums.Visible = True
    rptImages.Visible = False
End Sub

Private Shared Function GetThumbnailImages() As DataTable
    Dim dt As DataTable = GetImages()
    dt = dt.AsEnumerable().GroupBy(Function(r) r("Id")).Select(Function(g) g.OrderBy(Function(r) r("Id")).First()).CopyToDataTable()
    Return dt
End Function

Private Shared Function GetImages() As DataTable
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("Id", GetType(Integer)), New DataColumn("ImageUrl", GetType(String))})
    dt.Rows.Add(1, "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg")
    dt.Rows.Add(1, "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg")
    dt.Rows.Add(1, "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg")
    dt.Rows.Add(2, "http://static.flickr.com/77/199481108_4359e6b971_s.jpg")
    dt.Rows.Add(2, "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg")
    dt.Rows.Add(2, "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg")
    Return dt
End Function

Screenshot