Hi RichardSa,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane container fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<br />
<asp:Repeater ID="RepDetails" runat="server" OnItemDataBound="RepDetails_OnItemDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="card shadow p-3 mb5 bg-white rounded" style="border: 1px solid #d1d5d4; margin: 15px; padding: 0px 0px; width: auto; border-radius: 10px;">
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>
<span class="time">
<asp:Label ID="lblUser" runat="server" ForeColor="#008000" Font-Size="11pt" Text='<%#Eval("FirstName") %>' />
<i class="fa fa-clock-o" aria-hidden="true" style="font-size: 10pt; font-weight: 100; color: #838996;"></i>
<asp:Label ID="lblDate" runat="server" ForeColor="#666666" Font-Size="7.5pt" Text='<%# Eval("BirthDate", "{0:MMMM d yyyy}") %>' />
<asp:Label runat="server" ForeColor="#666666" Font-Size="8pt" Text="at"></asp:Label>
<asp:Label ID="Datelabel" runat="server" ForeColor="#666666" Font-Size="7.5pt" Text='<%# Eval("BirthDate", "{0:hh:mm tt}") %>' /></span>
<hr />
<br />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="lblComment" runat="server" Font-Size="9.5pt" Text='<%#Eval("Notes") %>' /><br />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<div class="col-md-5" style="max-width: 100%; height: 100%; vertical-align: middle; text-align: center; align-content: center; align-items: center;">
<asp:Image ID="postimg" runat="server" Height="30%" Width="80%" />
</div>
<hr />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span>
<asp:Label runat="server" Font-Size="8pt" Text="Comment"></asp:Label>
<asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Nunito" ForeColor="#006699" Text="Comment2" Font-Size="8pt"></asp:HyperLink>
</span>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
</div>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<br />
<br />
<div id="loadMore" style="">
<a href="#">Load More</a>
</div>
</div>
</div>
<br />
</div>
<asp:Button ID="btnLoadMore" Text="" runat="server" Style="display: none;" OnClick="OnLoadMore" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#loadMore").on('click', function (e) {
e.preventDefault();
$("#loadMore").fadeOut('slow');
$('[id*=btnLoadMore]').trigger('click');
});
});
</script>
Namespaces
C#
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
VB.Net
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.IO
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindRepeaterData("SELECT TOP 2 * FROM Employees");
}
}
protected void RepDetails_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Image img = e.Item.FindControl("postimg") as Image;
DataRowView dr = (DataRowView)e.Item.DataItem;
if (!Convert.IsDBNull(dr["Photo"]))
{
byte[] bytes = null;
System.Drawing.ImageConverter converter = new System.Drawing.ImageConverter();
System.Drawing.Image imgage = (System.Drawing.Image)converter.ConvertFrom((byte[])dr["Photo"]);
using (MemoryStream ms = new MemoryStream())
{
imgage.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
bytes = ms.ToArray();
}
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
string imageUrl = "data:image/jpg;base64," + base64String;
img.ImageUrl = imageUrl;
img.Visible = true;
}
else
{
img.Visible = false;
}
}
}
protected void OnLoadMore(object sender, EventArgs e)
{
BindRepeaterData("SELECT * FROM Employees");
ScriptManager.RegisterStartupScript(this, this.GetType(), "HideLoadMore", "$('#loadMore').fadeOut('slow');", true);
}
private void BindRepeaterData(string query)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
SqlCommand cmd = new SqlCommand(query, con);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
RepDetails.DataSource = dt;
RepDetails.DataBind();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindRepeaterData("SELECT TOP 2 * FROM Employees")
End If
End Sub
Protected Sub RepDetails_OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
Dim img As Image = TryCast(e.Item.FindControl("postimg"), Image)
Dim dr As DataRowView = CType(e.Item.DataItem, DataRowView)
If Not Convert.IsDBNull(dr("Photo")) Then
Dim bytes As Byte() = Nothing
Dim converter As Drawing.ImageConverter = New Drawing.ImageConverter()
Dim imgage As Drawing.Image = CType(converter.ConvertFrom(CType(dr("Photo"), Byte())), Drawing.Image)
Using ms As MemoryStream = New MemoryStream()
imgage.Save(ms, Drawing.Imaging.ImageFormat.Jpeg)
bytes = ms.ToArray()
End Using
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
Dim imageUrl As String = "data:image/jpg;base64," & base64String
img.ImageUrl = imageUrl
img.Visible = True
Else
img.Visible = False
End If
End If
End Sub
Protected Sub OnLoadMore(ByVal sender As Object, ByVal e As EventArgs)
BindRepeaterData("SELECT * FROM Employees")
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "HideLoadMore", "$('#loadMore').fadeOut('slow');", True)
End Sub
Private Sub BindRepeaterData(ByVal query As String)
Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
Dim cmd As SqlCommand = New SqlCommand(query, con)
Dim dt As DataTable = New DataTable()
Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
da.Fill(dt)
RepDetails.DataSource = dt
RepDetails.DataBind()
End Sub
