Display each group record in single row inside ASP.Net Repeater using C# and VB.Net

Hi Sofia,

Please refer below Sample.

Without scrolling it won't be possible to show Output as record increases dynamically, but if you want you can apply paging to the Repeater for display records without scrolling.

HTML

Default

<table>
    <tr>
        <td colspan="2"><asp:FileUpload runat="server" ID="fuUserImage" /></td>
    </tr>
    <tr>
        <td>User Name:</td>
        <td><asp:TextBox runat="server" ID="txtName" /></td>
    </tr>
    <tr>
        <td>Designation:</td>
        <td><asp:TextBox runat="server" ID="txtDesignation" /></td>
    </tr>
    <tr>
        <td><asp:Button Text="Save" ID="btnSave" runat="server" OnClick="Save" /></td>
    </tr>
</table>
<hr />
<asp:GridView runat="server" ID="gvUsers" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img src="<%# Eval("Image") %>" height="100" width="100" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="UserName" HeaderText="UserName" />
        <asp:BoundField DataField="Designation" HeaderText="Designation" />
    </Columns>
</asp:GridView>
<hr />
<asp:Button Text="Send" ID="btnSend" runat="server" OnClick="Send" />

Home

<asp:Repeater runat="server" ID="rptLogos" OnItemDataBound="OnItemDataBound">
    <ItemTemplate>
        <table>
            <tr>
                <td colspan="2" valign="top">
                    <asp:Image ID="imgLogo" runat="server" ImageUrl='<%# Eval("Image") %>' Height="100" Width="100" /></td>
                <td><asp:Repeater runat="server" ID="rptUsers">
                        <ItemTemplate>
                            <table>
                                <tr>
                                    <td><asp:Label runat="server" Text='<%# Eval("UserName") %>'></asp:Label></td>
                                </tr>
                                <tr>
                                    <td><asp:Label runat="server" Text='<%# Eval("Designation") %>'></asp:Label></td>
                                </tr>
                            </table>
                            <br />
                        </ItemTemplate>
                    </asp:Repeater>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:Repeater>

Namespaces

C#

using System.Data;
using System.IO;

VB.Net

Imports System.Data
Imports System.IO

Code

C#

Default

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[]
        {
            new DataColumn("UserName"),
            new DataColumn("Designation"),
            new DataColumn("Image")
        });
        ViewState["Users"] = dt;
        this.BindGrid();
    }
}

protected void Save(object sender, EventArgs e)
{
    if (!Directory.Exists(Server.MapPath("~/Images")))
    {
        Directory.CreateDirectory(Server.MapPath("~/Images"));
    }
    string filePath = "Images/" + Path.GetFileName(fuUserImage.PostedFile.FileName);
    fuUserImage.SaveAs(Server.MapPath("~/" + filePath));
    DataTable dt = (DataTable)ViewState["Users"];
    dt.Rows.Add(txtName.Text.Trim(), txtDesignation.Text.Trim(), filePath);
    ViewState["Users"] = dt;
    BindGrid();
    txtName.Text = string.Empty;
    txtDesignation.Text = string.Empty;
}

protected void Send(object sender, EventArgs e)
{
    Session["Users"] = ViewState["Users"];
    Response.Redirect("~/Home.aspx");
}

protected void BindGrid()
{
    gvUsers.DataSource = (DataTable)ViewState["Users"];
    gvUsers.DataBind();
}

Home

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["Users"] != null)
    {
        DataTable dt = (DataTable)Session["Users"];
        List<object> logo = dt.AsEnumerable().Select(x => x["Image"]).Distinct().ToList();
        DataTable dtLogos = new DataTable();
        dtLogos.Columns.Add("Image");
        foreach (var item in logo)
        {
            dtLogos.Rows.Add(item);
        }
        rptLogos.DataSource = dtLogos;
        rptLogos.DataBind();
    }
}

protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataTable dt = (DataTable)Session["Users"];
        Image imgUrl = e.Item.FindControl("imgLogo") as Image;
        Repeater rptUsers = e.Item.FindControl("rptUsers") as Repeater;
        string logoName = imgUrl.ImageUrl;
        DataRow[] rows = dt.Select("Image='" + logoName + "'");
        if (rows.Length > 0)
        {
            rptUsers.DataSource = rows.CopyToDataTable();
            rptUsers.DataBind();
        }
    }
}

VB.Net

Default

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("UserName"), New DataColumn("Designation"), New DataColumn("Image")})
        ViewState("Users") = dt
        Me.BindGrid()
    End If
End Sub

Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
    If Not Directory.Exists(Server.MapPath("~/Images")) Then
        Directory.CreateDirectory(Server.MapPath("~/Images"))
    End If
    Dim filePath As String = "Images/" & Path.GetFileName(fuUserImage.PostedFile.FileName)
    fuUserImage.SaveAs(Server.MapPath("~/" & filePath))
    Dim dt As DataTable = CType(ViewState("Users"), DataTable)
    dt.Rows.Add(txtName.Text.Trim(), txtDesignation.Text.Trim(), filePath)
    ViewState("Users") = dt
    BindGrid()
    txtName.Text = String.Empty
    txtDesignation.Text = String.Empty
End Sub

Protected Sub Send(ByVal sender As Object, ByVal e As EventArgs)
    Session("Users") = ViewState("Users")
    Response.Redirect("~/HomeVB.aspx")
End Sub

Protected Sub BindGrid()
    gvUsers.DataSource = CType(ViewState("Users"), DataTable)
    gvUsers.DataBind()
End Sub

Home

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Session("Users") IsNot Nothing Then
        Dim dt As DataTable = CType(Session("Users"), DataTable)
        Dim logo As List(Of Object) = dt.AsEnumerable().[Select](Function(x) x("Image")).Distinct().ToList()
        Dim dtLogos As DataTable = New DataTable()
        dtLogos.Columns.Add("Image")

        For Each item In logo
            dtLogos.Rows.Add(item)
        Next

        rptLogos.DataSource = dtLogos
        rptLogos.DataBind()
    End If
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim dt As DataTable = CType(Session("Users"), DataTable)
        Dim imgUrl As Image = TryCast(e.Item.FindControl("imgLogo"), Image)
        Dim rptUsers As Repeater = TryCast(e.Item.FindControl("rptUsers"), Repeater)
        Dim logoName As String = imgUrl.ImageUrl
        Dim rows As DataRow() = dt.[Select]("Image='" & logoName & "'")

        If rows.Length > 0 Then
            rptUsers.DataSource = rows.CopyToDataTable()
            rptUsers.DataBind()
        End If
    End If
End Sub

Screenshot