In this article I will explain with an example, how to bind (populate) Repeater control with JSON object using jQuery AJAX in ASP.Net using C# and VB.Net.
Using jQuery AJAX and WebMethod, the records will be fetched from database into a Generic list of property class object which will be received as JSON object on Client Side and then that JSON object will be used to populate the ASP.Net Repeater on Client Side using jQuery.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
HTML Markup
The following HTML Markup consists of an ASP.Net Repeater control placed inside an HTML DIV. The Repeater control is placed inside HTML DIV as Repeater control does not render itself and hence it cannot be accessed using the Client ID with JavaScript or jQuery.
The database fields are wrapped using an HTML SPAN element with CSS class specified, these CSS class names will be used by jQuery to identify and set the values to the respective fields inside the ASP.Net Repeater control.
<div id="dvCustomers">
<asp:Repeater ID="rptCustomers" runat="server">
<ItemTemplate>
<table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
<tr>
<td>
<b><u><span class="name">
<%# Eval("ContactName") %></span></u></b>
</td>
</tr>
<tr>
<td>
<b>City: </b><span class="city"><%# Eval("City") %></span><br />
<b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
<b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
<b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
<b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
The Property Class
The following property class is created to hold the data returned from database and it is returned to the Client Side script as a JSON object.
C#
public class Customer
{
public string CustomerId { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
VB.Net
Public Class Customer
Public Property CustomerId() As String
Public Property ContactName() As String
Public Property City() As String
Public Property Country() As String
Public Property PostalCode() As String
Public Property Phone() As String
Public Property Fax() As String
End Class
Populating Repeater with a Dummy Item
In order to populate the Repeater control with JSON object using jQuery AJAX on Client Side, a Generic list containing an empty object of the Customers class is returned and is used to the populate the Repeater control with a dummy item.
This dummy item will be cloned and used to add new items to the Repeater control on Client Side using jQuery.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
List<Customer> customers = new List<Customer>();
customers.Add(new Customer());
rptCustomers.DataSource = customers;
rptCustomers.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim customers As New List(Of Customer)()
customers.Add(New Customer())
rptCustomers.DataSource = customers
rptCustomers.DataBind()
End If
End Sub
WebMethod to handle jQuery AJAX calls
The following WebMethod will be used as a source of data to the jQuery AJAX calls. When a call is made to the WebMethod, it first fetches the records from the database and populates a Generic list of Customer class objects and then the list is returned as a JSON object back to the Client Side function.
C#
[WebMethod]
public static List<Customer> GetCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 * FROM Customers"))
{
cmd.Connection = con;
List<Customer> customers = new List<Customer>();
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new Customer
{
CustomerId = sdr["CustomerId"].ToString(),
ContactName = sdr["ContactName"].ToString(),
City = sdr["City"].ToString(),
Country = sdr["Country"].ToString(),
PostalCode = sdr["PostalCode"].ToString(),
Phone = sdr["Phone"].ToString(),
Fax = sdr["Fax"].ToString(),
});
}
}
con.Close();
return customers;
}
}
}
VB.Net
<WebMethod()> _
Public Shared Function GetCustomers() As List(Of Customer)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT TOP 10 * FROM Customers")
cmd.Connection = con
Dim customers As New List(Of Customer)()
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New Customer() With { _
.CustomerId = sdr("CustomerId").ToString(), _
.ContactName = sdr("ContactName").ToString(), _
.City = sdr("City").ToString(), _
.Country = sdr("Country").ToString(), _
.PostalCode = sdr("PostalCode").ToString(), _
.Phone = sdr("Phone").ToString(), _
.Fax = sdr("Fax").ToString() _
})
End While
End Using
con.Close()
Return customers
End Using
End Using
End Function
Client Side functionality
Inside the jQuery document ready event handler, an AJAX call is made to the WebMethod. Inside the Success event handler, a loop is executed over the items of the received JSON object.
Inside the loop, the dummy item of the Repeater control is cloned and the columns values are set to their respective fields using the CSS class names.
<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 = $("#dvCustomers table").eq(0).clone(true);
var customers = response.d;
$("#dvCustomers table").eq(0).remove();
$(customers).each(function () {
$(".name", table).html(this.ContactName);
$(".city", table).html(this.City);
$(".postal", table).html(this.PostalCode);
$(".country", table).html(this.Country);
$(".phone", table).html(this.Phone);
$(".fax", table).html(this.Fax);
$("#dvCustomers").append(table).append("<br />");
table = $("#dvCustomers table").eq(0).clone(true);
});
}
</script>
Screenshot
![Bind (Populate) Repeater control with JSON object using jQuery AJAX in ASP.Net]()
Demo
Downloads
