In this article I will explain with an example, how to populate (bind) ASP.Net Repeater client side by fetching DataSet or DataTable from server as XML using jQuery AJAX.
Using jQuery AJAX and WebMethod, the records will be fetched using DataSet received as XML string and then the XML string will be used to populate (bind) 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;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
Populating Repeater with a Dummy Item
In order to populate the Repeater control using jQuery AJAX on Client Side, a dummy DataTable will be used with Column schema same as that of the columns returned from the database.
This dummy item will be cloned and used by jQuery to add new items to the Repeater control on Client Side.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindDummyItem();
}
}
private void BindDummyItem()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerID");
dummy.Columns.Add("ContactName");
dummy.Columns.Add("Country");
dummy.Columns.Add("City");
dummy.Columns.Add("PostalCode");
dummy.Columns.Add("Phone");
dummy.Columns.Add("Fax");
dummy.Rows.Add();
rptCustomers.DataSource = dummy;
rptCustomers.DataBind();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.BindDummyItem()
End If
End Sub
Private Sub BindDummyItem()
Dim dummy As New DataTable()
dummy.Columns.Add("CustomerID")
dummy.Columns.Add("ContactName")
dummy.Columns.Add("Country")
dummy.Columns.Add("City")
dummy.Columns.Add("PostalCode")
dummy.Columns.Add("Phone")
dummy.Columns.Add("Fax")
dummy.Rows.Add()
rptCustomers.DataSource = dummy
rptCustomers.DataBind()
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 DataSet and then the DataSet is returned as an XML string back to the Client Side function.
C#
[WebMethod]
public static string GetCustomers()
{
string query = "SELECT TOP 10 * FROM Customers";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
VB.Net
<WebMethod()> _
Public Shared Function GetCustomers() As String
Dim query As String = "SELECT TOP 10 * FROM Customers"
Dim cmd As New SqlCommand(query)
Return GetData(cmd).GetXml()
End Function
Private Shared Function GetData(cmd As SqlCommand) As DataSet
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
sda.Fill(ds)
Return ds
End Using
End Using
End Using
End Function
Client Side functionality
Inside the jQuery document ready event handler, an AJAX call is made to the WebMethod. The XML string received inside the Success event handler is parsed into an XML and then a loop is executed for each entry present in the XML.
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 xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var table = $("#dvCustomers table").eq(0).clone(true);
$("#dvCustomers table").eq(0).remove();
customers.each(function () {
var customer = $(this);
$(".name", table).html(customer.find("ContactName").text());
$(".city", table).html(customer.find("City").text());
$(".postal", table).html(customer.find("PostalCode").text());
$(".country", table).html(customer.find("Country").text());
$(".phone", table).html(customer.find("Phone").text());
$(".fax", table).html(customer.find("Fax").text());
$("#dvCustomers").append(table).append("<br />");
table = $("#dvCustomers table").eq(0).clone(true);
});
}
</script>
Screenshot
![Populate ASP.Net Repeater by binding DataSet Client Side using jQuery AJAX]()
Demo
Downloads
