By taking reference of the below article i have created an example.
Check this example. Now please take its reference and correct your code.
HTML
<div id="dvtbl_Mst_Info">
<asp:Repeater ID="rptNewDeal" runat="server">
<ItemTemplate>
<table>
<tr>
<td style="width: 150px">
<b>ID: </b><span class="id">
<%# Eval("CustomerID")%></span><br />
<b>Name: </b><span class="name">
<%# Eval("ContactName")%></span><br />
<b>City: </b><span class="city">
<%# Eval("City")%></span><br />
<b>Country: </b><span class="country">
<%# Eval("Country")%></span><br />
</td>
<td style="width: 100px">
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("Image") %>' Height="100px"
Width="100px" class="img-responsive" CssClass="image" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) { alert(response.d); },
error: function (response) { alert(response.d); }
});
});
function OnSuccess(response) {
var table = $("#dvtbl_Mst_Info table").eq(0).clone(true);
var customers = response.d;
$("#dvtbl_Mst_Info table").eq(0).remove();
$(customers).each(function () {
$(".id", table).html(this.CustomerID);
$(".name", table).html(this.ContactName);
$(".city", table).html(this.City);
$(".country", table).html(this.Country);
$(".image", table).attr("src", this.Image);
$("#dvtbl_Mst_Info").append(table);
table = $("#dvtbl_Mst_Info table").eq(0).clone(true);
});
}
</script>
Namespace
C#
using System.Data;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable customers = new DataTable();
customers.Columns.AddRange(new DataColumn[] {
new DataColumn("CustomerID"), new DataColumn("ContactName"),
new DataColumn("City"), new DataColumn("Country"), new DataColumn("Image") });
customers.Rows.Add();
rptNewDeal.DataSource = customers;
rptNewDeal.DataBind();
}
}
[WebMethod]
public static List<CustomerDetails> GetCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 5 CustomerID,ContactName,City,Country,'' as Image FROM Customers"))
{
cmd.Connection = con;
List<CustomerDetails> customers = new List<CustomerDetails>();
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new CustomerDetails
{
CustomerID = sdr["CustomerID"].ToString(),
ContactName = sdr["ContactName"].ToString(),
City = sdr["City"].ToString(),
Country = sdr["Country"].ToString(),
Image = "Images/" + sdr["CustomerID"].ToString() + ".jpg"
});
}
}
con.Close();
return customers;
}
}
}
public class CustomerDetails
{
public string CustomerID;
public string ContactName;
public string City;
public string Country;
public string Image;
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim customers As DataTable = New DataTable()
customers.Columns.AddRange(New DataColumn() {New DataColumn("CustomerID"), New DataColumn("ContactName"), _
New DataColumn("City"), New DataColumn("Country"), New DataColumn("Image")})
customers.Rows.Add()
rptNewDeal.DataSource = customers
rptNewDeal.DataBind()
End If
End Sub
<WebMethod()>
Public Shared Function GetCustomers() As List(Of CustomerDetails)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT TOP 5 CustomerID,ContactName,City,Country FROM Customers")
cmd.Connection = con
Dim customers As List(Of CustomerDetails) = New List(Of CustomerDetails)()
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New CustomerDetails With {.CustomerID = sdr("CustomerID").ToString(), .ContactName = sdr("ContactName").ToString(), .City = sdr("City").ToString(), .Country = sdr("Country").ToString(), .Image = "Images/" & sdr("CustomerID").ToString() & ".jpg"})
End While
End Using
con.Close()
Return customers
End Using
End Using
End Function
Public Class CustomerDetails
Public CustomerID As String
Public ContactName As String
Public City As String
Public Country As String
Public Image As String
End Class
Screenshot
