Create n-Column Table (RepeatColumns) in ASP.Net Repeater using C# and VB.Net

Theo: nguyenhaidang.name.vn | 06/03/2023 - 04:49

 How to bind Repeater to build grid with 4 columns and different value in each cell.

I am having grid structure in repeater with 4 columns using DataTable. In each cell I have to display image and title.

Each cell should bind with different image and title. Image is in binary format. Image should get display on ImageButton so that I can navigate to another page.

How should I do this?

Download FREE API for Word, Excel and PDF in ASP.Net: Download
 
Share on FaceBook Share on Twitter
 
dharmendr
 on Dec 04, 2019 01:24 AM on Dec 04, 2019 02:18 AM
Answer

Hi Sumeet,

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

Database

I have made use of the following table tblFiles with the schema as follows.

You can download the database table SQL by clicking the download link below.

Download SQL file

I have already inserted few record in the table.

HTML

C#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<asp:Repeater ID="rptImages" runat="server" OnItemDataBound="rptImages_ItemDataBound">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <%# (Container.ItemIndex) % 2 == 0 ? "<tr>" : string.Empty%>
        <td>
            <%# DataBinder.Eval(Container.DataItem, "Name") %>
            <br />
            <asp:ImageButton ID="ibImage" runat="server" />
        </td>
        <%# (Container.ItemIndex) % 2 == 2 ? "</tr>" : string.Empty%>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<hr />
<table>
    <tr>
        <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
            <ItemTemplate>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "Name") %>
                    <br />
                    <asp:ImageButton ID="ibImage" runat="server" />
                </td>
            </ItemTemplate>
            <SeparatorTemplate>
                </tr>
                <tr>
            </SeparatorTemplate>
        </asp:Repeater>
    </tr>
</table>

VB.Net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<asp:Repeater ID="rptImages" runat="server" OnItemDataBound="rptImages_ItemDataBound">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <%#If(Container.ItemIndex Mod 2 = 0, "<tr>", String.Empty)%>
        <td>
            <%# DataBinder.Eval(Container.DataItem, "Name") %>
            <br />
            <asp:ImageButton ID="ibImage" runat="server" />
        </td>
        <%#If(Container.ItemIndex Mod 2 = 2, "<tr>", String.Empty)%>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<hr />
<table>
    <tr>
        <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
            <ItemTemplate>
                <td>
                    <%# DataBinder.Eval(Container.DataItem, "Name") %>
                    <br />
                    <asp:ImageButton ID="ibImage" runat="server" />
                </td>
            </ItemTemplate>
            <SeparatorTemplate>
                </tr>
                <tr>
            </SeparatorTemplate>
        </asp:Repeater>
    </tr>
</table>

Namespaces

C#

1
2
3
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

1
2
3
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindRepeater();
    }
}
 
private void BindRepeater()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query ="SELECT * FROM tblFiles WHERE ContentType = ''image/jpeg''";
    SqlCommand cmd =new SqlCommand(query);
    using (SqlConnection con =new SqlConnection(conString))
    {
        using (SqlDataAdapter sda =new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt =new DataTable())
            {
                sda.Fill(dt);
                rptImages.DataSource = dt;
                rptImages.DataBind();
                Repeater1.DataSource = dt;
                Repeater1.DataBind();
            }
        }
    }
}
 
protected void rptImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        byte[] bytes = (byte[])(e.Item.DataItemas DataRowView).Row["Data"];
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
        (e.Item.FindControl("ibImage")as ImageButton).ImageUrl ="data:image/png;base64," + base64String;
    }
}
 
protected int i = 0;
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Separator)
    {
        if ((++i % 2) != 0)
        {
            e.Item.Visible =false;
        }
    }
 
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        byte[] bytes = (byte[])(e.Item.DataItemas DataRowView).Row["Data"];
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
        (e.Item.FindControl("ibImage")as ImageButton).ImageUrl ="data:image/png;base64," + base64String;
    }
}

VB.Net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs EventArgs)
    If Not Me.IsPostBackThen
        BindRepeater()
    End If
End Sub
 
Private Sub BindRepeater()
    Dim conStringAs String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim queryAs String ="SELECT * FROM tblFiles WHERE ContentType = ''image/jpeg''"
    Dim cmdAs SqlCommand =New SqlCommand(query)
    Using conAs SqlConnection =New SqlConnection(conString)
        Using sdaAs SqlDataAdapter =New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dtAs DataTable =New DataTable()
                sda.Fill(dt)
                rptImages.DataSource = dt
                rptImages.DataBind()
                Repeater1.DataSource = dt
                Repeater1.DataBind()
            End Using
        End Using
    End Using
End Sub
 
Protected Sub rptImages_ItemDataBound(ByVal senderAs Object,ByVal eAs RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.ItemOrElse e.Item.ItemType = ListItemType.AlternatingItemThen
        Dim bytesAs Byte() =CType((TryCast(e.Item.DataItem, DataRowView)).Row("Data"),Byte())
        Dim base64StringAs String = Convert.ToBase64String(bytes, 0, bytes.Length)
        TryCast(e.Item.FindControl("ibImage"), ImageButton).ImageUrl ="data:image/png;base64," & base64String
    End If
End Sub
 
Protected iAs Integer = 0
Protected Sub Repeater1_ItemDataBound(ByVal senderAs Object,ByVal eAs RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.SeparatorThen
        If (System.Threading.Interlocked.Increment(i)Mod 2) <> 0Then
            e.Item.Visible =False
        End If
    End If
    If e.Item.ItemType = ListItemType.ItemOrElse e.Item.ItemType = ListItemType.AlternatingItemThen
        Dim bytesAs Byte() =CType((TryCast(e.Item.DataItem, DataRowView)).Row("Data"),Byte())
        Dim base64StringAs String = Convert.ToBase64String(bytes, 0, bytes.Length)
        TryCast(e.Item.FindControl("ibImage"), ImageButton).ImageUrl ="data:image/png;base64," & base64String
    End If
End Sub

Screenshot

Note: I have used 2 column for the sample. So modify it with 4 column.

 
 
Nguồn: https://www.aspsnippets.com/questions/258743/Create-n-Column-Table-RepeatColumns-in-ASPNet-Repeater-using-C-and-VBNet/
Back Head Print
Tin khác

Search GridView with Paging on TextBox KeyPress using jQuery in ASP.Net    (28/07/2010)

Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net with C# and VB.Net    (28/07/2010)

Disable Button and Submit button after one click using JavaScript and jQuery    (29/07/2010)

Split and convert Comma Separated (Delimited) String to Table in SQL Server    (01/09/2010)

Select Column values as Comma Separated (Delimited) string in SQL Server using COALESCE    (01/09/2010)